Accessibility : Repetitive and unclear heading text (Failure WCAG 2.4.6)

[RababGomaa]

Unclear and repetitive headings are confusing and overwhelming for a screen reader user. Examples of failures found: 1) Contact us, Contact [Institution] : Repetitive headings with different level <h2>, <h3> 2) Featured (invisible), Features : Similar naming confuses the user and are overwhelming for a screen reader user.

Related WCAG technique:
G130: Providing descriptive headings Canada.ca Style Guide: 5.1 Write useful page titles and headings

[quidampepin]

@RubyDo. Would you be able to give us a bit more info? 1) Contact us vs Contact [Institution]. "Contact us" is a H2 in the template, while "Contact [Institution]" is not heading. There is a "Contact us" listed as an H3 in a guidance section - that section wouldn't be on a live page for the public. I don't think there's an issue?

2) Featured (invisible) vs Features: this one I can see. Do you have a proposal for the invisible heading? Would "News and features" work?

Thanks!

[quidampepin]

Oh, sorry, on point no 1: the "Contact [Institution]" currently IS a heading - we will change that so it's just a bulleted item. I think that would take care of this one?

[quidampepin]

Sorry, I got this all wrong... On point 2: There is a <h2 class="wb-inv">Featured</h2> at the top (featured link), and <h2 class="h3">Features</h2> at the bottom.

If we rename the first one (the invisible link) "Featured link", would it take care of it?

[RababGomaa]

Hello @quidampepin https://design.canada.ca/coded-layout/institutional_landing_page_guidance.html Re:1, yes removing the <h3> and putting the three links in a list and wrapping it in a section tag would solve all issues. Here is a sample of code <section><h2>Contact Us</h2> <ul> <li>Contact [Institution] </li> <li>Top contact task 2 </li> <li>Top contact task 3 </li> </ul> </section>

Re2: I would remove the first one (invisible) <h2 class="wb-inv">Featured</h2> and the preceding section In my opinion, the use of this blue section may vary from an organization to the other depending on the context Context 1:
And this is when the content is related to the H1, then those links would blend well with the H1 content and therefore the code would have no section or invisible heading. Check photo attached e.g. <h1>[Institution name]</h1> <p>Short description of the institution’s mandate.</p> <ul> <li> [...]</li> <li> [...]</li> </ul>

Context 2: like the And this is if there is a need to shed a light on something urgent then use the topic to create a descriptive VISIBLE heading h2 <h1> <p>Short description of the institution’s mandate.</p> <p><a href="link">Super task</a><p> <section> <h2>Financial assistance of COVID-19</h2> <ul> <li> [...]</li> <li> [...]</li> </ul> </section>

Context 1 screenshot example:

Context 2 screenshot example:

[jmealing]

@RubyDo The headings have been updated to be more specific.

The featured link will remain a single item. It's intended use is a single transient promotion, like CRA during tax season warning of fraud. It is not meant to be a list of multiple items. This could be confusing if it looks like a secondary list of MR items - such changes would need to be tested and validated before being considered. We recognize with COVID-19 there are additional links and messages that need to come forward. What we've seen from testing is that banding alone has been quite effective in sectioning COVID content from everyday content (although the ideal is always to integrate it into the relevant content, but this takes time):

https://www.canada.ca/en/public-health/services/diseases/coronavirus-disease-covid-19.html http://test.canada.ca/covid-19-guidance/proto/contact-us.html