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.