Accessibility tests and improvements

[geealbers]

The basic web accessibility principals Quire is built on, have been documented in the guide. These items are the known issues or open questions that need addressing to bring us up to speed.

• Links must be styled with a visual indicator besides color alone. This is particularly true in running text. Inn menus and navigational elements, however, where everything is a link, I don't think we need the additional indicator.
• Related to the above, all links (in nav elements and in running text) must have a very visible :focus style to aid in keyboard navigation. Some browsers add this by default, but I don't believe all do equally.
• Foreground and background colors must have a WCAG AA compliant contrast ratio (at the minimum). 4.5:1 for normal text and 3:1 for large text.
• The accessibility (screen reader and keyboard) of the citation pop-ups and the search interface needs to be tested, and improved as necessary.
• When JavaScript is turned off or unavailable, the menu icon should be a link (<a>) element that links to an anchor id on the menu (which appears at the bottom of the page). When JS is available, the icon should be a <button> and function as it does currently.
• Similarly to the above, without JS, the search icon should not be a <button> (I don't think), but should offer an indication that the search function is unavailable. Perhaps on :focus a hover tip appears and is read aloud that says something like: "JavaScript is required for search, but it is currently disabled or not supported in this browser"

[naeluh]

I found this might be a helpful tool https://hexnaw.com/ for color selection

[geealbers]

Cool tool @naeluh. Reminds me that I should also add here our accessibility principles (some of which are duplicated in the list above) that also includes some links to other guidelines we've found useful: https://github.com/gettypubs/quire/blob/master/content/resources/accessibility.md.

Also, an as-yet-unpublished February 2017 blog post by our former graduate intern @ngeller, who really led the charge for us on accessibility: “Web Accessibility Testing at Getty Publications”