search

sul-dlss / exhibits

Stanford University Libraries online exhibits showcase
https://exhibits.stanford.edu
Other
20 stars 7 forks source link

Native semantic HTML elements should not have redundant ARIA roles #2501

Open alundgard opened 3 months ago

alundgard commented 3 months ago

Current behavior

Native semantic HTML elements currently have redundant ARIA roles. For example, the <nav> element has role="navigation, the <footer> element has role="contentinfo", and so on.

Steps to reproduce

Example page: Spotlight Accessibility for SODA.

Possible solution

WCAG Level A: See First rule of ARIA use.

If you can use a native HTML element or attribute with the semantics and behaviour you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so.

Reported by SODA

Violation: Avoid inappropriate use of ARIA roles, states, and properties Severity: Minor

[Issue] There are elements on the page that have assigned roles but already have implicit ARIA roles. These are redundant and should be removed.

  • The navigation role is unnecessary for element nav.
  • The form role is unnecessary for element form.
  • The banner role is unnecessary for element header.
  • The main role is unnecessary for element main.
  • The contentinfo role is unnecessary for element footer.

[User Impact] When ARIA attributes (state, roles, and properties) are inappropriately used, assistive technology may not correctly function as expected.

[Code Reference]

<nav id="skip-link" role="navigation" aria-label="Skip links">
<footer role="contentinfo">

[Recommendation] Remove the role="navigation" from the nav element, and the role="contentinfo" from the footer element. Be sure and also remove any other redundant roles from other pages.

More information can be found about implicit ARIA roles here: https://a11yproject.com/posts/aria-landmark-roles/

[Compliant Code Reference]

<nav id="skip-link" aria-label="Skip links">
<footer>
jcoyne commented 3 months ago

The skip links is a blacklight issue: https://github.com/projectblacklight/blacklight/blob/abf6f24bb8e53354dc91db8520f029bee68c4a4c/app/views/layouts/blacklight/base.html.erb#L31

I believe the footer is fixed if we use the component library footer. (which would require Bootstrap 5).