react-accessible-accordion
react-accessible-accordion copied to clipboard
Use native HTML elements where possible
Currently the entire accordion is made of divs with various ARIA attributes used to replicate the functionality of native HTML
This fails the first rule of ARIA use: native html elements should be used whenever possible rather than recreating their functionality with aria attributes: https://www.w3.org/TR/using-aria/#firstrule
- <h?> should be used instead of 'role="heading"' and 'aria-level="?"'
I'm not certain that the ARIA rules are true requirements? They might just be guidelines? Still it would be best to follow them whenever possible.
@CalinDale I believe this was done to avoid undoing native styling, however this decision was done before my time on RAA
Perhaps we should assess whether we can switch to native HTML without affecting styling. We do seem to have all the correct interactions and functions of these roles implemented, so they may not impact user experience, but are still bad practice according to ARIA.
@CalinDale to use native elements we would affect the styling (the CSS needed) in order to undo native styles, but that's all quite doable and I'm happy to go ahead with that.
Would you like to dev it? We could migrate component-by-component.
First step might be to describe the current markup, and your recommended markup.
Current markup:
<div data-accordion-component="Accordion" class="accordion">
<div
data-accordion-component="AccordionItem"
class="accordion__item"
>
<div
data-accordion-component="AccordionItemHeading"
aria-level="4"
role="heading"
class="accordion__heading"
>
<div
class="accordion__button"
aria-disabled="false"
aria-expanded="false"
aria-controls="accordion__panel-raa-1"
role="button"
tabindex="0"
data-accordion-component="AccordionItemButton"
>
ITEM NAME
</div>
</div>
<div
data-accordion-component="AccordionItemPanel"
class="accordion__panel"
id="accordion__panel-raa-1"
hidden=""
></div>
</div>
</div>
Suggested markup:
<div data-accordion-component="Accordion" class="accordion">
<div
data-accordion-component="AccordionItem"
class="accordion__item"
>
<h4
data-accordion-component="AccordionItemHeading"
class="accordion__heading"
>
<button
class="accordion__button"
aria-disabled="false"
aria-expanded="false"
aria-controls="accordion__panel-raa-1"
type="button"
data-accordion-component="AccordionItemButton"
>
ITEM NAME
</button>
</h4>
<div
data-accordion-component="AccordionItemPanel"
class="accordion__panel"
id="accordion__panel-raa-1"
hidden=""
></div>
</div>
</div>
(The <h4>
would change to a different <h_>
element depending on which level was set on the AccordionItemHeading
component.)