a11y: Multiple pagination navs must have unique names
Closed this issue · 1 comments
Description:
There are two pagination nav regions on the search results page (one at the top and bottom of the list of results). They are both named "pager" via aria-label. When multiple regions of the same type are present on the page, they must be named uniquely.
Screenshots:
WCAG SC
- Success Criterion 1.3.1 Info and Relationships (Level A): Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.
- Success Criterion 2.4.1 Bypass Blocks (Level A): A mechanism is available to bypass blocks of content that are repeated on multiple Web pages.
Additional Guidance:
- W3C: Using ARIA landmarks to identify regions of a page
- W3C: Labeling Regions (web accessibility tutorials)
Recommended Fix:
Update the aria-label for each instance of the pagination nav to be unique and clear for non-sighted users. Suggested names for each are:
- For top pagination
nav:<nav class="pagination" aria-label="pagination of results, top"> - For bottom pagination
nav:<nav class="pagination" aria-label="pagination of results, bottom">
Actually, I just found this advice from the W3C, so in this instance, the duplicated labels for these nav elements are OK as-is.
On the W3C ARIA-Practices page, the guidance here is:
If a specific landmark role is used more than once on a page, provide each instance of that landmark with a unique label. There is one rare circumstance where providing the same label to multiple instances of a landmark can be beneficial: the content and purpose of each instance is identical. For example, a large search results table has two sets of identical pagination controls -- one above and one below the table, so each set is in a navigation region labelled Search Results. In this case, adding extra information to the label that distinguishes the two instances may be more distracting than helpful.