Aria-label should only be applied to semantic elements

[alundgard]

Current behavior

aria-label is applied to non-semantic HTML elements (span, div) without an appropriate role 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

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.

Example A page:

[Code Reference]
<span aria-current="true" aria-label="Current Page, Page 1" class="page-link">1</span>

[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>

It is also possible to use an anchor () that links to the same page and use the aria-label on that instead.

Other options are possible.

Example B page:

[Code Reference]

<li class="page-item active">
        <span class="page-link" aria-label="Current Page, Page 1" aria-current="true">1</span>
</li>

[Recommendation]
There are multiple possible solutions. One of the simpliest may be to add an aria-label on the that indicates the state, such as

<a aria-label="Gallery: Currently Selected">
Another solution is to use aria-current.

<a aria-current="true">

[jcoyne]

This is from Blacklight: https://github.com/projectblacklight/blacklight/blob/abf6f24bb8e53354dc91db8520f029bee68c4a4c/config/locales/blacklight.en.yml#L11