Aria-label should only be applied to semantic elements

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] 1

[Recommendation] Multiple solutions are possible. It is possible to use offiscreen text in replacement of the aria label such as 1 Current Page

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

sul-dlss / exhibits