the article element and screen readers

posted on

I wanted to know how and if common screen readers expose the <article> element.
Here are my results:

Summary

tl;dr: shit's complicated.

Some screen readers don't announce articles and have no default quick nav shortcuts. Some don't announce them but treat them as landmarks. Others announce them as articles and treat them as landmarks. There's no difference whether you label them or not.

article element screen reader support results
NVDA Jaws Voice Over (macOS) Narrator VoiceOver (iOs) Talkback
Virtual Cursor/Swipe no yes yes no yes no
Landmark list no no no no yes yes
Custom article list no yes yes no yes no
Default quick nav key no yes no no no no

Demo code

<article>
  <h2>Unlabelled</h2>
</article>

<article aria-labelledby="heading">
  <h2 id="heading">Labelled by heading</h2>
</article>

<article aria-label="Labelled by attribute">
  <h2>Labelled by attribute</h2>
</article>

NVDA 2023.1 with Firefox 114

NVDA doesn't announce the article's role when you use the arrow keys or list it in the elements list. You can add a custom quick nav shortcut for article navigation, but I couldn't get it working.

JAWS 2023.2212.13 with Edge 114

Jaws announces labelled and unlabelled articles when you use the arrow keys or the O key to navigate. They're not included in the list of landmarks, but you can list all articles by pressing Ctrl + Insert + O.

Jaws listing an unlabelled article and two labelled articles in the articles list.

VoiceOver macOS 13.4.1 with Safari 16.5.1

VoiceOver announces labelled and unlabelled articles when you use the virtual cursor. It also adds a new list of articles to the rotor. The landmarks list in the rotor doesn't include articles.

Voice Over listing an unlabelled article and two labelled articles in the rotor.

Narrator Windows 10 with Edge 114

Narrator doesn't announce the article's role or list it in the elements list.

VoiceOver iOS 15.7.7 with Safari

VoiceOver announces articles when you select contained items or swipe. It includes articles in the landmarks list and adds a new list of articles to the rotor.

Talkback Android 13 with Chrome 114

Talkback doesn't announce articles when you select contained items or swipe, but labelled and unlabelled articles are accessible via the landmark navigation.