Trying to understand aria and accessibility

user_2245633 0
Viewed 196

I'm updating a website, doing an iterative improvement on the accessibility.

I'm using multiple tools to get the pages better: FireFox's accessibility tree viewer; Chrome's lighthouse checker; the "wave" accessibility tool, and I'm trying tenon.io (sadly, I don't have access to a decent screen reader - nvda is too fast for me to hear, orca seems to read the current line, and I don't have access to JAWS)

So here's what I have:

I have a navigation structure like this:

  <nav aria-label="Main navigation">
    <section class="desktop-navigation" aria-label="Main Menu">
      <ul aria-label="Menu items">
        <li><a href="/" aria-label="Return to the home page to read about Example">About Example</a></li>
        <li><a href="/documentation/" aria-label="Service Documentation">Documentation</a></li>
        <li><a href="/pricing/" aria-label="Subscription pricing">Pricing</a></li>
        <li><a href="https://example.statuspage.io" aria-label="Example Status" rel="external">Status</a></li>
        <li><a href="/contact-us/" aria-label="Example contact us form">Contact us</a></li>
      </ul>
    </section>

    <section class="main-nav-wrapper" aria-label="Header logos">
      <a href="/"><img src="/images/logo_example.svg?v=488a8c6971df396baaa401bb073b4a6b"
         class="header-logo" alt="The Example logo" aria-label="Example Logo"/></a>
        <div class="site-logos-right" aria-label="Corporate Logos">
          <a class="external-link" href="https://www.example.com/" rel="external"><img
             src="/images/logo_company.svg?v=98693292e027eca1f27cfc89b68a77d2" class="company-logo"
             aria-label="The Company logo" alt="Official logo for Company"/></a>
          <a class="external-link" href="https://example.com/department"
             rel="external"><img src="/images/logo_department.svg?v=ff0114bb2ebf7eff339341f9554220d0"
                 class="edina-logo" alt="Official Department logo" aria-label="department logo" /></a>
        </div>
    </section>
  </nav>

..... and this is 100% according the lighthouse, but tenon.io is reporting an issue (multiple times) and I don't understand why:

This element uses multiple strategies to create labels

This element has more than one possible label. The manner in which the accessible name is calculated for controls uses an algorithm in which only one of these labelling approaches will win. This means one of these labels will be ignored by assistive technologies. There should be only one label provided and the others should be removed.

Examples of items identified:

<nav role="navigation" aria-label="Main navigation">
    <section class="desktop-navigation" aria-label="Main Menu">
      <ul aria-label="Menu items">
        <li><a href="/" aria-label="Return to the home page to read about

(I notice that the W3C site does not label the uls - but then they show as un-named elements in firefox)

I definitely want to label landmarks & sections.... so what's it actually complaing about?

<li><a href="/pricing/" aria-label="Subscription pricing">Pricing</a></li>

.... this is an example of where I want to have a more descriptive label for the element - when scanning the accessibility tree, just having the bare link-text doesn't (to me) read as well as having some context: as a sighted user, I know my eyes have flicked over much of the page, and seen additional text, so subconsciously have some context for the menu items.

My question(s)

How is the accessibility label computed?

Why can't I have a more descriptive label on a link? (lighthouse complains if the alt text doesn't contain the link text... but is happy if it's more than the link text) - or is this tenon.io being over-picky?

wai-aria accessibility
1 Answers

The accessible name computation is how accessibility labels are computed.

You're using aria-label too much, and the result may be difficult to listen to or outright confusing for human visitors using assistive technologies.

The first rule of ARIA is don't use ARIA unless you really have to.

  • It is appropriate to use aria-label on the <nav> and <section> elements. Keep that.

  • I can't think of any good reason to use aria-label on a <ul> element. I'd recommend removing that.

  • Using aria-label on anchor elements is normally unnecessary and should be approached with caution. Unless you have a really good reason, you probably shouldn't be presenting different content to visitors using assistive technology.

  • I would also recommend removing aria-label from your images. This is exactly what alt text is for.

If you really want to use aria-label on anchor elements, WCAG has some guidance:

Per the Accessible Name and Description Computation and the HTML to Platform Accessibility APIs Implementation Guide, the aria-label text will override the text supplied within the link. As such the text supplied will be used instead of the link text by AT. Due to this it is recommended to start the text used in aria-label with the text used within the link. This will allow consistent communication between users.

https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA8.html#description

Don't give up on NVDA just yet. I also found the default speech settings too fast and difficult to understand. You just need to adjust the settings. The voice can also be changed out for better ones. It takes a bit of work to configure, but in my opinion NVDA is the best free screen reader available today. VoiceOver is also very nice if you have access to Mac/iOS products.

user_42749330
Related