Accessibility Examples: ARIA

This section will showcase examples of ARIA Widgets and will include examples of other key points of ARIA.

Widget Roles Attributes
1 Accordion Widget
  • button
  • region (optional)
  • aria-controls (property)
  • aria-disabled (state)
  • aria-expanded (state)
  • aria-labelledby (optional property)
2 Combo Box
  • button
  • combobox
  • listbox
  • option
  • status
  • aria-activedescendant (state)
  • aria-autocomplete (property)
  • aria-controls (property)
  • aria-expanded (state)
  • aria-haspopup (property)
  • aria-label (property)
  • aria-labelledby (property)
  • aria-selected (state)
3 Dialog (Modal)
  • dialog
  • aria-describedby (property)
  • aria-label (property)
  • aria-labelledby (property)
4 Disclosure (Show/Hide)
  • button
  • region (optional)
  • aria-expanded (state)
  • aria-controls (optional property)
  • aria-labelledby (optional property)
5 Slider
  • slider
  • aria-valuemin (state)
  • aria-valuemax (state)
  • aria-valuenow (state)
6 Tab Panel
  • tab
  • tablist
  • tabpanel
  • aria-controls (property)
  • aria-labelledby (property)
  • aria-hidden (state)
  • aria-selected (state)
7 Tooltip
  • tooltip
  • aria-describedby (property)
8 Treeview
  • group
  • tree
  • treeitem
  • aria-controls (property)
  • aria-label (property)
  • aria-labelledby (property)
  • aria-owns (property)
  • aria-expanded (state)
  • aria-hidden (state)
  • aria-selected (state)