This presentation for AllyCamp 2020, looks at accessible names, how they are exposed in the browsers accessibility tree, and their importance to assistive technologies. There is also a deep dive into simple examples, advanced examples using ARIA, and an overview of the W3C's Accessible Name and Description Computation.
18. There are a wide range of
Accessibility APIs in use, including:
19. • MSAA: Microsoft Active Accessibility
• UI-AUTOMATION: Microsoft User Interface Automation
• UIA-EXPRESS: MSAA with UIA Express
• AXAPI: Mac OS X Accessibility Protocol
• ATK: Linux/Unix Accessibility Toolkit
• AT-SPI: Assistive Technology Service Provider Interface
• IAccessible2: IAccessible2
46. Let's look at an example of the
Accessibility API, the DOM and
accessibility tree in action.
47. In the following example, we’ll go
through the steps of a screen reader
user going to a web application,
navigating the application and then
activating a button.
48. 1. When the user types in a URL
and hits “ENTER”, an HTTP
request is sent by the browser.
74. In the case of <a> and <button>
elements, and elements with a role
of button or link, this would
mean:
75. 1. Use aria-labelledby
2. Otherwise, use aria-label
3. Otherwise, use element’s subtree
4. Otherwise, use title
5. If none of the above yield a usable text string, there is no accessible
name
76. What happens if you apply multiple
name options to an object?
85. In the case of <img> elements, this
would mean:
86. 1. Use aria-labelledby
2. Otherwise, use aria-label
3. Otherwise, use alt
4. Otherwise, use title
5. If none of the above yield a usable text string, there is no accessible
name.
88. In the case of most of the common
<input> elements, <select> and
<textarea> elements, this would
mean:
89. 1. Use aria-labelledby
2. Otherwise, use aria-label
3. Otherwise, use associated <label> element(s)
4. Otherwise, use title
5. Otherwise, use placeholder
6. If none of the above yield a usable text string, there is no accessible
name.
101. While there is an accessible name
present, it does not provide any
context for assistive technologies.
102. Depending on the circumstances,
this link would probably fail
“Success Criterion 2.4.4 Link
Purpose”.
https://www.w3.org/TR/WCAG21/#link-purpose-in-context
103. If the designer/developer did not
want a more descriptive link text to
be displayed, an aria-label could
be used to provide additional
context.