the article element and screen readers
I wanted to know how and if common screen readers expose the
Here are my results:
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.
|NVDA||Jaws||Voice Over (macOS)||Narrator||VoiceOver (iOs)||Talkback|
|Custom article list||no||yes||yes||no||yes||no|
|Default quick nav key||no||yes||no||no||no||no|
<h2 id="heading">Labelled by heading</h2>
<article aria-label="Labelled by attribute">
<h2>Labelled by attribute</h2>
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.