RE: screen readers and html 5 elements

Michellanne, you could add unique Id’s to the header elements, but concatenating these might make for a lengthy <section> verbal output. Possibly try creating a hidden <label> with a unique Id that identifies the <section> with less verbage.

David

 

From: Michellanne Li [mailto:li@palantir.net] 
Sent: 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

 

 <http://palantir.net/> Palantir.net

 <tel:773.645.4100> 773.645.4100

 

Sign up for occasional emails:   <http://www.palantir.net/newsletter> http://www.palantir.net/newsletter

 <https://twitter.com/palantir> Follow us on Twitter