Accessibility guidelines

Vanilla aims to be as inclusive as possible.

While traditionally accessibility focuses on making the web more accessible for users with permanent disabilities, a focus on accessibility can deliver an improved user experience for everyone, including those with a temporary or circumstantial disability.

Accessibility should permeate the entire design and development process, rather than being something that you only think about after everything else has been defined and implemented. You should focus on accessibility when you are:

  • Writing your content (whether that’s words, images, videos or any other media format)
  • Designing and building your components

While the accessibility of some of the existing Vanilla design patterns is still being improved, all new and updated patterns should meet WCAG 2.0level AA.

Accessibility testing

Ideally, prototypes should be tested with real users with real accessibility issues, but that is not always possible.

If you are not able to test design patterns with real users, have a look at Anne Gibson’s "Accessibility Alphabet" to consider a few real-world scenarios that might hamper a user’s accessibility. Can you improve these users’ access to content and features?

Use the following checklist to make sure your design patterns are designed and built to be accessible*:

  • 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
  • Help users understand inputs, and help them avoid and correct mistakes
  • Write good alt text for your images
  • If an experience cannot be made accessible, create another route for users to get that information
  • Be as consistent and clear as possible in layout and copy
  • Use the correct HTML element for your content
  • Use the correct lang attribute on the html element
  • Support keyboard navigation
  • Understand and use HTML landmarks
  • Use ARIA attributes when applicable
  • Give users a way to skip top level navigation to access main content
  • Make links descriptive
  • Avoid images and iconography in pseudo-elements
  • Make SVGs accessible to assistive technology
  • Hide decorative elements from screen readers
  • Links should be visually identifiable and have clear :focus and :active states
  • HTML document should have a language attribute
  • Users should be able to navigate content using a screen reader
  • The general architecture and hierarchy of the content should make sense
  • Charts and images should all have alt-text so that users with screen readers or users on a slow connection will still be able to understand the images
*Adapted from Accessibility Guidelines checklist and Web Accessibility Checklist

Key WCAG documents

The amount of different documents that revolve around the WCAG 2.0 guidelines can be disorienting. These are the official W3C documents, in order of relevance, that we think you should refer to when learning about and implementing accessibility:

Useful tools

The web is abundant in tools that help to create and test for accessible sites. These are a few of the ones we consider the best and most useful ones:

If you think we could improve Vanilla’s accessibility in any way, let us know by filing an issue on GitHub.