RE: screen readers and html 5 elements

Hi Michellanne,

SiteImprove is likely referencing SC 1.3.1 Info and Relationships and labeling this as a warning given the fact that it’s not required to label regions on your page. There are sufficient techniques in WCAG such as ARIA20: Using a region role to identify a region of the page (section has an implicit role of region) and ARIA13: Using aria-labelledby to name regions and landmarks, that aim to address this best practice. That’s where this advice is coming from.

Since you’re unable to use aria-label on this section, have you considered providing multiple IDs to the aria-labelledby attribute? You can pass in the ID of each of the headings, space-separated, and have each read out as part of the accessible name of the region. Let me know if that works for you.

Honestly, having headings at the beginning of each section satisfies both SC 1.3.1 Info and Relationships and SC 2.4.1 Bypass Blocks. Ultimately, it’s your decision to follow the best practices accordingly, but I can tell you that this isn’t a classical failure of either success criteria.

Nick Beranek
Capital One

From: Michellanne Li [mailto:li@palantir.net]
Sent: Thursday, May 17, 2018 10:55 AM
To: w3c-wai-ig@w3.org
Subject: screen readers and html 5 elements

Hey ya'all,

My team is struggling with an issue regarding adding aria labels to <section> elements in the markup for a website. Due to the way the site has been set up in Drupal, it's going to be a pretty heavy development lift to add an aria label to a particular section (the other sections are fine) due to the section's unique markup. It looks like this:

<section>
  <div>
    <h2>News</h2>
    news content
  </div>

  <div>
    <h2>Events</h2>
    events content
  </div>
</section>

Because this section contains two divs with different headers, I am not able to use the aria-labelledby attribute. And because the content editor might use other blocks instead of news and events, we can't hardcode an aria-label attribute.

Our testing tool (Siteimprove) flags this this as an "warning" because it could be a problem for screen readers, but I'm having trouble understanding why and how to fix it.

Thanks!

++

Michellanne Li
Web Designer

Palantir.net<https://urldefense.proofpoint.com/v2/url?u=http-3A__palantir.net_&d=DwMFaQ&c=pLULRYW__RtkwsQUPxJVDGboCTdgji3AcHNJU0BpTJE&r=dC_UMEUmMt99VWyKrKPEqTxnbvpXlSbd6mQlzIdMbyICf0SCKN1_f4B400_d3Ziy&m=zfLSG1aY0otiKg_ZD6mKwbgoj0mIlMDYiKZVEhGr22w&s=6EIV6ro8_mB4Y6osaA_9AJyQZLSUVqF4yV2ylQ9mw48&e=>
773.645.4100<tel:773.645.4100>

Sign up for occasional emails:  http://www.palantir.net/newsletter<https://urldefense.proofpoint.com/v2/url?u=http-3A__www.palantir.net_newsletter&d=DwMFaQ&c=pLULRYW__RtkwsQUPxJVDGboCTdgji3AcHNJU0BpTJE&r=dC_UMEUmMt99VWyKrKPEqTxnbvpXlSbd6mQlzIdMbyICf0SCKN1_f4B400_d3Ziy&m=zfLSG1aY0otiKg_ZD6mKwbgoj0mIlMDYiKZVEhGr22w&s=DSFj0-NCgxlyfYO0U6p0JhChvN9rIHe73POkZ6spaI0&e=>
Follow us on Twitter<https://urldefense.proofpoint.com/v2/url?u=https-3A__twitter.com_palantir&d=DwMFaQ&c=pLULRYW__RtkwsQUPxJVDGboCTdgji3AcHNJU0BpTJE&r=dC_UMEUmMt99VWyKrKPEqTxnbvpXlSbd6mQlzIdMbyICf0SCKN1_f4B400_d3Ziy&m=zfLSG1aY0otiKg_ZD6mKwbgoj0mIlMDYiKZVEhGr22w&s=kHdKZ5j2UPpMbwsvVp5OhW-6m0FTAyqfKHKSHzBfmaE&e=>
________________________________________________________

The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.