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.

Control Type
Does aria-labelledby reference the control itself and another node?
Sorted

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]