1

I have a icon which is not decorative, and it is not directly within an interactive element, though there is an interactive element in the hierarchy.

Something like this:

<button type="button">
    <div> Some info </div>
    <div> other info </div>
    <i class="material-icons"> icon </i>
</button>

This icon displays information about the status of this item.

To make it more accessible, is it better to change the structure to this:

<button type="button">
    <div> Some info </div>
    <div> other info </div>
    <span aria-label="the actual status">/
     <i class="material-icons"> icon </i>
    </span>
</button>

OR this:

<button type="button">
    <div> Some info </div>
    <div> other info </div>
    <i class="material-icons"> icon </i>
    <span class="sr-only"> the actual status </span>
</button>
gaurav5430
  • 12,934
  • 6
  • 54
  • 111
  • 1
    Maybe someone knows this but here I would suggest that you download [this free, open source screen reader](https://www.nvaccess.org/download/) and try what's getting read to the user. The best solution is the one where the context can be understood best. – cloned Jul 09 '19 at 08:25
  • 1
    To make icons **accessible to humans with dyslexia**, you should avoid using icon fonts. The often overwrite default fonts with their optimized fonts, hence they will completely lose the icon font. Use SVG icons instead. https://github.blog/2016-02-22-delivering-octicons-with-svg/#accessibility – Andy Jul 09 '19 at 19:50

1 Answers1

4

I have a icon which is...not directly within an interactive element

That's not what your code example shows.

<button>
   <i>
</button>

Your icon is definitely contained within an interactive element. When a screen reader user tabs to the button, all the text contained between the <button> element will be read as the name of the button. So you'll hear "some info other info icon, button".

You could put an aria-label on the button but I don't like to do that because it duplicates text.

<button type="button" aria-label="some info other info actual status">
    <div> Some info </div>
    <div> other info </div>
    <i class="material-icons"> icon </i>
</button>

If you happen to change <div>other info</div> to <div>some other info</div>, you'd have to remember to change the aria-label to match.

Your suggestion to put an aria-label on the <span> might feel like the right thing to do but you can't stick an aria-label on just any element (although aria-label is a global attribute) because the element needs a "role" as well. See "Practical Support: aria-label, aria-labelledby and aria-describedby".

So your last solution is typically how icon fonts are handled, provided you also "hide" the icon from the screen reader with aria-hidden="true".

<button type="button">
    <div> Some info </div>
    <div> other info </div>
    <i class="material-icons" aria-hidden="true"> icon </i>
    <span class="sr-only"> the actual status </span>
</button>
slugolicious
  • 15,824
  • 2
  • 29
  • 43