Repository navigation
USWDS - Bug: Accessibility - Multiple unnamed banner landmarks #2226
Description
Describe the bug
Both the Banner and Header components contain <header> elements, which show up in the rotor as banner landmark. It might not be clear to users with screen readers the difference between the two banner regions.
Steps to reproduce the bug
- Got to the USWDS homepage
- Turn of VoiceOver
- Pull up the rotor menu (VO+U)
- Use the arrow keys to pull up the Landmarks
- Notice two unnamed banners.
Expected Behavior
One or or both of the components container a banner region should have an accessible name.
Related code
No response
Screenshots
System setup
- Current USWDS
- MacOS
- VoiceOver
Additional context
Some additional can be found in Scott O'Hara's article on landmarks.
Since there is no native “banner element” in HTML, modern browsers are meant to treat the
<header>, that is the nearest direct child of the<body>element, as a banner landmark. While there can be multiple<header>elements used within a web document, ideally there should only be a single banner landmark exposed. Instances where multiple banners may be desired would be if there were nested document or application roles within a single view. In such a case, it would be best to ensure each of these were given their own accessible name, as this would allow assistive technologies to jump to each nested banner and have a better idea of which “banner” they had navigated to.
Code of Conduct
- I agree to follow this project's Code of Conduct.
- I checked the current issues for duplicate bug reports.
Activity
mejiaj commentedon Aug 3, 2023
Thanks for reporting this issue! This seems specific to the site documentation because:
role="banner".role="banner"- header accessibility guidance.The role was removed in uswds/uswds#3104 as part of release 2.2.0.
jaredcunha commentedon Aug 3, 2023
@mejiaj Ah yeah, probably could could have clarified. Yes, the
roleattributes are not necessary since that's inherit in the<header>element.What I was going to suggest was something like this for
Bannercomponent:Change to:
This way, the landmark in the rotor appears as "U.S. Government banner" instead of "banner." Then perhaps some equivalent for the main site header, like the name of the website. This way it's easier to distinguish between the two elements. Updating the component code snippets to include the
aria-labelcould help.Here's a couple screenshots of other sites I've noticed with multiple banners that are not named.
amyleadem commentedon Aug 3, 2023
Thanks for flagging this @jaredcunha . I was able to confirm that the site has two generic banner landmarks in VoiceOver as shown in the issue writeup.
Possible next steps
We should review our uswds-site code to confirm that it is up-to-date and provides a helpful screen reader experience:
aria-label(or equivalent) to the<header>elements in banner and header.Remove guidance about addingrole="banner"from the header component pagearia-label="Agency identifier,,,,,"). (In VoiceOver, the commas cause the name to be repeated several times)Additionally, if we pursue adding an
aria-labelto the<header>elements on site, we should consider also doing the same to the components in USWDS and add guidance so this issue isn’t replicated across agency sites.mejiaj commentedon Aug 3, 2023
@jaredcunha thanks for the follow-up information. I saw that the site had older markup and perhaps was too hasty in moving it here.
@amyleadem thanks for outlining those next steps. Once we go through confirmation we should create GH issues to track them.