Web Accessibility

Web accessibility means making digital content usable for everyone, including people with disabilities. Disabilities that may affect web use include visual, auditory, physical, speech, cognitive, and neurological impairments.

An accessible web benefits everyone by allowing flexible ways to access information.

Key Tips for Designing Accessible Web Pages

Page Titles should be Descriptive and Unique

Page titles should accurately describe the content of the page.
Each page title in a website should be unique to differentiate it from other pages on the site and prevent confusion.

Use Headings for Structure

Headings, like H1, H2, and so on, organize content logically and make navigation more accessible, especially for screen reader users. When headings follow a structured hierarchy, it helps users understand the content’s flow and navigate effectively.

H1 for the Page Title: Use H1 for the main title of your page. In platforms like WordPress, the page title automatically becomes H1. Limit to one H1 per page.
H2 for Main Sections: Each significant section should start with an H2. This organizes primary content areas and guides users through distinct parts of the page.
H3 for Subsections: If a section (H2) has multiple parts, use H3 to introduce each part. This hierarchy continues logically, with H4 for deeper subsections if needed.
Style with Purpose, Not Just Appearance: Headings should serve a structural purpose rather than simply looking visually appealing. Choose the correct heading level based on structure, not appearance, to avoid confusion for screen reader users.

Example of Accessible Heading Structure:

H1: Page Title
- H2: Section title
  - H3: Subsection Title
  - H3: Subsection Title
- H2: Another Section Title

Provide Image Alt Text

Alt text (alternative text) is crucial for users who rely on screen readers to understand visual content. Provide descriptive alt text for informative images to convey their purpose and meaning.
For images containing important information (such as infographics), include all relevant details in the alt text to ensure users receive the same information as sighted users.
For decorative images, leave the alt attribute empty to allow screen readers to skip over them, keeping the focus on meaningful content.
If an image is used as a link, ensure the alt text clearly describes the destination of the link.
Alt text should not be identical to the caption – alt text should describe what’s in the image and captions should explain why the image is there (the context of the image). Captions are optional. Alt text is required.
Add descriptive alt text for icons used as links or combine them with text links to prevent redundancy.

Example of Good and Bad Alt Text:

Good Alt Text:

“Students in a classroom, with a smiling student holding a green bag in the foreground.”

Why it’s good: Brief but provides key details about the image’s context and focus.

Bad Alt Text:

“A classroom.”
- Too vague.
“A woman sitting at a desk.”
- Misses key details and context.

Lists

Use proper list markup (unordered or ordered) to structure visual lists.
Avoid single-item lists to reduce confusion for assistive technologies.
Format lists of links or dates as unordered lists to maintain consistency and accessibility.

Name Links Clearly

Use descriptive text for links that clearly explains their purpose and destination. Avoid generic phrases like “click here” or “read more,” as these provide no context for users relying on screen readers.
Screen reader users often navigate through links out of context, so ensure link text is unique and meaningful on its own.
Example: Instead of saying “Click here for our services,” use “Learn more about our web accessibility services.”
Avoid using underlined text for emphasis, as it can confuse users by making the text appear to be a link. Use bold or italic formatting for emphasis instead.

Use Color Thoughtfully

Color should never be the sole method of conveying important information, as some users may have difficulty perceiving certain colors. Use additional visual indicators, such as text labels or symbols, to provide clarity.
Ensure that text has sufficient color contrast against its background to be readable by users with visual impairments. Tools like the WebAIM Contrast Checker can help evaluate color contrast.
Avoid relying on color alone to indicate form errors or required fields. Instead, use symbols (e.g., an asterisk) or text to provide additional cues.

Button Color Contrast Examples:

Two 'Submit' buttons showing contrast compliance. Left: purple with white text, contrast ratio 13.09:1 (passes). Right: yellow with white text, contrast ratio 1.54:1 (fails).

Label Form Fields Properly

Each form field should have a descriptive label for screen reader users.
Ensure fields are logically ordered for keyboard navigation.

Example of Form Fields with Descriptive Labels

Contact form titled 'Contact Me' with fields for Name, Email, and Message. Required fields are marked with an asterisk. A purple 'Submit' button is at the bottom.

Tables

Use tables only for presenting data, not for page layout.
Provide headers for rows and columns in data tables, and avoid merged cells which can create confusion for users of assistive technology.

Provide Multimedia Alternatives

Audio and video content should be accessible to all users. Provide captions for video content, and include transcripts for both video and audio files.
Captions and transcripts benefit not only users with hearing impairments but also those in environments where audio cannot be played.
Ensure that any multimedia content, such as instructional videos or promotional clips, has accessible controls for users who may rely on a keyboard or assistive technology.
Include accessible names (titles) for video iframes to describe the content effectively.

Find out more on the Video Accessibility page.