Re: screen readers and html 5 elements

Hi Nick,

Thanks so much for clarifying! This is really helpful information. I didn't
realize I could pass multiple IDs through the aria-labelled by attribute.

Best Regards,

++

Michellanne Li
Web Designer

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

Sign up for occasional emails:  http://www.palantir.net/newsletter
Follow us on Twitter <https://twitter.com/palantir>

On Thu, May 17, 2018 at 10:30 AM, Beranek, Nicholas <
Nicholas.Beranek@capitalone.com> wrote:

> 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
>
>
>
> 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.
>