ARIA attributes for landmarks

[nicoleslaw]

Description

In Chrome, Firefox, and Safari, the rotor shows some duplicative landmarks. We could improve the experience for screen reader users with more specific ARIA attributes.

Acceptance Criteria

• Footer should have the aria attribute contentinfo along with the existing class.
• If a role is used more than once on a page like navigation, an aria-label should be used to distinguish them. For example: <div role="navigation" aria-label="Main menu"> and <div role="navigation" aria-label="Secondary menu">. Happy to chat on ideas here!

References

• Using ARIA landmarks to identify regions of a page — WCAG 2.1
• ARIA Landmark Roles link via WCUG

Chrome

Firefox