the article element and screen readers

posted on July 4., 2023

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.

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.

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.

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.

My blog doesn't support comments yet, but you can reply via e-mail.