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:

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.