Accessibility for the Web

Users must be able to perceive content regardless of sensory limitations (e.g., providing alternative text for images or captions for videos).

• Provide text alternatives for non-text content.
• Provide captions and other alternatives for multimedia.
• Create content that can be presented in different ways, including by assistive technologies, without losing meaning.
• Make it easier for users to see and hear content.

Interfaces must be navigable via keyboard or alternative input methods, ensuring no barriers for motor-impaired users.

• Make all functionality available from a keyboard.
• Give users enough time to read and use content.
• Do not use content that causes seizures.
• Help users navigate and find content.

Content must be clear and understandable, including when users rely on screen readers that provide text-to-speech. Authors should:

• Identify the primary language of the web page and any text passages.
• Define unusual words, idioms, and abbreviations.
• Use simple, clear language or provide simplified versions.  Depending on the user base of your webpage or website, we recommend plain language writing.  For example, our Online Self-Help Guide aims for content written at a 5th grade reading level.  This ensures assistive technologies can accurately process and present the content.

Ensure content and code remains functional as technologies evolve.  Consider that:

• Our design system uses semantic HTML properly structure and define elements to help assistive technologies interpret and interact with content accurately.  When creating content or interactive applications, ensure they are defined (e.g. <form>, <table>)
• Regularly test content for compatibility on various devices and assistive technologies to ensure functionality.
• If you encounter a bug in our system, please notify the web team.  We want to maintain error-free code to prevent technical issues that could disrupt accessibility.

Follow these best practices to ensure buttons and links meet accessibility standards:

• Use descriptive labels: Provide clear, specific text on buttons and links (e.g., "Submit Form" instead of "Click Here") to convey their purpose and to help users accurately predict what they will get once they click on a link or button.  
• Refrain from using repetitive labels: Labels such as “click here” or “read more” are frequently used, nondescriptive, and can cause accessibility concerns when an ARIA labeled is not applied.  Screen readers rely on link descriptors to help those who are visually impaired, and if there are multiple links with the same label, that can get confusing to the user.  
• Understand keyboard accessibility: Buttons and links in our design system are fully navigable and actionable using a keyboard (e.g., via the "Tab" key), consider how content is organized so that the tabbing order of links and buttons makes sense in context with the content written.  
• Component links and buttons: Many of our components may provide options to add links or actionable text that act as links, such as Accordions or Action Lists.  Consider the same best practices for any components with link features.  

Our design system offers other accessibility features.  Visit our button components page for more information on how our buttons are designed and best practices.

Color contrast is essential for visual accessibility, ensuring text and visual elements are easily distinguishable, especially for users with visual impairments. While our design system accounts for color contrast, in some instances, the flexibility in our designs system layouts may require authors to understand and apply accessibility standards. Follow these best practices to meet accessibility requirements:

• Maintain proper contrast ratios:

  • Text and background: At least 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold).
  • Non-text elements (e.g., icons, buttons): Apply similar contrast ratios to ensure visibility.
  • Our components and layout templates may allow for various colors to stack on top of each other.  For example, avoid using a red card on a green background for those who are red-green color blind.
• Avoid relying solely on color: Use additional indicators, such as labels or descriptive text to convey meaning effectively.

• Use a color contrast checker: Tools like WebAIM: Contrast Checker can help evaluate color combinations for compliance.

• Aim for WCAG 2.1 AA standards: These guidelines ensure readability, usability, and inclusivity for diverse audiences.

Proper heading levels are crucial for organizing content, enhancing navigation, and ensuring accessibility for all users. Follow these best practices for structuring web pages with headers:

• Use a single <h1> per page: The page title is automatically set as <h1> in our design system; there should only be one <h1> per page to maintain a clear structure.
• Organize headers hierarchically: Our components have built in headers; however, header options are available in the text editor that range from Heading 2 to Heading 6.  Use <h2>, <h3>, and so on to group content logically. Avoid skipping levels like jumping from <h1> to <h3>. Headers set in the proper order allow screen readers to easily predict and skip to content, as needed.  (Ensure the Order of Headings is Semantically Correct - Accessibility Checker)
• Write descriptive, concise headers: Clear headings improve navigation for screen readers and users, enhancing overall user experience and accessibility.

Consider the organization of headers as you might consider folders in a computer.  

H1 is the main hard drive and everything else lives under it: 

• H2 is the header for your first set of content
  • H3
    • H4
      • H5
        • H6
• H2 - you can jump back to the H2 for another set of content, and anything besides the H1 can be used multiple times on a single page.
  • H3
    • H4
  • H3
    • H4
• H2

The size of each header style is already set by the design system.  Avoid using the headers solely for its style or design, which may confuse screen readers and breaks accessibility best practices.  

Images must meet accessibility standards to ensure inclusivity.

• Provide alternative text: Also referred to as "alt tags" or "alt attributes," these allow screen readers to describe visual content to users with visual impairments using a screen reader.
  • Include alt tags for all images; our design system requires this for all images.
  • Use an empty alt attribute (alt=" ") for decorative images - this is a blank space between quotation marks.
  • For complex visuals like charts or infographics, provide detailed descriptions or supplementary text elsewhere on the page.

  • Describe the image’s function by using concise, descriptive alt text to convey the image's purpose (e.g., "Woman using a laptop" for an illustration about remote work).

• Combine visuals with text: Avoid relying on visuals alone to convey critical information; supplement them with text or alternative content formats.

• Optimize images for responsiveness: Ensure clarity across devices while maintaining efficient load times.  Images can be between 72 and 150 dpi for fastest load times with acceptable resolution.  

Video, audio, and multimedia content play a vital role in engaging users but must be designed to meet web accessibility standards. Follow these guidelines to ensure inclusivity:

• Provide captions for videos: Include synchronized captions for spoken dialogue and relevant sounds to assist users with hearing impairments.
• Offer transcripts: Provide text transcripts for audio and video content to ensure accessibility for users who rely on screen readers or prefer reading.
• Include audio descriptions: For videos with essential visual elements, add audio descriptions to narrate on-screen actions for visually impaired users.
• Avoid autoplay: Disable autoplay features for videos and audio to prevent disruption for users relying on assistive technology or those with sensory sensitivities.
• Ensure controls are accessible: Use accessible media players with keyboard navigation, clear labels, and compatibility with assistive technologies.
• Test for responsiveness: Ensure multimedia adapts seamlessly across devices and screen sizes without losing functionality or clarity.
• For animations and motion: Offer settings to disable effects for users sensitive to motion (e.g., “reduce motion” system preferences).

By following these practices, multimedia content becomes accessible, enhancing the user experience for all audiences.