15.1 Content within the accordion is not announced (H)
FIGURE 15.1: Accordions within the ‘Details’ tab on the Undergraduate- accounting and finance page
FIGURE 15.2: Accordions within the ‘Entry requirements’ tab on the Undergraduate- accounting and finance page
FIGURE 15.3: Timetables page
15.1.1 WCAG 2.1.1 (A), 4.1.2 (A) - Desktop
When the user navigates to each of the accordion elements within the ‘Details’ tab on the Undergraduate page and expands the element, nothing is announced by the screen reader.
When the user tabs to each element, they would expect the screen reader to announce the text on the label, the role (accordion element) and its state (expanded or collapsed). Using standard keyboard controls they would expect to interact with the element that has focus.
15.1.2 Code Snippet
<div class="ui-accordion-content ui-corner-bottom ui-helper-reset ui-widget-content ui-accordion-content-active" style="" id="ui-id-5" aria-labelledby="ui-id-4" role="tabpanel" aria-hidden="false">
<p>The aim of the module is to provide you with a sound foundation in basic bookkeeping and accounting techniques. </p>
</div>15.1.3 Recommendation
Ensure that when focus lands on accordion elements:
- screen readers announce the text on the label
- the role (accordion element) is communicated to screen reader users
- it’s state (expanded or collapsed) is communicated to screen reader users
- Users can toggle the accordion element using standard keyboard gestures
Each button should have an aria-expanded attribute on it that is toggled between true and false. If aria-expanded='true', the content associated with it is shown, and if ’false' the content is hidden. (All buttons have aria-expanded='false' to start).