Run through Accessibility checklist

[Jkrzy]

Let's run through the 18F accessibility checklist

We'll make new issues for identified problems to track their remediation.

---

This checklist helps developers identify potential accessibility issues affecting their websites or applications. It's broken down into three sections of decreasing importance: A, B and C. Please check and address these issues in the order in which they appear.

For more detail on accessibility standards, please see WCAG2.0 AA

• A - Critical issues that will cause serious problems and/or stop most users of assistive technology from using the site
• B - Issues that may cause problems or increased frustration for certain users
• C - Minor issues that will cause problems or frustration for a small number of users

It is important to note, while B and C are noted as less critical, they are still required to be truly 508 compliant. This checklist should be used as a reference for development and is not a substitute for compliance checks by a section 508 coordinator.

A - Critical

• [x] Site is keyboard accessible
  • All interactions can be accessed with a keyboard
• [x] Site is free of keyboard traps
  • The keyboard focus is never trapped in a loop
• [x] All form inputs have explicit labels
• [x] All relevant images use an img tag
• [x] All images have alt attributes
• [x] Multimedia is tagged
  • All multimedia has appropriate captioning and audio description
• [x] Text has sufficient color contrast DONE: #187
  • All text has a contrast ratio of 4.5:1 with the background

B - Less Critical

• [ ] Site never loses focus TODO: #186
  • Focus is always visible when moving through the page with the keyboard
• [x] Tab order is logical
• [x] Form instructions are associated with inputs
• [x] Site doesn't timeout unexpectedly
  • Identify elements that may "timeout" and verify that the user can request more time
• [x] Tables are coded properly
  • Tables have proper headers and column attributes
• [x] Headings are nested properly DONE: #190
  • Heading elements are nested in a logical way

C - Minor

• [x] Frames are named DONE: #186
  • All frames have a name element
• [x] Flashing elements are compliant
  • Elements that flash on screen do so at a rate of less than 3 Hz
• [x] Language is set
  • The language for the page is set
  • The language for sections on the page that differ from the site language are set
• [ ] CSS is not required to use the page TODO: #191
  • The page makes sense with or without CSS
• [x] Links are unique and contextual DONE: #192
  • All links can be understood taken alone, i.e 'Read more - about 508'
• [x] Page titles are descriptive DONE: #185
• [x] Required plugins are linked on the page

[Jkrzy]

Ran through https://accessibility.18f.gov/keyboard/ and was able to successfully navigate to all areas and functionality of the site.

[Jkrzy]

We have limited use of tags on the site, all of which have associated alt attributes. We have no multimedia.

The SAMHSA logo SVG does not have a title attribute, may need to add one.

[Jkrzy]

We have no tables, flashing elements, or timeouts.

[Jkrzy]

lang is set in index.html

[Jkrzy]

We're using a single page title across all views rendered by React. We should remediate and provide unique and descriptive titles for each page. https://accessibility.18f.gov/page-titles/

TODO: #185

[Jkrzy]

The iframe in which google maps is rendered on the /results page does not have a title attribute. Can this be resolved on our end? https://accessibility.18f.gov/iframes/. The is also selectable via keyboard navigation but focus is hidden when selected.

[Jkrzy]

A few text color/contrast issues: https://accessibility.18f.gov/color/

Grey text on white background is 4:1 contrast ratio. Results page information is 1.5:1

[Jkrzy]

Users should be able to tab once to select and move-past button links.

Most of the elements on the site are wrapped by components. This renders as <a><button></button></a> which requires tabbing through both the anchor and the button element.

[Jkrzy]

Check and remediate headings for each page.

The landing page has no <h1> and the footer has an out-of-order <h3> tag.

https://accessibility.18f.gov/headings/

[Jkrzy]

Improve site functionality when no CSS is present

When no CSS is present, keyboard navigation is broken. More than a few anchor tags are unreachable throughout the site and facility cards are unreachable on the results list page.

[Jkrzy]

For links which are not plainly and clearly described by their text, we should provide title or ARIA attributes.

The destination/functionality of links such as those on the site logo and content icons is unclear without the surrounding visual context.

https://accessibility.18f.gov/links/

[Jkrzy]

Superseded by new visual design work and accessibility assessments