Native HTML Tag Roles in Popular Screen Readers

Posted on • Category: Accessibility
Fishing boats (1900 - 1936) by Ohara Koson (1877-1945). Original from The Rijksmuseum. Digitally enhanced by rawpixel.

One thing that drives me up a wall to no end while testing screen readers is how different they read back the various roles, tags, content, and markup of a page in different browsers and OSes. I finally grew tired of this and decided to do a massive deep dive into exactly what & how I was going to get back from each AT (assistive technology). Here’s what I decided to test:

  1. Test the most popular screen reader and browsers being used as of 2019 (thanks to the great work by WebAIM)
    1. Browsers: Chrome (Win/Mac/Android), IE11, Edge (Win), Firefox (Win/Mac)
    2. Assistive tech: JAWS 2020 (free for personal use until August!), NVDA, Voiceover (Desktop/Mobile), Talkback
  2. Make a page that has every single tag supported in HTML5 as of June 2020
  3. Add a tabindex=’0′ to each asset and tab through with each combo
  4. Record the results the best I could in this shared Google doc

Unsurprisingly, the results were widely varied. Feel free to peruse the list yourself, but here are my biggest takeaways. (Also, I’ll be excluding Voiceover and Firefox. Absolutely no read-back of any sort. Not sure where the responsibility lies to fix that one, but its a pretty big deal.)

  • Some readers either read:
    • The role and content
    • The content only
    • Nothing at all (the worst possible option in my mind)
    • Skipped the tab-able element all together
  • The tags a, button, h1 through h6, hr, basic inputs, main, ol, and ul all seemed to be generally supported in every experience about the same way; only a and button were completely consistent everywhere
  • Mobile Safari and Desktop Safari read back differently
  • Voiceover on desktop read “group” for almost everything that didn’t have an explicit role, but it wasn’t completely consistent from Safari to Chrome
  • Windows Edge (Chromium) and Chrome functioned mostly the same
  • Generally speaking, every browser read about the same number of elements back in a descriptive way, but they did it differently, and the tags supported were a bit different too
  • I totally forgot about the tags map and area; I had no idea about the samp tag
  • This took much longer to do than I thought it would 🙂

As expected, this reminds me of the old browser wars days. Everyone doing something different, and its super confusing.

Hope this list is helpful for you as it was for me. Someday I’ll get around to testing the read-back every variation of the role attribute in a similar way.

My opinions & views expressed may not reflect my employer's.


Add a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.