Jump to main content

Accessibility guidelines

Vanilla Framework aims for Level AA conformance with the
Web Content Accessibility Guidelines (WCAG) 2.1

Ensuring conformance

We use the following tools to continually audit the framework:

Accessibility report tool

A checklist that can be filtered by A / AA / AAA level, with a short description and links to the related "Understanding" and "How to Meet" articles that accompany each criterion.

WAI-ARIA Authoring Practices 1.1

WAI-ARIA A guide for understanding how to use WAI-ARIA 1.1 to create an accessible Rich Internet Application. It provides guidance on the appropriate application of WAI-ARIA, describes recommended WAI-ARIA usage patterns, and explains concepts behind them.

The W3 Markup Validation Service

Curated criteria checklist

The scope of the WCAG spec can be overwhelming. We find the following checklist a good starting point if you're new to accessibility:

  • Make sure there is enough contrast between text and its background color
  • Don't indicate important information using colour alone
  • Design focus states to help users navigate and understand where they are
  • Links should be visually identifiable and have clearly distinct states
  • Be as consistent and clear as possible in layout and copy
  • The general architecture and hierarchy of the content should make sense
  • Help users understand inputs, and help them avoid and correct mistakes
  • Write good alt text for your images
  • Make links descriptive
  • Users should be able to navigate content using a screen reader
  • If an experience cannot be made accessible, create another route for users to get that information
  • Use the correct HTML element for your content
  • Support keyboard navigation
  • Understand and use region landmarks
  • Unless all your content is inside region markups, give users a way to skip top level navigation to access main content
  • Use ARIA roles, properties and states when applicable
  • Avoid images and iconography in pseudo-elements
  • Hide decorative elements from screen readers
  • Make SVGs accessible to assistive technology
  • HTML document should have a language attribute

*Adapted from Accessibility Guidelines checklist and Web Accessibility Checklist

Key WCAG documents

The volume of information on the WCAG 2.0 website can be disorienting.
We keep the following links handy for quick reference:

  • WCAG 2.0: the W3C standard, includes principles, guidelines and success criteria
  • Understanding WCAG 2.0: detailed reference, includes intent, benefits to people with disabilities, examples, resources and techniques
  • How to Meet WCAG 2.0: a customisable quick reference, includes guidelines, success criteria and techniques
  • Techniques for WCAG 2.0: instructions for developers, includes browser and assistive technology support notes, examples, code, resources and test procedures

Useful tools

The web is abundant in tools that help to create and test for accessible sites. We find the following particularly useful:

Noticed an issue?

If you spot an accessibility problem in Vanilla, let us know
by filing an issue on GitHub.