Creating Accessible Web Content
Many different people could be adding content to a website. Sometimes content is added by the individuals who developed (i.e., coded) and/or designed the website. But many departments use a Content Management System (CMS), where multiple individuals, who may or may not have been a part of creating the website, are responsible for contributing and maintaining content.
It’s important that every person who adds content to the website understands how to make that content accessible. The following are some general guidelines to help, but if you’re not a developer, you may want to speak with your webmaster so you’re both on the same page. They'll be able to explain what expectations they have for content contributors, and teach you the functions of the CMS that will help make content accessible.
When adding text content, use appropriate structural elements. That is, define headings, paragraphs, lists, etc. correctly (even if you don’t like the way it makes the content look).
Use Simple Language
Write in a way that’s easy to understand (i.e., “plain-language”), and define words that may be ambiguous, unknown, or used in a very specific way. Always expand abbreviations the first time they’re used, even if they’re common.
Ensure Link Text Makes Sense
Avoid "Click Here" in link text. Other ambiguous links, such as "More" or "Continue", can also be confusing. Strive for links that make sense when read out of context. If you’re unsure, write links as a separate list, and see if you can still understand what they’re linking to.
Don’t Rely on Visual or Audio Cues, Alone
Don’t write instructions that depend on shapes, position, or color (e.g., "Click the square icon to continue," “Instructions are in the right-hand column,” “Required form fields are in red”). The same is true for sounds (e.g., "A beeping sound indicates you may continue."). Using visual or audio cues can enhance comprehension, but are problematic for some users when used by themselves.
Provide Alternative Text for Images
Provide appropriate alternative text for all images. Images that are decorative should have null alt text (i.e., alt="").
Provide Text Equivalents for Audio and Video Content
If you want to add audio and/or video content, they must have equivalent transcripts and/or captions. Descriptive text transcripts or audio descriptions should also be used for video that has visual content not conveyed in the audio.
Use Contrasting Colors
Make sure color contrast is strong, especially between text and backgrounds. Check your contrast levels with a color contrast checker (available with many web accessibility browser extensions, like the Accessibility Evaluation Toolbar).
Pay Attention to Complex Tables
Data cells in complex tables need to be associated with their headers. Table captions and summaries should also be used, where appropriate.
Create Accessible Documents
Any documents publicly available on your website (i.e., documents uploaded and linked to) need to be accessible, too. This includes PDF, Word, Excel, and PowerPoint documents.
Did you know?
- In the United States, about 55 million people have a disability (src: 2010 U.S. Census).
- About 1 in 5 Americans have some kind of disability (src: 2010 U.S. Census).
- The percentage of people affected by disabilities is growing as our population ages.
- Two popular, free screen readers are VoiceOver (Mac OS and iOS) and NVDA (Win).
- Good accessibility practices can improve the search ranking of your website.
- Form fields without labels can cause problems for some assistive technology users.
- Low color contrast makes content difficult to see, especially for users with low vision.
- Documents linked on a website need to be accessible too (e.g., PDF and Word files).
- Audio content, like podcasts, need transcripts for deaf or hard of hearing users.
- Online videos should be captioned for deaf or hard of hearing users.
- Using HTML tags correctly is very important for accessibility.
- Descriptive link text helps make a website more accessible. Avoid using "Click here" or "Read more."
- A "screen reader" is an application that reads content aloud to a user.
- There is no "alt tag" in HTML. "Alt" is an attribute used with the img tag.
- HTML uses the alt attribute to provide a text description of an image.
- Alt text should describe an image, if the purpose of the image is to convey information.
- If an image is a link, the alt text for the image should explain where the link goes.
- If an image is only being used for decoration, the alt text should be null (i.e., alt="").
- If a table has headers, using header tags (<th>) will make the table more accessible.
- An accessible website is one that can be navigated and understood by everyone.