CODEWITHSUNDEEP
htmlwai-ariascreen-readers
Martavis P.
Martavis P.

Reputation: 1838

Handling Screen Readers ARIA

I've been reading about using ARIA to get screen readers to read labels that otherwise wouldn't be there. However, I'm having a hard time getting a dropdown menu (from Foundation 6) to be read. Consider this piece of code:

<li role="menuitem">
    <label id="label1" class="sr-only">Testing click label</label>
    <a class="submenu-link" href="/" tabindex="1">
        <span class="has-tip right" data-tooltip aria-haspopup="true" data-disable-hover="false" title="Foundation tooltip">
            <i class="fa fa-plus-circle"></i>
            <span class="text" aria-hidden="true" aria-labelledby="label1">Click here</span>
        </span>
    </a>
</li>

There are two things I'm baffled about:

  1. Why isn't the <a> tag being read by the screen reader like all others that aren't in a menu dropdown?
  2. Why isn't the aria-labelledby being read?

Upvotes: 0

Views: 184

Answers (1)

jack
jack

Reputation: 2904

I suspect it's the "aria-hidden" on the span. As far as the screenreader can tell, that link has nothing in it.

Also:

  • label might seem like a logical thing here, but it's actually only intended for use with inputs.

  • Putting aria-hidden and aria-labelledby on the same element doesn't really make sense.

  • Avoid tabindex=1; use 0 if you need it to be clickable/focusable by the user, or -1 if you just need to be able to focus it via javascript.

  • There's a lot going on in your code sample; can you explain or show what it is you're trying to achieve? Why is there a dropdown item with a label, with a tooltip with an icon in it? How is this menu item supposed to look and function? What do each of these labels actually represent?

Adding labels where appropriate is definitely good to think about, but wherever possible, let normal markup do the heavy lifting.

Upvotes: 1

Related Questions