3.3 Inconsistent identification of accordion elements (M)

FIGURE 3.3: Down arrows highlighted on generic page

3.3.1 WCAG 3.2.3 (AA), 3.2.4 (AA) - Desktop, Mobile, iPad

The ‘Generic’ page includes a side menu that contains elements with a down arrow which visually suggests to the user that they are interacting with an accordion. However, when the user selects one of these elements, a new page loads and the element they selected expands to show more menu items related to that particular faculty. Therefore, these navigation elements act as links that take the user to a new page.

In contrast, on the homepage there are elements with a down arrow that function as accordion elements. See State of accordion elements are not announced to screen reader users (H) This inconsistent identification of accordion elements is likely to cause confusion for users.

Web users, especially users with disabilities, depend on web pages being predictable. If identification of elements is consistent from page to page within a website, this makes it much easier for screen reader users, screen magnification users, and others to find particular items within the navigation.

This issue persists with accordions that function as links on the ‘Content’ and ‘Research’ page.

3.3.2 Recommendation

It is important that elements such as accordions that have the same functionality within a set of web pages are identified consistently. Ensure that a consistent design and structure for elements is implemented site-wide so users are clearly able to identify and distinguish accordion elements from link elements.

---