Content is an important part of overall web accessibility. In many situations there is no one correct way to present content, but there are some best practices that should be followed. If you’re unsure how to address a particular situation, or if you would like to have a review conducted of a page or site, email Christy Glaze, web accessibility coordinator.
Provide descriptive text for images
Do provide alternative (“alt”) text for most images, especially for images that contain text, charts or graphs. Alt text should be used in the alt attribute inside and img element.
<img src="chart.jpg" alt="A chart showing Temoc sightings on campus, with 157 sightings in 2019 and 42 sightings in 2020." />
What should alt text say? This really depends on context. Ask yourself, what I am trying to convey to the user by including this image? What does the user already know from surrounding context?
- For example, on an individual faculty member’s profile page, a portrait of the faculty member might have the alt text, “Portrait of Dr. Einstein.” Including the person’s full title here would be excessive.
- On a page about campus housing, a photo of a dorm room might have the alt text, “A dorm room with a bed and desk.”
- A graduation photo might have the alt text, “A student posing with their diploma.”
Don’t provide alt text that is repetitive. If an image is described in text (for example, if a graph is discussed in detail in the text of a page, or if a visible caption is used), duplicating that information in the alt would be redundant.
Always provide alt text for images that are links. If an images serves as a link, it must have alt text that conveys what the destination on the link is. Don’t write this as a URL but as a phrase that would make sense to a human. For example, an icon of a stack of books that is a link to the McDermott library site, should have alt text that says, ‘McDermott Library. Stack of books.’
- Note: Don’t use “link” in your alt text on linked images. Assistive technology will announce that it is a link. In the McDermott Library example, the linked image and associated text might be announced as “Image link. McDermott Library. Stack of books.”
Provide captions or transcripts for video and audio
Do provide captions or transcription of all videos and audio, including live video.
- Microsoft Teams provides an option for live captions, but it won’t be 100% accurate. If the meeting is recorded, closed captions will need to be added afterward before the recording is shared. This won’t describe visuals that are on screen, so consider having the speaker describe visuals during a meeting.
- There are also paid services that can provide live captioning.
Do identify who is speaking.
Do describe visuals and actions seen in a video. If a video includes visuals, such as charts or graphs, these should be described in an accessible text format. Consider making available a separate transcript file that includes description of visuals, actions that happen in the video and audio cues such as music or sound effects.
Don’t rely exclusively on auto-generated captions. Auto-generated captions (such as what is provided by YouTube) can be a good starting place but are not sufficient. Auto-generated captions should be carefully proof-read and edited for accuracy, and punctuation and speaker identification should be added.
Note: the captioning/transcription requirement does apply to third-party content. If you embed on your website a video or audio produced by another organization, you are still responsible for providing accessible text. If you link to third-party content (i.e., send users off of your site), you are not responsible for the accessibility of that content.
- Captions, Transcripts, and Audio Descriptions from WebAIM
- Add your own subtitles & closed captions (YouTube)
- Use automatic captioning (YouTube)
- Edit captions (YouTube)
- Captions and subtitles (Vimeo)
- Siteimprove tutorial on accessible video
- University of Washington has some good guidelines with info also about adding captions, to Zoom, Facebook, etc.
Writing link text
Do use concise, descriptive link text.
Don’t use link text that is vague, such as “here.” Assistive technology users may navigate a web page by following links that are taken out of context. Take this sentence, for example: “UT Dallas is awesome because of our great faculty, who you can read more about here.” “Here” taken out of context is meaningless. A better way to link this would be like this: “UT Dallas is awesome because of our great faculty.”
Don’t repeat link text for different destinations. This commonly occurs on pages such as news listings where multiple items are listed and each is followed by a link with the text “read more.” Taken out of context those “read more” links can’t be differentiated from one another. A better approach would be to link the headlines of the articles and omit “read more.”
Don’t instruct users to click. “Click” should be avoided as many devices (mobile, tablet, assistive technology) don’t support clicking with a mouse.
Do use headings to convey the subjects of section of content, and use them hierarchically. Each page should have exactly one level one heading, which should be followed by one or more by a level two headings, and so on.
Don’t use a heading simply because of the visual styling it may provide. (Do contact Web Services if you would like assistance with styling text.)
Don’t set text to justified as it may be more difficult to read for people with dyslexia or some eye conditions.
Don’t use all caps. Assistive technology interprets and announcements capital letters and all-capitalized words differently than lower or camel case words. All caps may be read as acronyms. For example, “ABOUT US” might be interpreted as “About U.S.” instead of “About us.”
Ensure your web pages have good color contrast
Maintaining high color contrast ratios is important for several reasons – it makes reading easier for people who have vision differences, such as color blindness, and it ensures your content remains visible on range of devices irregardless of variations in screen displays. Contrast can also be an issue in different lighting scenarios, such as when viewing a page on a phone outdoors in bright sunlight.
- Do stick to the styles and colors that have been provided as part of your site’s design.
- Do ask Web Services to provide additional colors and styles for text if what is available in your site’s design is not sufficient.
- Don’t rely on your own eyesight to judge if a color combination meets the standard. Use a tool to check, such as WebAIM’s Contrast Checker.
- Don’t rely on color alone to convey meaning. Colors may not been seen as intended either because of screen/display variations, color blindness or difference in perception of color meanings based on cultural background.
Color alone to signify which classes are required. Colors will be visible to some people.
Color alone to signify which classes are required. Colors (and their associated meaning) will not be visible to some people.
Color and text to signify which classes are required. Colors will be visible to some people.
Color and text to signify which classes are required. Colors will not be visible to some people, but the text will be visible and will be accessible via assistive technology.