Improve on WCAG "Perceivable" category - a11y audit

[xmedr]

Go through the following criteria for WCAG's Perceivable section and improve their issues to meet WCAG requirements:

Level A

• 1.1.1 Non-text Content:

  • Let's get alt tags onto the thumbnails of the board members listing page table. The committee pages have listing tables and those have alt tags
  • Figure out an accessible alternative to the maps on person detail pages. I've tried adding an alt tag to the map div directly, but VoiceOver didn't read it. Maybe using a caption underneath?
  • The Metro logo in the nav needs an empty alt tag
  • The DataMade logo on the About Us page needs an alt
  • Many icons have an aria-hidden attribute for screen readers, but double check that all of them are taken care of, or given a label if screen readers do need to see them.

• 1.3.1 Info and Relationships:

  • Various "Show More/Less" buttons can use the vocabulary of the thing they’re manipulating to make it clearer. Some people navigate using a list of all buttons or links on a page or view, so they might not encounter the surrounding context.
  • Maybe under the board members listing page, the list of links of meetings that just say “Regular Board Meeting” can also include the date in the link?
  • Change search results to use ul tags. Here's a relevant SO answer
  • The a tags that are being used by the board members listing page and the search tooltip don't have an href attribute. We can just put #. Also check the rest of the a tags on the site.

• 1.3.3 Sensory Characteristics:

  • Instructions use positional words like “below”. Positions can’t easily be determined by screen readers, so we can try using different language there.

• 1.4.1 Use of Color:

  • We have a lot of links that are identified solely by color, we should consider making them distinct if, say, the user saw the page in grayscale. Changing the lightness of the links or marking them with underlines would be potential solutions. Though I'm not sure if having every one of those be underlined would look great.

Level AA

• 1.4.3 Contrast (Minimum) (This section might be a fix as you go situation, but here's some places to start):

  • Text color for links don't have enough contrast, including the ones in the index hero section
  • Same for text color for search facet numbers
  • Same for the background color of primary buttons, including the ones in the index hero section
  • The facet section headers in the search results page also fail, but those can be bumped up to 14pt to make them pass
  • Regular text font also doesn't pass. All regular gray fonts can be changed from #777777 to #6B6B6B and be okay when they're against other gray or white bg’s

• 1.4.11 Non-text Contrast:

  • UI/button contrast issues are described in 1.4.3

• 1.4.13 Content on Hover or Focus:

  • Text in the tooltip on the home search bar cannot be hovered over because moving away from the icon despawns it. The map tooltip persists, so maybe take some cues from that?

Connected to #1012