wet-boew / GCWeb

Canada.ca theme - A reference implementation of the Canada.ca Content and Information Architecture Specification, the Canada.ca Content Style Guide and the Canada.ca Design System
https://wet-boew.github.io/GCWeb/
Other
91 stars 128 forks source link

object alt text on bilingual pages #1242

Open dalhosny opened 7 years ago

dalhosny commented 7 years ago

Hello,

We noticed on the example bilingual server message page, some of the <object> alt text defined in the aria-labelis not bilingual.

Ie. http://wet-boew.github.io/themes-dist/GCWeb/servermessage-en-fr.html


<div class="col-sm-6">
<object id="gcwu-sig" type="image/svg+xml" tabindex="-1" role="img" data="./GCWeb/assets/sig-blk-en.svg" aria-label="Government of Canada"></object>
</div>
<div class="col-sm-6">
<object id="wmms" type="image/svg+xml" tabindex="-1" role="img" data="./GCWeb/assets/wmms-blk.svg" aria-label="Symbol of the Government of Canada"></object>
</div>

We were also discussing which of these WCAG techniques would be better for the alt text, as H53 would allow us to wrap the French text in a <span lang="fr">to allow screen readers to pronounce it correctly:

http://www.w3.org/TR/WCAG20-TECHS/ARIA6.html http://www.w3.org/TR/WCAG20-TECHS/H53.html

What do you recommend?

Thank you.

EricDunsworth commented 7 years ago

@dalhosny FYI #1241 addresses the bilingualism issue you identified in the FIP image. Apparently I sent it out literally a minute before this issue was opened lol.

dalhosny commented 7 years ago

Well that's convenient, thank you!

I was looking at the change in #1241 though and it seems to be following this WCAG technique:

http://www.w3.org/TR/WCAG20-TECHS/H2.html

That works for any <object> contained in an <a>, but can you recommend an approach when no<a> is used/required? I think we'll need another way to associate the <object> with the text. For example, the wmms-blk.svg in my previous post.

Thank you.

EricDunsworth commented 7 years ago

@dalhosny In #1241, all I did was modify the content of pre-existing text alternatives to be more consistent with the text in the SVGs. I hadn't considered changing any surrounding HTML markup.

From what I can tell, all of WET's unlinked SVG objects are currently employing technique G94 and technique ARIA6 to comply with success criterion 1.1.1.

I really like your suggestion for applying technique H53 for bilingual alt text since it'd make it possible to programmatically declare the "opposite" languages in the text alternatives.

Before proceeding with implementing that kind of technique, we might want to consider the following:

  1. What the scope of this change should be (i.e. only bilingual SVGs or all SVGs that warrant the use of text alternatives). I'd prefer doing it for all relevant SVGs for the sake of consistency.
  2. If it's decided to implement that technique for all relevant SVGs, which WET repos should get it? IMO only GCWeb, theme-gcwu-fegc and theme-gc-intranet should be in scope. I don't believe any other WET repos are using SVGs to represent images of text.
  3. Whether this kind of change is appropriate for a 4.0.x maintenance release. I personally think it would be. Even though it's an HTML markup change, it isn't a breaking change and it doesn't look like WET 4.1/5.0 are coming out anytime soon.

@LaurentGoderre @lucas-hay @shawnthompson @nschonni Thoughts?