Accessibility Standards

We strive to comply with WCAG 2.0 AA guidelines. UW Theme uses the same accessibility solutions as the UW Style project:

  • use of HTML5 landmarks and semantic heading structure
  • text and link color contrast adheres to WCAG ratio standards
  • supports keyboard-only navigation (including a skip content link)
  • use of ARIA attributes for the main menus
  • ARIA and markup enhancements to SlickJS, the slider library used in the theme
  • selective use of aria-hidden throughout page elements to eliminate redundant noise for screen-reader users

Testing

  • W3C HTML validation
  • Keyboard-only navigation
  • AMP automated accessibility tests
  • Review theme with assistive technology (ChromeVox, VoiceOver, NVDA)

Decision points

  • No title attribute on embedded content element iframe: AMP report indicates that all frames must have a title, which caused the embedded content element (iframe) to be marked in violation. However, this WebAIM article indicates that iframes do not require a title, so we are opting to follow the WebAIM advice and keep the iframe elements as-is.

Known issues/challenges

  • Tabbed content – There is a lack of consensus among accessibility engineers about the best way to implement tabbed content. We use Foundation 6’s tabbed content implementation. This implementation breaks with specs about how to implement keyboard navigation between tabs (allowing tab focus to switch via the tab key in addition to arrow keys). Because many users expect this behavior, we think this is a good decision. Less clear though is whether focus should shift to the tab content after a tab is activated. There are arguments for and against doing so. Foundation 6 does not change focus in this case. This can be obstacle for screen-reader users.
  • Carousel content – as with all web carousel content, creating a really usable screen-reader experience is challenging. We use SlickJS for our carousels, which we feel takes accessibility as or more seriously than other libraries we have reviewed. We currently maintain a copy of the library code in our project because we have added unreleased code commits that address some of the accessibility shortcomings we are aware of. We will continue to monitor the SlickJS project and make updates to our integration as needed.
  • Image gallery – We currently use the Magnific Popup library to support viewing galleries in a lightbox style. While we have made some accessibility enhancements to our implementation, we recognize improvements are still needed.