Website Accessibility Tutorials

Alternative (alt) text provides text alternatives for images, crucial for screen reader users and when images fail to load.

Don't do this:

Alt text: "chart"

Do this instead:

Alt text: "Bar chart showing 45% increase in website accessibility compliance from 2023 to 2024"

Alt text should describe the content and function of the image, not just name it. Be specific and informative.

Best Practices:

• Keep alt text concise (under 150 characters when possible)
• Don't start with "image of" or "picture of"
• Convey the same information as the image
• For complex images (charts, diagrams), include a detailed description in the surrounding text or link to a longer description.
• Add captions for images when they provide important context or enhance understanding.

Do not embed essential text in images. If unavoidable, repeat the text in alt text or nearby content.

Best Practices:

• Ensure any text within images meets WCAG contrast requirements (minimum 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt+ bold).
• For images that act as links or buttons, alt text should describe the function (e.g., “Search” for a magnifying glass icon).

Testing Tools & Resources:

• Color & Contrast Quick Fix Guide (PDF) by USM Kirwan Center for Academic Innovation
• WebAIM Contrast Checker
• WAVE Browser Extension
• Adobe Color- Color Contrast Checker Analyzer Tool
• TPGi's Free Colour Contrast Analyser (CCA)

Headings create a document outline that helps users navigate and understand content structure. Never skip heading levels.

Don't do this:

Subsection (H4)

Major Section (H2)

Do this instead:

Major Section (H2)

Subsection (H3)

Headers should follow a logical hierarchy without skipping levels. Each page should have one H1, followed by H2s, then H3s, etc.

Common Mistakes:

• Using headers to make text larger (use styles instead)
• Skipping heading levels (H2 to H4)
• Multiple H1 tags on one page
• Visually bold text without semantic heading tags (H2–H6) won’t be recognized by screen readers as a navigational element.

Vague headings like “Topic One” or “Information” provide no context, making navigation harder for all users.

Best Practices:

• Headings should accurately describe the content that follows.
• Aim for short, meaningful phrases rather than full sentences.
• Include relevant keywords that help users and search engines understand the topic.
• Don’t repeat the same heading across multiple sections.

Screen readers can list all links on a page. Generic link text like "click here" becomes meaningless out of context.

Don't do this:

Click here to read our accessibility report.

Do this instead:

Read our 2024 accessibility compliance report (PDF)

Link text should be descriptive and make sense when read out of context. Include file types when linking to documents.

Link Text Guidelines:

• Avoid "click here," "read more," or "learn more"
• Keep link text concise but descriptive
• Indicate file type and size for downloads
• Use aria-label for additional context if needed

Captions benefit deaf/hard-of-hearing users, people in sound-sensitive environments, and non-native speakers.

Do this instead:

    <video controls>
     <source src="video.mp4" type="video/mp4">
     <track kind="captions" 
            src="captions.vtt" 
            srclang="en" 
            label="English">
    </video>

Use WebVTT format for captions. Ensure captions include relevant sound descriptions, not just dialogue.

Caption Requirements:

• Include all spoken dialogue
• Describe relevant sound effects [applause]
• Identify speakers when necessary
• Provide transcripts for audio-only content

Blind or low-vision users miss visual details if videos lack audio descriptions.

Include audio descriptions for essential visual elements that are not conveyed through dialogue.

Auto-playing videos can disorient users and interfere with assistive technology navigation.

Do not auto-play videos; allow users to start playback manually.

Low-contrast visuals or text in videos can make content unreadable for users with vision impairments.

Best Practices:

• Use high-contrast text and graphics within the video for readability.
• Avoid flashing or rapidly changing visuals that could trigger seizures.

Properly structured tables help screen readers announce relationships between data cells and their headers.

<table class="table">
    <caption>2024 Compliance Statistics</caption>
    <thead>
        <tr>
            <th scope="col">
                 Month
            </th>
            <th scope="col">
                 Violations
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">
                 January
            </th>
            <td>
                 12
            </td>
        </tr>
    </tbody>
</table>

Use caption element for table descriptions, th elements with scope attributes for headers, and proper thead and tbody structure. If <th> elements and proper scope attributes are not used, screen readers cannot identify column or row headers, making data confusing.

Table Accessibility:

• Don't use tables for layout purposes
• Always include a descriptive caption element
• Use scope="col" for column headers
• Use scope="row" for row headers

Tables are ideal for displaying schedules, pricing, statistics, or any data that benefits from rows and columns.

Common Mistakes:

• Use of Tables for Layout - Using tables for page layout instead of data can create a confusing reading order for assistive technologies.
• Complex Tables Without Markup - Tables with merged cells or multiple headers need additional markup (like scope or headers attributes). Without it, navigation becomes difficult.