Accessibility

The ALEX Design System is built on the principle that accessible design is good design, and therefore all of our products are compliant with the WCAG 2.0 AA Guidelines.

Before release, each product is thoroughly scrutinized to ensure that all users, regardless of their means of experiencing content, will not be excluded.

This guide isn’t a comprehensive list of all of the ways that we implement accessible design. There is a lot that goes under the hood with engineering (e.g. ARIA tags, semantic HTML structure, and screen reader testing), media production, and with the voice of ALEX. This guide serves to explain the ways that our interfaces accommodate users as inclusively as possible.

Color contrast

To have adequate color contrast, normal-sized text (defined as 18px and below) must have a contrast ratio of 4.5:1 of foreground color to background color. Large text is a little more lenient in WCAG 2.0’s AA standards, requiring 3:1. Despite this, we adhere to the 4.5:1 ratio for all text. Whether it’s large, small, label, button, inside of an input, or a link, it’s going to have a strong contrast ratio. This serves two purposes – it saves us time splitting hairs over what defines large and small text internally, and more importantly, it results in a more accessible experience for the user.

Typography

Our brand font, Museo Sans, has been selected for its readability. It comes in a useful variety of weights, and all of its weights have distinctive and readable characters, enhanced by large, clear negative spaces within the characters.

Per WCAG 2.0 AA guidelines, the base body font is set at 16px for paragraph text, and is never smaller than 12px. Line-height on body paragraphs is set at 1.6x the font size, which satisfies the requirement of being at least 1.5x. And space in between paragraphs is set to be twice the height of the text.

For more specifics on typographic spacing, sizing, and colors, check out the typography standards section.

Buttons & links

All buttons adhere to the color contrast standards and have a generously-sized clickable area. Buttons have a distinctive hover state, defined by a clearly differentiated background color. We use the browser-default outline for the focus/keyboard-only navigation state, since this approach has been vetted by each of the browsers we support, is contextually recognizable to users, and is visually cohesive with our other design standards.

While links may not have the big comfortable clickable area of buttons, they are visually distinct from normal text. We use a thick yellow underline and bolder text to make inline links findable. They have a light yellow background focus and hover state. The focus state is further made visible by using the browser-default outline style.

Inputs

Inputs have an easily discoverable visual style, with a 2px ALEX Ink border and larger-than-average clickable area. In the active/focus state, the background changes from white to light gray and the blue color of the border becomes brighter. If the input is in an error state, the border becomes red to indicate that action is required, and this is always accompanied by an error message below the input to explain what action is required.

For a disabled input, this is indicated by a 1px pale gray border (which does meet contrast requirements) replacing the dark border. The input will not be selectable via mouse or keyboard, and if hovered, the cursor will indicate that it is not selectable.

To enhance understandability, inputs are sized based on their content. For example, if we’re asking a user for a number input that is one or two digits, the input will be 68px wide. However, if the content is longer, such as an email address, the input will be 302px wide.

Keyboard navigation

In Chrome, Safari, and Edge, our products are all keyboard navigable. All interactive elements have a visually distinct tab-focus state, and HTML is structured to ensure that keyboard-only navigation selects items in a logical order.

Captioning

All media in ALEX is captioned, so it’s understandable for viewers who need it—whether their sound off or don’t have access to sound. See the captioning guidelines for details on creating uniform captions.

Tools for checking accessibility

Deque AXE browser plugin is our preferred tool for testing and maintaining visual accessibility standards. It’s compatible with Chrome and Firefox, is free for the basic version, and provides a comprehensive report on any potential accessibility needs.