CDCgov
Fix 508 accessibility issues on the website
Problem statement
The ReportStream website is 508 compliant (i.e. we meet the baseline accessibility requirements). After running some additional automated tests as part of ticket Follow up from "SPIKE: What work (if any) needs to be done surrounding 508 Compliance #17983, we discovered additional issues can be addressed to make our site even more accessible.
What you need to know
WAVE results
1. No heading structure
Description: The page has no headings. No <h1>-<h6> elements are present in the page.
Why it matters: Headings (<h1>-<h6>) provide important document structure, outlines, and navigation functionality to assistive technology users.
What to do: Provide a clear, consistent heading structure, generally one <h1> and sub-headings as appropriate. Except for very simple pages, most web pages should have a heading structure.
2. No page regions
Description: No page regions or ARIA landmarks were found. No header, nav, main, footer, or aside HTML regions, or banner, navigation, main, or contentinfo landmark roles were present in the page. Why it matters: Regions and ARIA landmarks identify significant page areas. Most web pages should have regions defined, particularly for the main content area. What to do: If the page has visual regions or significant page areas, ensure the regions are defined with header, nav, main, footer, etc. elements.
ARC toolkit results
1. Missing ID
Description: A relationship attribute (such as <label for="...">, or an ARIA attribute such as aria-controls="...") is pointing to a non-existent id.
-
1A. Missing id “about”:
<button data-testid="navDropDownButton" class="usa-accordion__button usa-nav__link" aria-expanded="false" aria-controls="about" type="button"></button> -
1B. Missing id “getting started”:
<button data-testid="navDropDownButton" class="usa-accordion__button usa-nav__link" aria-expanded="false" aria-controls="getting started" type="button"></button>
2. Multiple header landmarks
Description: The page contains two or more ARIA role="banner" landmarks or HTML <header> elements.
Read more: 2.4.1 Bypass Blocks
- 2A.
<header class="usa-banner__header"></header> - 2B.
<header data-testid="header" class="usa-header usa-header--basic _Navbar_124fp_1443 _NavbarDefault_124fp_1598"></header> - 2C.
<header class="usa-prose"></header>
3. Missing bypass methods
Example from USWDS
Description: The page appears to be missing common methods used to bypass blocks of content, such as a "skip to main content" link.
Guidance from USWDS: Add a skip navigation link before the header. Include skip navigation links to allow those using screen readers to bypass long navigation lists. Make sure you include an id at the beginning of your main content and that it matches the skip navigation link. Find more information on skip navigation links at WebAIM.
4. Accessible text does not contain visible text
Description: The accessible name of the control (which is exposed to assistive technologies) does not contain the visible text. Read more: 2.5.3 Label in Name
<a class="usa-link" title="Home" aria-label="Home" href="/"></a>
Acceptance criteria
- [ ] WAVE issue: 1. No heading structure fixed
- [ ] WAVE issue: 2. No page regions fixed
- [ ] ARC issue: 1. Missing
IDfixed - [ ] ARC issue: 2. Multiple header landmarks fixed
- [ ] ARC issue: 3. Missing bypass methods fixed
- [ ] ARC issue: 4. Accessible text does not contain visible text
ready for refinement / backlog prioritization @chris-kuryak @davidcalabrese0324 @victor-chaparro