Start Here: Tips for Accessible Web Content

Making your web content accessible doesn't require a degree in computer science. In fact, the most common barriers people with disabilities face can be fixed in just a few minutes using standard text editors.

When you follow these baseline tips, you aren't just checking a compliance box - you are ensuring that people with disabilities can navigate your pages with ease.

Best Practices

1. Alternative Text (Alt Text) for Images

Alternative text (alt text) describes the content of an image to those who cannot see them. If an image provides necessary context or informational value to the page, adding alt text is a requirement.

Alt Text Best Practices

Keep it brief: Aim to keep descriptions under 125 characters by focusing on why the image was chosen rather than over-describing micro-details.
Skip redundant phrases: Do not include introductory phrases like “image of” or “picture of,” as assistive technologies already announce that the element is an image.
Avoid duplication: Don’t duplicate text that’s adjacent in the website content
Hide decorative graphics: If an image is purely decorative and provides no context, apply a null alt text tag (alt="") so assistive technologies know to skip it.

Alt Text Resources

2. Descriptive Links

Assistive technology users frequently skim web pages by jumping sequentially from link to link. Meaningful link text ensures that users understand exactly where they are going before they select it.

Link Text Best Practices

Provide clear context: Avoid vague, non-descriptive phrases like “click here” or “read more,” which offer zero context when read out of order.
Omit redundant words: Do not use the word “link” in your text, as assistive software automatically identifies and announces it as a link.
Maintain consistency: If you link to the exact same destination or resource twice on a single page, use identical link text in both locations
Differentiate unique destinations: Links that route to completely different URLs must always feature unique, distinct link text.

Link Text Resources

3. Headings

Headings structure your web content and help users quickly scan a page to find the information they need. Using heading levels in a logical, nested order is helpful to everyone.

Headings Best Practices

Design for structure, not style: Never use a heading tag just to make text big or bold, and don't use regular bold text to create a section title.
Stick to one H1: Use only one Heading 1 (H1) per page, typically reserved for the main page title.
Don't skip levels: Always nest sequentially. For example, move from an H2 to an H3 and never jump directly from an H2 to an H4.
Write descriptive labels: Ensure every heading clearly summarizes the content in the section that follows it.

Headings Resources

4. Color Contrast

Low color contrast makes content impossible to read for individuals with low vision or color blindness, as well as anyone trying to view your site on a mobile device in bright sunlight.

Color Contrast Best Practices

Use sufficient contrast: Ensure the contrast ratio between your text color and its background is at least 4.5:1 for normal text, or at least 3:1 for large text blocks.
Never rely on color alone: Do not use color as the single method to convey vital data, meaning, or instructions (such as in color-coded charts). Always pair color differences with an additional visual element to convey information, such as distinct shape differences, patterns, or clear text labels.

Color Contrast Resources

CCCAC Course: Accessible Stylings: Color Use, Color Contrast, & Fonts
Test for color contrast
- WebAIM Contrast Checker
- Colour Contrast Analyser
Pope Tech Article on Color Contrast
WebAIM Article on Color Contrast

5. Data Tables

Tables are an excellent option for organizing and presenting raw data grids, but they should never be manipulated to create visual page layouts. A proper data table requires a rigid, accessible structure so assistive technologies can map data cells back to their origins.

Data Table Best Practices

Restrict table usage: Only use tables for displaying data sets, never to force a specific visual alignment or layout design.
Designate true headers: Always explicitly specify table headers for your rows and columns within your editor, rather than just applying bold text styling to regular cells.
Keep layouts simple: Avoid nesting tables within one another or merging too many cells, which destroys the logical reading order and makes grids difficult to understand.
Include table captions: Use table captions to give your tables an explicit "heading" context.

Data Table Resources

6. Non-Text Content (Audio & Video)

If you embed a podcast or a video on your web page, you need an alternative method for people with hearing or visual disabilities to obtain this information.

Non-Text Content Best Practices

For Video Content: Provide synchronized Closed Captions for accuracy and ensure any critical visual text on screen is spoken aloud.
- Audio Descriptions (if necessary): If a video contains vital visual information (like text written on a whiteboard or a silent demonstration) that isn't explained in the main audio track, provide an alternative version of the video with an audio description track describing the action.
For Audio Content: Provide a complete, clean text transcript adjacent to the media player.