Native semantic HTML elements should not have redundant ARIA roles

[alundgard]

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]

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).

[corylown]

Also submitted a PR to blacklight to fix the skip link: projectblacklight/blacklight#3457