Design system
Accessibility
Our policy
We strive for WCAG 2.1 AA conformance. You can learn more about WCAG 2.1 on the W3C's website. Each category contains rules, which are divided into three tiers: A, AA, and AAA.
Official guidelines
Rules published by the W3C which indicate how to best conform to accessibility standards.
Standards we reference frequently include HTML5, WCAG 2.1 and ARIA 1.1.
HTML 5
- HTML 5
<article>Represents a complete or self-contained composition in a web page - HTML 5
<aside>Identifies regions that support the main content, yet are separate and meaningful sections on their own - HTML 5
<header>A region at the top of every page that contains site-wide information, such as the website logo, search function, and navigation options - HTML 5
<nav>Identifies a navigation menu
WCAG 2.1
- WCAG 2.1Ensure that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text
- WCAG 2.1Use user interface components that are highlighted by the user agent when they receive focus
- WCAG 2.1Ensure keyboard control for all functionality
- WCAG 2.1
- Provide descriptive labels
- Use label elements to associate text labels with form controls
- WCAG 2.1Provide a Table of Contents
- WCAG 2.1Provide short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content
- WCAG 2.1Ensure that touch targets are at least 44 by 44 CSS pixels
- WCAG 2.1Setting all of the following and by changing no other style property:
- line height (line spacing) to at least 1.5 times the font size
- spacing following paragraphs to at least 2 times the font size
- letter spacing (tracking) to at least 0.12 times the font size
- word spacing to at least 0.16 times the font size
- WCAG 2.1Ensure that information conveyed by color differences is also available in text
- WCAG 2.1Provide link text that describes the purpose of a link
- WCAG 2.1Align text on only one side
- WCAG 2.1Ensure that additional visual cues are available when text color differences are used to convey information
- WCAG 2.1Do not interfere with the user agent's reflow of text as the viewing window is narrowed
- WCAG 2.1Include a text cue for colored form control labels
ARIA 1.1
- ARIA 1.1
role=alertA region that contains mostly site-oriented content, rather than page-specific content - ARIA 1.1
role=bannerA region that contains mostly site-oriented content, rather than page-specific content - ARIA 1.1
role=buttonAn input that allows for user-triggered actions when clicked or pressed - ARIA 1.1
role=dialogA dialog is a descendant window of the primary window of a web application - ARIA 1.1
aria-labelUsearia-labeloraria-labelledbyto name regions and landmarks - ARIA 1.1
role=listA section containinglistitemelements - ARIA 1.1
role=listitemA single item in alist - ARIA 1.1
role=menuA type of widget that offers a list of choices to the user - ARIA 1.1
role=menuitemAn option in a set of choices contained by amenuormenubar - ARIA 1.1
role=statusA type of live region whose content is advisory information for the user but is not important enough to justify analert, often but not necessarily presented as astatus bar - ARIA 1.1
role=switchA type of checkbox that represents on/off values, as opposed to checked/unchecked values - ARIA 1.1
role=tooltipA contextual popup that displays a description for an element