<aside> 💡

Study Tasks

• Be familiar with the 5 rules for using ARIA.
• Understand the importance of coding to standards, rather than to the quirks or features of only one set of technologies.
• Know about the semantic structure of the roles. Some roles require parent or child roles, and some roles require attributes.
• Be familiar with techniques for providing accessible names and descriptions.
• Be familiar with the authoring practices for custom widgets, including semantic structure, keyboard behavior, etc.
• Be familiar with the keyboard interaction model for ARIA custom widgets. There are general keyboard patterns and patterns specific to certain types of widgets.
• Understand the importance of testing web designs for accessibility across a variety of platforms, browsers, and assistive technologies. Do not just assume they will work, even if they technically conform to published accessibility specifications.
• Know how to determine when an inaccessible outcome is the result of flaws in the design versus poor support of the technology.
• Know when it may be appropriate to write code that overrides, supplements, or fixes bugs in browsers or assistive technologies (do this only with great care). </aside>

Resources

W3 Accessible Name and Description Computation 1.2 (link)

1. The aria-describedby property is used if present.
2. If the description is still empty, then host-language-specific attributes or elements are used if present, if it wasn't already used as the accessible name. For HTML, these are, depending on the element:
   1. area > alt
   2. fieldset > legend
   3. Form elements > label
   4. figure > figcaption
   5. table > caption
   6. button > value
3. Finally, if the description is still empty, then other host-language-specific attributes or elements are used if present, if it wasn't already used for the accessible name. For HTML, this is the title attribute.

5 Rules for using aria:

1. Use native HTML when possible
2. Don’t change native semantics (unless necessary)
3. Must be keyboard accessible
4. Do not use role=”presentation” or aria-hidden=”true” on focusable elements
5. All interactive elements must have an accessible name

Keyboard interactions model for ARIA custom widgets

• Accordion → Home / End (optional) moves focus to the first/last accordion header
• Dialog → escape to close the
• Button → Space / Enter activates button
• Checkbox → Space toggled check
• Disclosure → Space / Enter activates the disclosure control and toggles the visibility of the disclosure content
• Feed → Page down / Page up - Move focus to next article
• Link → Enter executes the link and Shift + F10 (optional) opens context menu
• Slider → Right Arrow / Left Arrow AND Up Arrow / Down Arrow - increase or decrease the value of the slider by one step
• Switch → Space changes the state (Enter is optional)