Comparison list of HTML tag roles in popular screen readers

Entry categories AccessibilityInclusive designUsability
Men discussing a dizzying and broken structure of ancient columns. 'Ancient Cistern in Val di Noto from Views in the Ottoman Dominions, in Europe, in Asia, and some of the Mediterranean islands (1810)' illustrated by Luigi Mayer (1755-1803).

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.

The opinions and views expressed here do not necessarily reflect those of my employer. Did I get something wrong? Need to ask a question? Email me at "contact" at this URL, or hit me up on one of my social profiles.
Posted on