13.1 User is not aware that they interacting with tab elements (H)
FIGURE 13.1: Additional information section highlighted on The Arch accommodation page
FIGURE 13.2: Search courses tab on the Search courses page
13.1.1 WCAG 4.1.2 (A) - Desktop, Mobile
The Arch accommodation page includes ‘Prices’, ‘Facilities’ and ‘Internet’ links which function as tab elements that reveal relevant content to the user. However, as these elements are coded as links instead of tabs, screen reader users are unlikely to know that there is additional information for each link.
This issue persists on the Search courses page which include ‘Search by keyword’, ‘Browse by subject’ and the ‘A to Z of courses’ links which again function as tab elements.
13.1.2 Recommendation
Consider recoding the ‘Additional information’ section links to tab elements. Each tab control could be set up as a link inside an unordered list structure and use the aria role='tablist' attribute.
When the user navigates to the tab element, they should be aware of the following:
- they are interacting with a tab element
- inform the user if it is selected
- inform the number of tab panels in the tab list