How To: Accessible Website Content

About the How To Guide

• This guide can be used as a checklist for creating accessible website content to comply with state of Colorado and federal accessibility laws.
• This guide does not replace the Web Content Accessibility Guidelines (WCAG) and its use will not ensure that you are meeting all WCAG requirements. 
• Some of the content in this guide is created by the U.S. General Services Administration. For more information, visit the Accessibility for Teams website (GSA).

Plain Language

Can you quickly understand the main points of the content?
Why it’s important:

• Karin is not a native English speaker and she sometimes has trouble decoding legal or bureaucratic language.
• John has a developmental disability and has difficulty interpreting content written above a sixth-grade reading level.
• Kai has low-tech literacy and often doesn’t understand highly technical language.

Steps to take

• As you’re writing, consider the tech literacy level of your target audience. Define technical terms that may be unfamiliar and use a product or service’s full name before using its acronym or abbreviation. You may also consider adding a glossary if your content contains many potentially unfamiliar terms. Include in-line definitions for scientific, legal or technical terms that you must use.
• Avoid using idiomatic language.

WCAG References

Additional Resources

• Plain language
• Inclusive language

Images

Do your images have descriptive alternative text?
Why it’s important:

• Carmen’s page didn’t load all the way and didn’t get to download the images.
• Amanda is blind and uses a Braille display to understand the content of images.
• John is looking for information with a search engine and needs help being directed to the right content (descriptive alt tags will improve search).
• Marisa primarily uses her mobile device to browse websites and has trouble interpreting visualizations with small text.

Steps to take

• Include meaningful information describing each image in the alt text.
• Use null (empty) alt text when text describing the image is already on the page (alt="").
• Don’t start the alt text with Image of – the screen reader already announces that images are images.
• If the image is decorative and you don’t want the screen reader to announce it at all, use null (empty) alt text (alt="").
• Include visual elements in line with text rather than separated from it; a graphic’s proximity to associated content helps reinforce the relationship between the visual and its written description.
• Make sure all graphics have descriptive captions (if necessary). Also make sure that captions share a common form and voice.

WCAG References

Additional Resources

• Images

Headings

Are the headers properly structured for adaptive technology users?
Why it’s important:

• Ajay is blind and uses a screen reader to navigate the web. He needs properly structured headers to be able to navigate the page without reading all the text.
• All people benefit from being able to quickly scan headers.

Steps to take

• Apply the built-in styles in the formatting bar of the Content Management System (CMS) you’re using. Don’t use design elements alone to differentiate headers from content. If you’re developing a site, you can use Cascading Style Sheets (CSS) to set the styles.
• Use level 1 headings (H1) to indicate the title, topic or purpose of each page.
• Repeat all or part of the level 1 heading in the browser page title of webpages.
• Continue using properly nested headings in correct order to indicate subsections below the level 1 heading.

WCAG References

Additional Resources

• Page structure

Lists

Is the page broken into easily readable chunks, encouraging readers to quickly scan content?
Why it’s important:

• Mia has ADHD and needs to be able to focus on accomplishing her task without being discouraged or getting lost in walls of text.

Steps to take

• Present key terms and concepts by organizing information into meaningful chunks or conveying steps necessary for processes and procedures.
• Use the list or paragraph formatting options in your CMS or in the CSS if you’re developing the site.
• Use an ordered list with a different numbering system in the secondary levels than in the primary levels to help users distinguish between them.

WCAG References

Additional Resources

• Page structure

Links

Do all links have properly descriptive text?
Why it’s important:

• Jerry is blind and uses a screen reader to navigate the web. He often uses the tab key to quickly scan a page by reading out only the link text without the surrounding copy.
• Carson is also blind and uses a screen reader. Instructions on the site tell him to click on a particular button, but the “button” in question is actually a link so he can’t find it using standard form field commands.

Steps to take

• Create link text that’s as specific as possible. For example, instead of using “Click here” (which may not make sense for folks using screen readers), consider instead something like Download the full report. Descriptive links provide all users more information about an action they may undertake.
• Include information about what a link leads to; this is especially important for folks who use mobile devices. If you’re linking to a PDF, say so.
• Remember that in HTML, links and buttons are different elements that serve different purposes:
  • Links take the user to a new location, such as a new webpage or new section of the current page.
  • Buttons trigger some action, such as showing content on the page that was previously hidden, playing a video or submitting a form.

WCAG References

Additional Resources

• Links

Tables

Is the table formatted with proper HTML tags so that the cell label is correlated to the data within it?
Why this is important:

• Hanna uses a screen reader and cannot find where her class will be held because the table wasn’t formatted correctly and sounds like this: 
  • Table with 10 columns and 7 rows. Department Code, Class Number, Section, Max Enrollment, Current Enrollment, Room Number, Days, Start Time, End Time, Instructor, BIO, 100, 1, 15, 13, 5, Mon,Wed,Fri, 10:00, 11:00, Magde, 100, 2, 15, 7, 5, Tue,Thu, 11:00, 12:30, Indge, 205, 1, 15, 9, 6, Tue,Thu, 09:00, 10:30, Magde, 315, 1, 12, 3, 6, Mon,Wed,Fri, 13:00, 14:00, Indge, BUS, 150, 1, 15, 15, 13, Mon,Wed,Fri, 09:00, 10:00, Roberts, 210, 1, 10, 9, 13, Mon,Wed,Fri, 08:00, 09:00, Rasid.

Steps to take

• Accessible tables need HTML that indicates header cells and data cells and defines their relationship. Assistive technologies use this information to provide context to users and relying on visual cues alone is not sufficient to create an accessible table.
• Header cells must be marked up with and data cells with to make tables accessible.
• Tables should not be used for layout purposes. They should be used to communicate the relationship of data and not to organize information for visual purposes.

WCAG References

Additional Resources

• Page structure

Video and multimedia

Is everyone able to access your multimedia content?
Why it’s important:

• Blake is hearing-impaired and cannot rely on audio.
• Suki is blind and cannot rely on video images.
• Sandra is a non-native English speaker and has difficulty understanding video.

Steps to take

• Make sure that captions are synchronized to appear around the same time that they would be heard in the audio.
• Captions do not need to be a word-for-word version of the audio, but should be a concise equivalent.
• Use a modern video player that supports captions.
• If you’ve captioned your video, provide a transcript as one of the optional output formats produced by the closed captioning process.
• To make the transcript available, link to it from your webpage, wherever you link to or display the associated video.
• Audio description is required when important information is visually shown on the screen that cannot be observed by a blind or vision-impaired individual.

About transcripts

A transcript is a text version of the media content. A transcript should capture all the spoken audio, plus on-screen text and descriptions of key visual information that wouldn’t otherwise be accessible without seeing the video. Transcripts make video content accessible to everyone, including people who are unable to view the video due to accessibility problems or technical limitations. They are also helpful for people who want to quickly scan or search a video’s content but do not have the time to watch the entire video.

WCAG References

Color and Contrast

Is there a strong color contrast between the foreground and background of your content?
Why it’s important:

• Sangita is colorblind and can’t find the green button as directed in the form’s instructions and there is no other cue indicating the correct button.
• Phylis has low vision issues and needs to enable high contrast mode to read text on a webpage.
• Oscar is trying to read text on her mobile phone while standing in bright sunlight.
• Peter is using an older computer monitor and it doesn’t have accurate color calibration.

Steps to take

• Use color plus another element to visually distinguish information differences:
  • Bold
  • Size
  • Patterns or shapes
• Use colors that strongly contrast each other by comparing two colors using a tool like the webaim.org color contrast checker.

WCAG References

Additional Resources

• WebAIM Color Contrast Checker, WebAIM