Calculation of the accessible name and accessible description should follow the algorithm specified in the “Text Alternative Computation” section of the Accessible Name and Description Computation and API Mappings 1.1. According to that algorithm, aria-labelledby references and aria-label text values override and replace the text of the link. aria-labelledby overrides aria-label and, in practice, the two should never be used together. However, if both are present, aria-labelledby should take precedence.
aria-describedby references are descriptions and get voiced by AT after the accessible name is voiced.
When browsing to links, only the link's accessible name (from its text or label) should be announced. When tabbing to / focusing a link, however, both the accessible name from the text or associated label and the description should be announced.
In all cases, the fact that a link is a link should be announced either prior to or after reading the accessible name, depending on how it is encountered (by browsing to or focusing it). Whether “link” is announced before or after the name and description varies between AT.
According to the name and description calculation algorithm, the text value of items referenced by aria-labelledby and aria-describedby can be exposed by a node / element even if those referents are inaccessible through normal AT browsing. For instance, in the examples below, the second and fourth span elements that contain text referred to within the example links are set to aria-hidden and display:none yet their text contents are read by AT when encountering the links.
In order to get the widest reading of labels on text elements, we have set each of the first four div elements to have roles of either heading or region — roles that when focused typically also announce their ARIA-associated labels. In the section below that, however, we set all of the ARIA widget and document roles on elements to test screen reader support.
It should be noted that, with the exception of roles of presentation and none, the accessibility tree should be populated with the full accessible name and description following the Text Alternative Calculation algorithm. It is clear from testing, though, that AT do not always report these labels.
Each div below has both a labelledby and a describedby. The role is in each text description.
Since all roles, with the exception of presentation and none (which are not included below), can get their names from author / associated labels, the expectation would be that the labelledby would get announced when browsed to and both label and description would be announced when programmatically focused. However, AT do not always support names from author.
Some roles can accept names from both author and content. Those roles are identified with "(supports name from content)" in the text description.
For more information, see The Roles Model from WAI ARIA 1.1.
Finally, if you want to test the role elements below using aria-label instead of aria-labelledby:
Or if you want to remove the tabindex="-1" attribute, which removes the ability to focus the role elements below:
You can force the focus to any of the role DIVs above by using these links. (Note: some of these links make cause screen readers to toggle into focus mode):
focus alert, focus alertdialog, focus button, focus checkbox, focus dialog, focus gridcell, focus link, focus log, focus marquee, focus menuitem, focus menuitemcheckbox, focus menuitemradio, focus option, focus progressbar, focus radio, focus scrollbar, focus searchbox, focus slider, focus spinbutton, focus status, focus switch, focus tab, focus tabpanel, focus textbox, focus timer, focus tooltip, focus treeitem, focus combobox, focus grid, focus listbox, focus menu, focus menubar, focus radiogroup, focus tablist, focus tree, focus treegrid, focus application, focus article, focus cell, focus columnheader, focus definition, focus directory, focus document, focus feed, focus figure, focus group, focus heading, focus img, focus list, focus listitem, focus math, focus note, focus region, focus row, focus rowgroup, focus rowheader, focus separator, focus table, focus term, focus toolbar, focus banner, focus complementary, focus contentinfo, focus form, focus main, focus navigation, focus region, and focus search