Accordion Accessibility

Accesibility Attributes

Web accessibility makes web content and web applications more accessible to disabled people. It's especially helpful in dynamic content changes and development of advanced user interface components with HTML, Javascript and related technologies. Smart HTML elements framework offers full accessibility support for it's web components.

Accordion provides a built-in compliance with WAI-ARIA specification. This is achieved through attributes like role, aria-label, aria-selected, aria-hidden and others. They are applied to the corresponding elements inside the template of the components.

The purpose of the ARIA attributes is to help disabled people by providing the information specific to the component to assistive technology in the screen readers.

The Accordion element contains expandable/collapsible items with role 'heading' and 'aria-expanded' indicating which item is expanded.

  • aria-disabled - indicates that an element's interaction is disabled. In practise, it is used to indicate that an Accordion item cannot be collapsed/expanded.
  • aria-level - indicates the nesting level of an element of a heading. In practise, it is used to indicate the nesting level of the Accordion items. By default all items are at level 1.
  • aria-hidden - indicates that the element does not take part in the interaction with the Accordion and will not be mapped to the accessibility API.
  • aria-controls - indicates that the contents of the element are controlled by it. In practise, it's used to indicate that the label of the Accordion items control the visibility of their content.
  • aria-expanded - indicates that an element is exapnded. In practise, it is used to indicate that an Accordion item is expanded and it's content is visible.

Keyboard Interaction

Smart Elements provide keyboard interaction for most of the components. This functionality is enabled when an element is not disabled.

The following keyboard shortcuts are available to interact with the Accordion:

Key Action
Arrow Up Focuses the previous item
Arrow Down Focuses the next item
Arrow Left Collapses the focused item if possible. Depends on the expandMode
Arrow Right Expands the focused item if possible. Depends on the expandMode
Home Focused the first item
End Focuses the last item
Enter Expands/Collapses the focused item
Space Expands/Collapses the focused item

Additional information on WAI-ARIA for the SMART Framework can be found here.