Create Accessible Websites

When creating or developing digital content, follow these standard practices to promote accessibility and usability for all users. For more detailed guidance, refer to the Web Content Accessibility Guidelines (WCAG).

Headings and Page Structure

  • Use proper HTML structure to make content easier to navigate and understand—for all users, including screen reader users.
  • Organize content with heading tags (<h1>-<h6>) to reflect the page’s hierarchy. Screen reader use headings to jump between sections.
  • Group related items using list tags (<ul>, <ol>, and <dl>) for clear structure and readability.
  • Write descriptive headings that help users scan and understand content at a glance.
  • Learn more: W3C WAI Page Structure Tutorial

Links

  • Use clear, descriptive link text that tells users where the link goes or what it does.
  • Avoid vague phrases like “click here,” “learn more,” and “read more”-they provide no context.
  • Underline links so they’re easy to identify, and avoid underlining text that isn’t a link.
  • Learn more: WebAIM – Links and Hypertext Guide

Color & Contrast

  • Text must have sufficient contrast with its background to support readability and accessibility:
    • Normal text: Needs a minimum contrast ratio of 4.5:1
      • Normal text is:
        • smaller than 18 pt (24px)
        • Or, bold text smaller than 14 pt
    • Large text: Needs a minimum contrast ratio of 3:1, since larger/bolder text is easier to read
      • Large text is:
        • 18pt (24px)
        • Or, at least 14pt (19px) and bold.
  • Graphical elements—like icons, chart components, and custom-designed buttons—must have a contrast ratio of at least 3:1 against their background.
    • Interactive components (such as buttons and form fields) must also maintain at least 3:1 contrast in all states:
      • Focus
      • Hover
      • Active
      • Selected
  • Avoid hard-to-read color combinations, like white text on a gold background.
  • Color should never be the only way to convey information—add labels, symbols, or patterns.
    • Text labels – Clarify meaning directly.
      • Example: Show a red dot next to the word “Overdue” instead of using the dot alone.
    • Symbols or icons – Add recognizable visual cues.
      • Example: Use an exclamation mark icon to indicate a warning.
    • Patterns – Differentiate elements that may appear similar in color.
      • Example: Use stripes, dots, or textures in charts or maps to help users with color vision deficiencies.
  • Test color contrast ratios using tools on the Check Accessibility page.
  • For more guidance, visit WebAIM: Contrast and Color Accessibility.

Images & Alt Text

  • Add alt text on non-text content that conveys meaning (e.g., images, icons, charts).
  • Keep alt text concise, ideally around 125 characters.
  • Use empty alt text (alt=””) for decorative images so screen readers skip them.
  • Determine whether an image is decorative or informative based on its purpose in the content.
  • Avoid using images that contain text whenever possible.
  • Learn more: W3C WAI – Images Concepts Tutorial

Tables

  • Avoid using tables for layout. They should only be used for presenting data.
  • Structure data tables properly using HTML tags:
    • <th> for table header
    • <td> for table cells (data)
  • Use table headers and scope attributes to help screen readers understand relationships between rows and columns.
  • Refer to the W3C WAI Tables Concepts Tutorial for guidance on creating accessible data tables.

Audio & Video

  • Add closed captions to all videos to support users who are deaf, hard of hearing, or in environments where audio can’t be played.
  • Provide transcripts for audio content to support users who cannot hear or prefer reading.
  • Learn more: Create Accessible Audio and Video

Keyboard Accessibility

  • Ensure all website content can be fully navigated and operated using only a keyboard—no mouse required.
  • Follow best practices to support users who rely on keyboard navigation, including those using assistive technologies.
  • Avoid common barriers, such as:
    • Missing or unclear focus indicators
    • Interactive elements that can’t be reached or activated by keyboard
  • Learn more: WebAIM – Keyboard Accessibility

Check for Accessibility

It’s important to evaluate the accessibility of your digital content throughout the design, development, and creation process.

Visit the Check for Accessibility page for trusted tools, helpful guides, and practical checklists to help you get started.

Additional Resources: Understanding ARIA

ARIA (Accessible Rich Internet Applications) helps improve accessibility for complex web components, especially those built with custom JavaScript or dynamic content.

The resources below offer guidance for developers looking to build more accessible, interactive experiences: