Example B page: Example page: Parker Library - Search Results.
Inspect the highlighted "1" in the pagination ("Previous" or "Next") navigation at the bottom of the page.
Violation: Ensure ARIA roles, states, and properties are valid
Severity: Minor
[Issue]
Some elements contain invalid ARIA attributes or values (states, roles, and properties). Aria-label is not usable on an element that has no semantic meaning (SPAN, DIV, etc.).
[User Impact]
When ARIA attributes (state, roles, and properties) are not valid according to the specification or are not used correctly, assistive technology may not function as expected.
[Recommendation]
Multiple solutions are possible. It is possible to use offiscreen text in replacement of the aria label such as <span>1<span class="sr-only"> Current Page</span></span>
Current behavior
aria-label
is applied to non-semantic HTML elements (span, div) without an appropriaterole
attribute.Steps to reproduce
Example A page: Spotlight Accessibility for SODA - San Francisco Buildings. Inspect the pagination ("Previous" and "Next" navigation) at the bottom of the page.
Example B page: Example page: Parker Library - Search Results. Inspect the highlighted "1" in the pagination ("Previous" or "Next") navigation at the bottom of the page.
Possible solution
Note: This issue is similar to #2500.
WCAG Level A: What happens when aria-label, aria-labelledby and aria-describedby are on static HTML elements?
See SODA's recommendations below.
Reported by SODA
Example A page:
Example B page: