<aside> 💡

Study Tasks

• Understand and interpret WAI-ARIA 1.2
• Understand the purpose and impact of WAI-ARIA 1.2.
• Understand the WAI-ARIA 1.2 model of roles and properties.
• Know when and why to use WAI-ARIA 1.2, and when to use standard HTML instead. </aside>

Resources

Accessible Rich Internet Application [ARIA] (In Depth)

ARIA Attributes Can Provide

• Role (role="checkbox")
• Name (aria-label="Can_Have_Gluten")
• State (aria-checked="false")
• Relationship (aria-controls="Gluten_Options")
• Description (aria-describedby="menu_instructions_allergies")

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

Structure

• Roles
  • Abstract Roles (only for categorization - ex. landmark, roletype, range, window)
  • Widget Roles (button, menu, slider, progressbar, combobox)
  • Document Structure Roles (heading, table, cell)
  • Landmark Roles (banner, navigation, main)
  • Live Region Roles (alert, status)
  • Window Roles (ex. alertdialog, dialog)
• Attributes

  • Widget Attributes

    State (dynamic)	Property (not/less dynamic)
    aria-checked
    aria-disabled
    aria-expanded
    aria-hidden
    aria-invalid
    aria-pressed
    aria-selected
    aria-autocomplete
    aria-haspopup
    aria-label
    aria-level
    aria-multiline
    aria-multiselectable
    aria-orientation
    aria-readonly
    aria-required
    aria-sort
    aria-valuemax
    aria-valuemin
    aria-valuenow
    aria-valuetext`

  • Live Region Attributes

    State (dynamic)	Property (not/less dynamic)
    aria-busy
    aria-atomic
    aria-live
    aria-relevant

  • Drag-and-Drop Attributes

    State (dynamic)	Property (not/less dynamic)
    aria-grabbed	aria-dropeffect

  • Relationship Attributes

    State (dynamic)	Property (not/less dynamic)
    n/a	aria-activedescendant
    aria-controls
    aria-describedby
    aria-flowto
    aria-labelledby
    aria-owns
    aria-posinset
    aria-setsize

Authoring Practice Guide (APG) Sections

1. Pattern
   1. widget types, keyboard interactions, roles, state, properties, examples
2. Practices
   1. explains how to meet accessibility needs