Theme accessibility#

The theme strives to be meet WCAG 2.1 at Level AA. You are encouraged to read through the quick reference and try to meet the Level A and AA criteria (and AAA if you’re being ambitious!) which are relevant for the change you’re making.

Some a11y helpers and features provided by the theme:

  • .hide-text helper class - hides text while making it readable for screen readers
  • .visually-hidden helper class - hides element while making it readable for screen readers, but element will become visible when focussed or active (e.g. for ‘Skip to main content` button)
  • all clickable elements (e.g. buttons, icon links) are minimum 48px x 48px
  • semantic colors in abstracts/_colors.scss meet color contrast requirements
  • provides various skip navigation links
  • header.html contains JS for header, nav menu & search menu a11y:
    • adding keyboard controls for nav disclosure menu
    • adding aria-expanded properties on toggle
    • trap-focus button for focus management for role="dialog"
  • see partials/nav-menu.html for examples of applying aria properties

a11y testing#

You can also run automated a11y tests using Lighthouse in Chrome DevTools, as a Chrome extension, or on the command line.

Automated a11y tests are currently set up to run as part of the build pipeline for key sites that use Jekyll ANU theme, and the results logged to the Accessibility Metrics page of this docs site.

arrow-left bars search times