Accessible design helps people with different abilities and provides better experiences for everyone. A person's ability can mean many things, whether body structure or function—mentally or physically. By understanding the diversity of disabilities, we can better design inclusive interfaces, allowing a broader spectrum of abilities to participate in our product.
Visual
The World Health Organization (WHO) identifies 4% of the global population as visually impaired, 4% as having low vision, and 0.6% as blind. 285 million people are visually impaired, 39 million are blind, 249 million have low vision, and 300 million are color blind.
To make the web more accessible for users with visual impairments:
- Provide good contrast: Use a readable font size and ensure appropriate color contrast in text and non-text interactive elements. Check designs in grayscale to ensure it remains usable without color.
- Use a combination of size, shape, text, and icons: Don't rely on color alone to convey meaning. Consider the size of visual elements, make shapes distinctive with plenty of surrounding space, avoid italicized or decorative font styles for blocks of text or signs, and carefully consider line thickness, spacing, and size when using iconography.
- Follow a linear, logical layout: Use headings to establish a hierarchy in a layout from top to bottom. Screen readers that support scan-ability allow users to skim pages to get an overall impression of a page's content by jumping from heading to heading.
- Provide context around buttons and notifications: Use explicit and descriptive labels for links and buttons and avoid unclear links and headings regarding the action or expected functionality.
- Provide alt text or descriptions for non-text content: Provide alternative ("alt") text for users with screen readers to gain additional context that an image may provide to the page's content. Aim to keep descriptions concise and to the point.
- Support keyboard accessibility: Provide users with keyboard shortcuts by following WAI-ARIA guidelines to make all elements accessible. This benefits keyboard-only users and extends to other assistive technologies, such as screen readers or braille readers.
Text color contrast
The visual presentation of text and background should have a contrast ratio of at least 4.5:1 with the background. This rule applies to the text on the page, including placeholder text, hover text, and text shown on keyboard focus.
Exceptions:
- Large Text - At least 18pt (typically 24px) or 14pt (typically 18.66px) and bold must have a contrast ratio of at least 3:1
- Incidental - Inactive user interface (disabled items), decorative (icons, Illustrations), non-visible, insignificant part of a picture
- Logotypes - Text that is part of a logo or brand name
Non-text color contrast
To ensure non-text elements in our component library have enough contrast, we used the APCA (Accessible Perceptual Contrast Algorithm) model to verify all visual information required to identify active UI components and states, focus indicator, and graphical objects.
Compared to AA/AAA guidelines, APCA is more context-dependent. The contrast is calculated based on the following features: Spatial properties (font weight and text size).
Reading order
The reading order must be logical and intuitive. Arrange the order of the elements within the HTML, so screen readers follow the same order as the visual presentation of the screen.
Auditory
Captioning by itself oversimplifies issues and fails many deaf people. To better user experiences for the deaf and deaf communities, we must stop thinking of deafness as the opposite of hearing and understand deafness as a cultural and linguistic minority group.
To make the web more accessible for users with hearing loss or deafness:
- Use subtitles or provide transcripts: Subtitles for spoken word, captions for additional sound context, or video transcripts allow users to digest the information at their own pace.
- Use plain language: Use simple language in an active voice whenever possible.
- Use headings and subheadings: Break up content with sub-headings, images, and videos. Avoid increasing users' cognitive load by having to read long blocks of content.
- Minimize slang, phonetics, and wordplay: Some words and phrases are not 1:1; for example, " comfortable " is "come-for-table" when signed. Avoid complicated words or figures of speech for a more direct user understanding.
- Write in a journalistic style: Make your point and then explain it. Sign language is straightforward, stating the central fact first and then expanding upon it.
- Include a glossary for specialized vocabulary: Provide definitions in simpler language, allowing users to reference them for additional context.
- Provide options for methods of communication: Do not make the telephone the only means of contact for users. Allow users to pick their form of communication.
Cognitive
According to the 2010 US Census Bureau, 15.2 million American adults have cognitive, mental, or emotional difficulties, including people with Alzheimer's disease, senility or dementia, intellectual and learning disabilities, attention deficit hyperactivity disorder (ADHD), and autism or autism spectrum disorders.
To make the web more accessible for users with cognitive impairments:
- Minimize cognitive load: Don't overwhelm the user. Apply a "less is more" approach. You will never hear someone complain that a user experience is "too easy."
- Consistency: Ensure that similar user interface elements and similar interactions produce predictably identical results.
- Icons: Use familiar icons to mark important tasks and consider adding text labels as well.
- Typography: Limit the number of typefaces in a document. Use only one or two typefaces and varying weights to help with performance and readability.
- Timing: Allow the user sufficient time to access and interact with the content. If you have timed content (forms, image galleries, etc.), provide transport controls, or allow users to request more time.
- Forms: Ask users to confirm choices. Use shorter, multi-step forms rather than lengthy, all-in-one forms for complex interactions.
- Feedback: Provide prompts, feedback, and validation to let users know if they made the correct choice and to help them get back on track when errors occur
Physical
Users with physical or motor disabilities may struggle with mouse devices or pointer-based interactions. Providing these users with full keyboard access and support of other assistive technologies, such as braille keyboards or voice commands, is paramount. Creating support for these devices allows for a variety of ways for users across all abilities to interact with and experience our websites.
To make the web more accessible for users with motor impairments:
- Use larger clickable areas: Provide users ample space to click or interact with an element. Don't require precision in clickable areas such as a radio button; instead, designate the label and a set amount of padding around the element as the target click area.
- Support keyboard-only navigation: Follow WAI-ARIA guidelines to make all elements accessible via keyboards and keyboard emulators. Ensure that keyboard focus elements are visible and features are keyboard accessible.
- Provide shortcuts: Reduce the number of actions required for interactions. Use skip-to-content buttons at the top of navigation and provide search functionality, allowing users to skip browsing for content and immediately get to their content needs.
- Restrict the use of timed interactions: Avoid having short time-out windows or forcing users to complete an action within a set amount of time. Allow users to return to complete their task or have multiple ways to complete it.
- Avoid cursor-dependent dynamic content: Dynamic content that requires precise mouse movements can be strenuous on motor-impaired users.