Accordion
This page contains the inaccessible version of the component including the description of issues, additional considerations, and also the more accessible version of the component for comparison.
Inaccessible Version
Issues
Expand each issue to see the user impact.
Accordion headers are not accessible by keyboard.
Keyboard users cannot access the content by tabbing in the accordion because the accordion headers are not focusable.
The accordion is not operational by function keys.
Keyboard users should be able to use several function keys for easier navigation between accordion items: Arrow Up, Arrow Down, Home, and End.
The keyboard event for interacting with the component is missing.
There is only the mouseDown event implemented, which works for mouse users, but
does not work for keyboard users, therefore there is no way for them how to open the
accordion item by either Space or Enter keys.
Contents of accordion items are hidden visually but still discoverable.
When the accordion item is closed, its content should not be visible but also not operable - for example, keyboard users should not be able to tab into interactive elements inside, and screen reader users should not be able to read the content unless the panel is open.
The usage of the header element is invalid in this case.
header element is invalid in this case.The header should only be used inside other sectioning elements, such as article and section, to be scoped. Although there is an article element on this very page outside the component's wrapper, it is not a part of the component. If there would not be a banner landmark (the top-level <header> element) on the page, then the accordion header would be treated as such, confusing users of assistive technologies.
Read more about the banner landmark.
Read more about sectioning elements.
The accordion has missing aria attributes.
Although this does not work for all screen readers, it is a good practice to create a
relationship between the accordion header and content via
aria-controls
and id attributes to identify which element or elements the widget
controls.
The usage of aria-selected="true" on the header element is invalid.
aria-selected="true" on the header element is invalid.The aria-selected="true" is only valid for gridcell,
option, row, and tab roles.
Read more about aria-selected
.
Font size is set in pixels.
When font size is not set in relative units, such as rem or em,
then increasing or decreasing font size settings in the browser will not have any effect.
This is important for users who adjust their font size to their preferences.
The accordion has a fixed width.
In this case, it is causing overflow issues with a horizontal scrollbar on mobile devices since the accordion is not responsive. Avoid horizontal scrollbars as it negatively affects user experience.
The accordion content has a fixed height.
This is an anti-pattern as the content text can overflow and be invisible to users.
An order of the accordion header and accordion content is switched via the CSS
order property.
order property.This is confusing for sighted keyboard users in general because the visual order does not follow the logical order and when tabbing through the page (considering the accordion would be focusable), they could confusingly jump around the layout.
The arrow SVG icon is invisible in the dark version of a high contrast mode.
While it is not a critical issue in this case, users with the high-contrast mode turned on might not realize there is an accordion on the page because they cannot see the icon.
The mouse pointer cursor is over the whole accordion item (including content), but the
actual clickable area is much smaller.
Again not a critical issue, however, users expect to see the pointer cursor to perform an action and when they click into an empty space, it does not do anything.
Considerations
The usage of certain techniques depends on the circumstances. Expand each consideration to learn more.
Consider the usage of a list.
When there are many accordion items, it is useful for screen reader users to know how many of
them there are. When using ul/ol and li elements,
this is announced automatically.
Consider the usage of headings.
Headings might be used for accordion items titles when it would make sense for these sections to be a part of the document structure.
Consider the usage of landmark regions.
If the content sections inside accordion items are important subsections of a page, and
users of assistive technologies should be able to navigate there directly anywhere from the page, use the
landmark role (explicit or implicit) together with the
aria-labelledby attribute.