This presentation will look at accessible names, how they are exposed in the browsers accessibility tree, and their importance to assistive technologies. There will be 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.
75. “ If the current node is hidden and is not
directly referenced by aria-labelledby,
aria-describedby, <label> or attribute,
return the empty string.
77. However, the elements are not
explicitly associated using matching
FOR and ID values, and therefore
the <input> returns an empty
string for the accessible name.
80. “ Otherwise, if computing a name, and the
current node has an aria-labelledby
attribute that contains at least one valid
IDREF, process its IDREFs in the order they
occur.
81. In the following example an
<input> element has an aria-
labelledby attribute with two
space-separated values, A and B.
89. “ Otherwise, if computing a name, and if the
current node has an aria-label attribute
whose value is not the empty string, return
the value of aria-label.
90. In the following example, the
<button> element has an aria-
label, which becomes the
accessible name.
93. “ Otherwise, if the current node's native
markup provides an attribute (e.g. title) or
element (e.g. HTML label) that defines a
text alternative, return that alternative in the
form of a flat string, unless the element is
marked as presentational
role="presentation" or role="none".
94. In the following example, the
<label> is explicitly associated
with the <input> using matching
FOR and ID values.
95. This means that the <label>
element provides a text alternative
for the <input> that can be used as
an accessible name.
101. This attribute is considered
problematic and should be
avoided.
https://developer.paciellogroup.com/blog/2013/01/using-the-
html-title-attribute-updated/
102. In reality, the title attribute is
meant to be used as descriptive
text, rather than an accessible
name.
103. It is only promoted to an accessible
name in situations where there is no
other accessible name that can
be computed.
104. In the following example, the <img>
has no alt attribute. However, a
title attribute is present.
105. As there is no alt attribute present,
the title attribute provides a text
alternative for the <img> that can
be used as an accessible name.
127. In the case of <a> and <button>
elements, and elements with a role
of button or link, this would
mean:
128. 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
129. What happens if you apply multiple
name options to an object?
138. In the case of <img> elements, this
would mean:
139. 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.
141. In the case of most of the common
<input> elements, <select> and
<textarea> elements, this would
mean:
142. 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.
154. While there is an accessible name
present, it does not provide any
context for assistive technologies.
155. 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
156. 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.