Build your web apps using Smart UI
Smart.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.