Accessibility

Describe the design system’s approach to accessibility

Condé Nast is committed to ensuring that all readers can access content generated by our brands.

Why it’s important

For our users: Confirming to accessibility guidelines ensures we are creating features that can be accessed by any user via an optimized experience, including people who are color blind, mobility impaired, deaf or hard-of-hearing and those with cognitive or learning disability. For our brands: With 1 in 5 americans having some form of disability, accessibility compliance will ensure our brands content can be consumed by everyone. For our business: Non-compliance is a liability to our business, leaving us open to law suits for any impaired user engaging with our products. Condé Nast is committed to adhering to the WCAG 2.0 level AA guidelines (see http://www.interactiveaccessibility.com/services/ada-compliance & https://www.w3.org/WAI/intro/wcag.php for more details).

Typography

Page sections and headings

Ensure that where the content is divided visually that this content division will also be available to users who cannot see the screen. Define where the main sections of the page are including banner, navigation, search, main content and footer along with the section headings.

Typefaces and styles

Using too many font faces can create a confusing visual layout, which is bad for all users, but may be especially difficult for users with reading disorders, learning disabilities, or attention deficit disorders. Use relative units for font size.

Consistency

Ensure that controls and navigation are presented the same way throughout the site.

Identification

User interface controls including links, buttons and other interactive page elements should be visually apparent.

Text resize

Ensure that content can be resized to 200%

Whitespace

Whitespace helps users differentiate sections of content and makes the screen less cluttered. Too much whitespace and lack of connection between page controls and sections can be difficult for users magnifying the screen.

Spacing

Using a line height of between 1.2 and 1.6 times normal can improve readability and using unit-less line heights help take care of any difficult browser calculation problems.

Appearance

Avoid relying solely on color, shape, font variation and placement to convey meaning. Limit the use of bold or italics. For users with other visual impairments, these styling can either be difficult to read in large quantities. Screen readers cannot communicate the emphasis in the intended design.

Reading order

Screen readers will read the page in the order in which the underlying code is written. The reading order of the content must be defined prior to development to ensure that the content is in a logical visual order and a logical order for screen reader users.

Keyboard Accessibility

Focus indicators

Define the focus indicators for all interactive controls. Ensure that the focus indicator will be visible for users with color blindness and low vision.

Tab order

Define what order the elements should get focus. Define what happens when dynamic content appears on the page.

Type Color

Color contrast

Text is much easier to read when there is a sufficient contrast between the text and the background. Dark text on a light background is standard for both print and the web. The required contrast ratio of 4.5:1 for normal text and 3:1 for large text.

Color use

Users with color blindness, low-vision, and those who cannot perceive color will not understand content if color is used to covey information. Provide an alternative method of getting the same information. Ensure that links and selected states are recognizable.

Copy Style

Descriptive links Links can be read out of context. Write descriptive links or talk to the developers about defining ink context.

Page title

The page title is the first thing that a screen reader reads and provides verification that they are on the correct page. Page title should indicate the topic and site name.

Headings and labels

Headings are used by screen readers for navigation and to understand the structure of the content. Ensure that headings are defined and provide a consistent style for each heading level. Labels used for controls must be unique and descriptive.

Instructions and error messages

Provide instructions and text error messages to help users be successful in completing forms. Text should be near controls. Ensure that errors are visually distinguishable. Unusual Words Screen readers read the text presented on the screen. Avoid words that are shortened, include number/letter combinations, and ASCII characters since the screen reader may not read the content correctly. Examples: 2nite, TMRRW, more». ALL CAPS Using all caps will imply shouting and is more difficult to read. Also, screen readers may read the words with each letter rather than the words.

Images

Images of Text

Stylized text and text on top of images should be defined as real text on the HTML page. Avoid using, where possible, fonts and styling that cannot be achieved using CSS.

Text Equivalents

Users who cannot see the screen require a text alternative that provides the same information. Write the text alternative based on the context and function of the image.

Key Features Users with Disabilities

Fast motion movement

In general, blinking or animating text should be avoided especially if users are required to click on moving text. Users with slower reaction times, tremors, or other motor difficulties may not be able to click on the links accurately. When content is animated provide functionality for it to be paused or stopped.

Navigation Methods

Provide more than one way for a user to find content on the website.

Timeout

For content that requires a time limit, provide a way for the user to extend the session.