Nutrition Cards for Accessible Components

Diagram of the different cuts of a pig

A11Y Nutrition Cards is an attempt to digest and simplify the accessibility expectations when it comes to component authoring. Based on the WAI ARIA Authoring Practices Guide.

Component Name

Accordion

Keyboard Expectations
  • Enter or Space = Expands/Collapses Panel
  • Tab = Move to next focusable element
  • Shift + Tab = Move to previous focusable element
  • ↑ ↓ = Cycle headers when header focused
  • Home (Optional) = Focus first header
  • End (Optional) = Focus last header
Focus Expectations
  • Headers should have visible keyboard focus state
  • All keyboard interactions relate to when headers are focused
Labelling Expectations
  • Each accordion header title is contained in an element with role button (e.g. <button>).
  • Each accordion header button wrapped with role heading set to appropriate aria-level.
    • HTML heading elements can be used.
    • Only one button element is allowed in the heading. Other visual elements must be outside the heading element.
  • If the accordion panel is visible, the header button element should have aria-expanded set to true. If the panel is not visible, aria-expanded is set to false.
  • Accordion header buttons have aria-controls set to the ID of the associated accordion panel content.
Component Name

Button

See an example of this component

Keyboard Expectations
  • Enter or Space = Activate Button
Focus Expectations
  • Visible keyboard :focus state
Labelling Expectations
  • Has role of button (e.g. <button>)
  • Clear, non-repetitive label. By default this is the text content inside the element, but can be aria-labelledby or aria-label
Component Name

Disclosure (Show/Hide)

Keyboard Expectations
  • Enter or Space = Toggle content
Focus Expectations
  • Trigger has visible keyboard :focus state
Labelling Expectations
  • Trigger has role of button (e.g. <button>)
  • When content is visible, button has aria-expanded set to true. When content is hidden, it is set to false.
  • (Optional) button references content with aria-controls
Component Name

Tabs

Keyboard Expectations
  • Space or Enter = Activate Tab
  • ←→ = Cycles tab focus
  • ↑↓ = Cycles tab focus (vertical tabs)
  • Home = Focus first tab
  • End = Focus last tab
Focus Expectations
  • Tabs should activate automatically when receiving focus as long as associated tab panels are rendered quickly.
  • Tabs should have visible :focus state.
  • Tabs should have visible aria-selected="true" state
Labelling Expectations
  • The element that wraps tabs has role tablist.
  • Each tab has role tab and is contained within the element with role tablist.
  • Each tab content panel has role tabpanel.
  • Each tab has the property aria-controls referring to its tabpanel.
  • The active tab has aria-selected set to true and all other tab elements have it set to false.
  • Each tabpanel has the property aria-labelledby referring to its associated tab.
Component Name

Tooltip

Keyboard Expectations
  • ESC = Dismisses tooltip
Focus Expectations
  • Focus stays on tooltip trigger while the tooltip is displayed.
  • If the tooltip is invoked when the trigger receives focus, then it is dismissed when it no longer has focus (onBlur). If the tooltip is invoked with mouseIn, then it is dismissed with on mouseOut.
Labelling Expectations
  • Tooltip content container has role tooltip
  • Tooltip trigger references the tooltip element with aria-describedby