Sortable Column Mad Libs
Demonstrating how a browser and screen reader build the announcement presented to users when they encounter sortable table columns. Activate the button and scroll down. Read my post Sortable Table Column Mad Libs for more information.
The HTML
Based on what you provided above, the HTML for your sort control might look like this (I say might because I am faking the id
values of the nodes you would reference through aria-labelledby
and aria-describedby
).
<em>activate the Assemble button<em>
The Announcements
Android 10 / TalkBack / Chrome 85
- Your values
- activate the Assemble button
- String construct
- ([aria-labelledby] | [text]), [control], [aria-describedby]
Android 10 / TalkBack / Firefox 79
- Your values
- activate the Assemble button
- String construct
- [text], "column header"
iPadOS 13.4.1 / VoiceOver / Safari
- Your values
- activate the Assemble button
- String construct
- ([aria-labelledby] | [text]), "column header", "column" [position], ([aria-roledescription] | [control], "one of one") -pause- [aria-describedby]
iOS 13.6.1 / VoiceOver / Safari
- Your values
- activate the Assemble button
- String construct
- ([aria-labelledby] | [text]), "column header", "column" [position], ([aria-roledescription] | [control], "one of one") -pause- [aria-describedby]
macOS 10.15.6 Catalina / VoiceOver / Safari
- Your values
- activate the Assemble button
- String construct
- ([aria-labelledby] | [text]), ([aria-roledescription] | [control]), "column" [position] "of" [total] (, "sort" ["up"|"down"]) -pause- [aria-describedby]
NVDA 2020.2 / Firefox 81
- Your values
- activate the Assemble button
- String construct
- "column" [position] (, "sorted" ["ascending"|"descending"]), ([aria-roledescription] | [control]), ([aria-labelledby] | [text])
JAWS 2020 / IE11
- Your values
- activate the Assemble button
- String construct
- ([aria-labelledby] | [text]), ([aria-roledescription] | [control]) (, "sorted" ["ascending"|"descending"]), "column" [position]
JAWS 2020 / Chrome 85
- Your values
- activate the Assemble button
- String construct
- ([aria-labelledby] | [text]), ([aria-roledescription] | [control]) (, "sorted" ["ascending"|"descending"]), "column" [position]