Improve/fix a11y/wcag on every page

The accent character is fine once you download it and apply the patch , no issues.

reviewing patch, it may be incomplete.

Ok this is a big rollup of accumulated a11y / wcag fixes.

Better now than never.

Lucky 7

@joseph are these changes coming from a WCAG scan of your site, or are you referencing some documentation/example? Canada.ca doesn't seem to have these changes which is why I ask.

This is coming straight from w3c

https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/examples/navigation.html

I didn't notice these, someone else brought this to my attention, just pushing up a whole bunch of changes we made to improve wcag.

Thanks for the info!

Tested this on WxT 5.0.0 instance, I can see that the "role=menu" attribute is gone for the footer menus.

@joseph I see an issue with your patch:

-    <h4>
-      <span class="wb-inv">{{ 'Themes and topics'|t }}</span>
+    <h4 id="Themes-et-sujets">
+      <span class="wb-inv">Thèmes et sujets</span>

Don't think {{ 'Themes and topics'|t }} should be replaced with the actual translated text. Also, the h4 ID should be lower-case like "themes-et-sujets", and all other IDs should use lower case as well. I believe it is a convention to use lowercase letters for IDs and class names in HTML and CSS.

@smulvih2

that's not a problem because that twig has a seperate english and a seperate french, adding a |t call is just adding load for no reason.

block--footer--gcweb--wxt-bootstrap-footer-fr.html.twig

If you ever do refactor WxT sometime down the road with say this module in mind:

https://www.drupal.org/project/translatable_menu_link_uri →

Then there would no longer be a need for the seperate footer twig.

With that said, probably easiest for simple upgrade path to leave sleeping dogs where they are.

This WCAG /wc3 fix is going to help our clients out,

@joseph I use multilingual_menu_urls → on a few projects for this and works well. I see what you mean about the strings being in a French template file thanks for pointing that out! I still think id/classes should still be all lower case, but everything else looks good to me. Will try to test this out later today. Thanks!

@joseph I review this in detail, these are great WCAG improvements! I provide my feedback in a patch (with interdiff). Please see below a list of changes:

• Make all IDs lower case
• Use same IDs in English and French (remove the -en/-fr)
• Use gcweb-main-menu as ID for main menu H2
• Added aria-labelledby to additional menu template to ensure this fix applies across all displays

Let me know if this captures all of your fixes.

@smulvih2 , yes those are smart changes that you made to the patch. Thanks, it looks good to me!

This all looks great to me and appreciated everyone helping to improve the accessibility!

I noticed we dropped the roles still as mentioned by Optasy

https://www.drupal.org/project/wxt/issues/3385626#comment-15265800 →

Was this intentional, I was pretty sure the wet-boew JS reacts on some of these elements.

@sylus the role attribute was removed from the <li> elements, this is inline with Canada.ca so think we are ok here.

Automatically closed - issue fixed for 2 weeks with no activity.