Accessibility in Blazor Accordion Component
23 Aug 20213 minutes to read
The Accordion component has been designed keeping in mind the WAI-ARIA specifications, by applying the prompt WAI-ARIA roles, states and properties along with the keyboard support. Thus, making it usable for people who use assistive WAI-ARIA Accessibility supports that is achieved through the attributes like
aria-hidden. It helps to provides information about the elements in a document for assistive technology. The component implements the keyboard navigation support by following the WAI-ARIA practices and tested in major screen readers.
Presentation: It indicates that the element is used to control presentation. This attribute is added to the Accordion element describing the actual role of the element.
Heading: It identifies the element as a heading that serves as an Accordion header. This attribute is added to all the Accordion header elements describing the actual role of the element.
|aria-multiselectable||It indicates the expand mode in the Accordion. Default value of this attribute is true. If expand mode value is changed as ‘single’, the attribute value changes to
|aria-disabled||It indicates the disabled state of the Accordion and its items.|
|aria-expanded||It indicates the expand state of the Accordion Item. Default value of this attribute is
|aria-selected||It indicates the Selection state of the Accordion Item. Default value of this attribute is
|aria-hidden||It indicates the content visible state of the Accordion Item. Default value of this attribute is
|aria-labelledby||Attribute is set to content (panel) and it points to the corresponding Accordion header.|
|aria-controls||Attribute is set to the header and it points to the corresponding Accordion content.|
|aria-level||It defines the hierarchical level of an Accordion element with its inner level.|
Keyboard navigation is enabled by default. The possible keys are:
|Space or Enter||When the focus is on the Accordion header, clicking on the focused element makes the element to expand and collapse.|
|Down Arrow||Focus the next Accordion header.|
|Up Arrow||Focus the previous Accordion header.|
|Home||Focus the first Accordion header.|
|End||Focus the last Accordion header.|