Accessibility

Each person’s experience with a disability is unique, and it’s important to avoid categorizing people by disability “type.” Instead, approach accessibility by understanding the ways people with disabilities use and interact with digital technologies, and design for them using the best practices defined in this section.

Designers can prevent about 70% of common accessibility issues by considering VGAR as they work.

Use of color

When using color to identify or differentiate elements, ensure the same information is available through alternative methods such as text or icons for users experiencing color blindness.

• Never use color alone to indicate a change in state including errors.
• Combine two of the three elements to assist users: color, icon, and descriptive text.

VGAR links (internal only)

• Not Only Color (VIS-2-4)

Media controls

When using moving content, such as automatically-updating content or a slideshow carousel, clearly present users with the option to stop, pause, or hide the content.

• Never use content that blinks or flashes automatically as this can induce seizures in users with photosensitive disorders.

For additional context on why media controls are important, refer to the Motion section of this foundation.

VGAR links (internal only)

• Pause, Stop, Hide Moving Content (INT-6-1)
• No Blinking/Flashing (INT-6-3)

Sufficient contrast

Maintaining a minimum contrast ratio between foreground and background colors is crucial for readability. It ensures that content is easily distinguishable and readable, especially for users with visual impairments or color blindness. This adherence to contrast ratio requirements is a key aspect of creating an accessible and inclusive digital experience.

• Ensure that all content adapts to and supports the user’s high contrast mode settings.

Contrast requirements

VGAR links (internal only)

• Color Contrast Ratio (VIS-2-1)
• Contrast for Non-text UI Components (VIS-2-2)
• Not Only Color (VIS-2-4)

Responsive content

Responsive design is a cornerstone of accessibility, as it ensures content adapts well to different devices, screen sizes, and user preferences. This enhances the user experience, making your content more accessible and user-friendly for all.

• Always consider how your content will respond to changes like text resizing, spacing, and reflow.

Resizing and scaling

Resizing and scaling are key for accessibility as they allow users with visual impairments to enlarge content without losing functionality or ease of navigation.

• Design content to scale effectively, ensuring it remains fully functional and doesn’t require horizontal scrolling even when users increase the size to 400%.

Increasing spacing

Content should adapt to increases in letter, word, line, and paragraph spacing. There should be no loss of content or functionality when:

• Line height or spacing is changed up to 1.5 times the font size.
• Paragraph spacing is changed up to 2 times the font size.
• Tracking or letter spacing is changed up to 0.12 times the font size.
• Word spacing is changed up to 0.16 times the font size.

Reference Typography for further guidance.

VGAR links (internal only)

• Content Resizing, Styling, & Reflow (VIS-1)
• Page Magnification and Text Zoom

Hierarchy

Clear hierarchy is vital for accessibility. Always ensure that information, structures, and relationships conveyed through visual and auditory presentation formats are also programmatically determined or made available in text. By making this information available in a programmatically determined or text format, you ensure that it’s accessible to all users, including those using assistive technologies like screen readers.

• Use headings and other visual cues to associate sections with related content and create a logical hierarchy.
• Content in a list format must use the correct ordered (ol) or unordered list (ul) markup.
• Learn more about structure in Readability.

For further guidance on headings and hierarchy, refer to Typography and Information architecture.

VGAR links (internal only)

• Heading Structure (TXT-1)
• Semantic Markup (TXT-2)

Navigation

Maintaining a consistent order for components across multiple pages is crucial for accessibility. It provides a predictable and intuitive navigation experience, particularly for users who rely on screen readers or keyboard navigation.

• Provide users with more than one way to locate content within a set of web pages, except when the page is a step in a process or its end result.
• If a page has a login feature and focus is not automatically set to the login field on page load, the page must include a “Skip to login” link as the first link on the page. The link must move focus to the login field, and the link may be hidden from view until it has focus.
• A “Skip to main content” link must be included on every page as the first link (or second if “skip to login” link is present) on the page. The link must skip to the main content of the page or the error summary (if present) and may be visually hidden until it has focus.

VGAR links (internal only)

• Appropriate Use of Landmark Regions (NAV-3-1)
• Skip to Main Content Link (NAV-1-8)
• Same Relative Order (NAV-4-1)
• Consistent Context Cues (NAV-4-4)
• More Than One Way to Find Content (NAV-4-5)

Interactive target areas

Ensuring sufficient space around interactive areas is vital as it facilitates easier interaction, particularly for users who may struggle with precise movements. When using components with smaller visual footprints, it’s important to design with ample touch area in mind and avoid placing elements too closely together.

Learn more about challenges for users with a limited ability to use a mouse

Error feedback

Pages collecting user input need to validate entries and ensure all users are aware of errors. By providing clear and immediate feedback about errors, you can create a more accessible and user-friendly experience.

• Provide users with clear instructions on how to correct errors when applicable.
• Never use color alone to indicate a change in state including errors.
• Combine two of the three elements to assist users: color, icon, and descriptive text.

VGAR links (internal only)

• Errors & Messaging (INT-3)

Consistent identification

Using consistent identification for content with the same functions is crucial for accessibility. This allows users, especially those using assistive technologies like screen readers, to easily identify and understand the purpose of interactive elements such as links, buttons, and custom controls. By doing so, you enhance the predictability and usability of your content, making it more accessible to all users.

• Use consistent labels, names, and text alternatives for content with the same functions across experiences.

VGAR links (internal only)

• Consistent Experience (NAV-4)
• Buttons & Links (INT-5-1)

Labeling and instructions

Ensuring that form input controls have clear, descriptive labels and instructions helps users, particularly those with cognitive impairments or those using assistive technologies, to accurately identify specific components within the content. It also prevents incomplete or incorrect form submissions by providing users with the necessary information to fill out the form correctly.

• Ensure that form input controls have clear, descriptive labels and instructions.
• Use universally understood icons and text to help users understand labels.

Text-based alternatives

Providing accurate text alternatives for images and non-text content ensures the same information is conveyed with the same context and purpose to users who cannot perceive the original content due to visual impairments or those using assistive technologies like screen readers. By ensuring this information can be rendered through any sensory modality, you make your content more accessible.

• Ensure images and non-text content have accurate text alternatives that provide the same information, context, and purpose to users and can be rendered through any sensory modality.
• Always present text using live text and CSS, not images of text. The only exceptions are instances where images of text are unavoidable, such as logos, graphs, and screenshots.

VGAR links (internal only)

• Text Alternatives (VIS-3-1)
• No Images of Text (VIS-3-2)

Multimedia content

Accurate closed captioning for all dialogue in video content allows all users to fully engage with the content. Additionally, they can be beneficial for individuals who may not have their sound turned on or for whom English is a second language. By ensuring all video content is accurately captioned, you make your content more accessible to a wider range of users.

• If the video provides information visually that the accompanying audio doesn’t describe, include an audio description track specifically explaining that information.
• If the audio description track can’t adequately explain the visual information during gaps in the dialogue, use an extended audio description.
• Add pauses at appropriate times in the video to allow the description to finish.

VGAR links (internal only)

• Multimedia (VIS-4)

States

Learn about visual cues and design requirements that help users understand component interactivity from States.