This content originally appeared on Manuel Matuzović - Blog and was authored by Manuel Matuzović
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.
| 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.
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 blog@matuzo.at.
This content originally appeared on Manuel Matuzović - Blog and was authored by Manuel Matuzović
Manuel Matuzović | Sciencx (2023-07-04T00:00:00+00:00) the article element and screen readers. Retrieved from https://www.scien.cx/2023/07/04/the-article-element-and-screen-readers/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.