Top Five Tips to Create Accessible Content
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.
[Image of MLK with No Caption]
Picture of Civil Rights Leader Martin Luther King, Jr. → Martin Luther King, Jr.
[Image of MLK with Caption]
Picture of Civil Rights Leader Martin Luther King, Jr. → Null/Empty
[Image of MLK w/ Link to Wikipedia]
Picture of Civil Rights Leader Luther King, Jr. → Martin Luther King, Jr.
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:
Animal Classification (H1)
Cold- Blooded (H3)
Jointed Legs (H3)
3 Pairs of Legs (H4)
More than 3 Pairs of Legs (H4)
No Legs (H3)
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 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.
Color contrast can also cause issues for the visually impaired. Color contrast – put simply – is the difference between one color and another. Levels of contrast can vary from high to low. WCAG 2.1 requires color 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 color contrast can affect the way someone receives information.
Here is an example of poor color contrast for web content.
When in doubt, refer to the color 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.
|0:00 – 0:11
Narrator: The Renaissance was a time of rebirth and expansion for religious interpretation, scientific discovery, exploration of new land and the flourishing of the arts.
|Michelangelo’s “The Creation of Adam” painting, Leonardo da Vinci’s “Vitruvian Man” drawing, and Leonardo da Vinci’s “Mona Lisa” painting.
|0:40 – 0:46
Narrator: The Renaissance took place primarily in Italy, but its innovation and ideas reached far and wide.
|Vittore Carpaccio’s “Miracle of the Relic of the Cross at the Rialto Bridge painting, painting portrait of Shakespeare (of England), and painting of religious icons in Russia.
Example 1: The Sixth Sense
|♪ suspenseful music ♪
||A red balloon floats up the stairwell.
Example 2: Compliance Training Video
|Man: Let’s review the quarterly report.
Woman: As you can see here we are down 20% year over year.
|The man places his hand on the woman’s knee.
All of these tips can be found in our Accessibility Checklist. Download it today for easy reference.