Top Five Tips to Create Accessible Content

Well-executed content creates a better user experience for everyone. In addition to ensuring your content does not break federal law and WCAG compliance regulations, these are five surefire ways to ensure you create accessible content.

1. Alt Text
2. Headers
3. Links
4. Color and Contrast
5. Visual Transcript

Despite good intentions, not all website content is created equal. We’re not talking about the design aesthetics (though we’ve discussed this in previous posts) — we’re talking about accessibility. Well-executed content creates a better user experience for everyone. When content on a website is accessible, it means all users, regardless of their level of ability, condition, or circumstance are able to access it. Accessible content eliminates barriers and provides an inclusive experience for everyone, with all abilities. 

Even with the best intentions, sometimes we miss the mark and unintentionally prevent a user from accessing content. In addition to ensuring your content does not break federal law and WCAG compliance regulations, here are five surefire ways to ensure you create accessible content.

1. Alt Text

Alt text, also known as alt description or alt attribute, is a textual description for non-text elements on the screen, such as images, graphics, photographs and drawings. When a person with limited vision or blind uses screen readers or other technology to help them access content on websites, the screen reader will read the description of the image. If there is no alt text, the screen reader will simply say “IMAGE” with no frame of reference. So the person will not have an idea of what the image is or its context within the text. 

WCAG 2.1 requires all non-text content that is presented to the user to have a text alternative that serves the equivalent purpose. For the visually impaired, this means alt text should describe the image unless it is decorative. Here are some helpful tips when writing your alt text: 

• Avoid the use of the term “image of” or “picture of”
• Avoid overly verbose descriptions
• Don’t repeat descriptions on the page. 

Here is are some contextual examples of the correct use of Alt Text for the following image of Martin Luther King, Jr.:

2. Headers

Sighted and non-sighted users use headings to quickly identify and scan sections of content. Screen readers use heading tags to help users quickly move to that section. 

Text features that are used to create a structure without tags, such as bold, italics or increasing font size, are not accessible, as assistive technologies will not differentiate when reading. 

There are six levels of headings that can be used in HTML, where “Header 1” indicates the most important and “Header 6” indicates the least important. It is extremely rare to use all six levels on one page. “Heading 1” should only be used once on the page.

Example of an improperly structured heading list:

Example of a properly structured heading list:

3. Links

Links are one of the most basic elements of HTML but it is still possible to make them inaccessible to users. For example, a screen reader will inform the user there is a link on the page. Some users may prefer to listen to a list of the links, which will cause them to jump from link to link on a page. 

If a user chooses this option, there is no context if the text to a link says “Click Here” or “Read More” as the screen reader will read the text as displayed. Links should have context without the rest of the sentence and should not be redundant. 

Here’s an example: in our 12 Helpful Resources for Instructional Design article, we highlight books and websites. Instead of saying, “Click here to learn more about Julie Dirksen’s book”, we say “If you are new to instructional design, Julie Dirksen’s book is a great pick for those just getting started.” Assistive technology, such as screen readers, would read that sentence as “If you are new to instructional design ‘link to Julie Dirksen’s book…’” instead of “Link to Link to Julie Dirksen’s book.” The link should also have context without the rest of the sentence.

4. Color and Contrast

Color is important in online course design. It conveys meaning, evokes certain emotions, and can be symbolic. (If you want to learn more about the importance of color and design, dive into our Introduction to Design tutorial).

Color gets attention or establishes a mood, setting up how a viewer may react. Colors also have a range of associations (like red could mean danger and love), and can vary culturally. Color (with shapes) is used effectively in branding for awareness and recall. 

Contrast can also cause issues for the visually impaired. Contrast – put simply – is the difference between one color and another. Levels of contrast can vary from high to low. WCAG 2.1 requires contrast to meet a certain ratio based on variables, including the size and weight of the text. For simplicity’s sake, however, the minimum ratio that WCAG 2.1 requires is 4.5:1. Colors that are directly opposite from one another on the color wheel have the highest contrast possible. Colors next to each other have low contrast – which means it will be difficult for the visually impaired to read. Poor contrast can affect the way someone receives information. 

Here is an example of poor contrast for web content. 

When in doubt, refer to the contrast checker from Web Accessibility in Mind (or WebAim), among their other valuable resources.

5. Visual Transcript

For people who are deaf or hard of hearing, closed captioning provides the narration of the audio. For those users who may have a visual impairment, a descriptive transcript is required. Descriptive transcripts provide important cues, sound effects, words on screen, descriptions of figures, images, or actions, and/or visual characteristics that provide additional context. This ensures that users of all abilities get the full information. When you use descriptive transcription, there is no need to also do a separate basic transcription since descriptive transcriptions capture both audio and visual information.

Here’s an example of how to employ descriptive transcription with this video. 

Example 1: The Sixth Sense

Example 2: Compliance Training Video

All of these tips can be found in our Accessibility Checklist. Download it today for easy reference.

CourseArc was built as a tool and team to support organizations as they build online content. Check out our resource site to see how we can help your team. See our tool in action and then check back to our blog and social media feeds for additional resources and case studies on how our clients are using CourseArc to move their professional development and training programs online. Take your learning and development goals and budget to the next level.

Want to learn more about CourseArc?