You have the power to dramatically improve the accessibility of the documents, websites and presentations you create by building five core skills into your habits and workflows. They may take a little extra time at first, but you’ll get that time back many times over as you begin to create, share and re-use things that don’t need to be “fixed”.
These skills address some of the most common accessibility issues in websites and documents worldwide, as identified by the Institute for Disability Research, Policy, and Practice’s WebAIM Million Report.
-
Alternative (Alt) text
Issue
If you don’t provide descriptive text for images on your website, digital document or social post, the information in those images will be hidden from some users. Alternative (alt) text is a special kind of description designed to work with technology that reads digital content aloud.
How to check
- Try to click and drag your cursor over the image. If no text highlights, it is not a readable image.
- OR, Press CTRL + F (Windows) or Command + F (Mac) and search for a word that appears in the image. If the word can’t be found in the search, the image is not readable by a screen reader.
What to do
Every time you place an image, describe what you see. One approach that can be helpful is to imagine you’re writing an AI prompt to generate a picture like the one you’ve used.
Some AI tools can analyze a photo and suggest alt text. This is fine as a starting point, but AI doesn’t understand context, so you’ll need to review any generated alt text to make sure it makes sense in your context.
Keep it concise. Eliminate “A picture of” from your description and don’t include information in the alt text that can’t be seen and understood from the picture. Try to keep the length to 200 characters or less.
- Posting on a social platform?: Check out Social Alt Text.
- Too much information to convey in a sentence?: Refer to Text description.
Recommended tools
- WebAIM: Alternative Text
- American Federation for the Blind – Writing effective image descriptions or “Alt text”
- Image alt text viewer – Simple chrome extension that toggles on to display the alt text on a page
- How Blind People use Instagram (video)
- Images & Media: Web Content Accessibility (Digital Accessibility Basic Training Canvas course)
Who’s affected
People who:
- Are blind/have visual processing difficulties
- Have slow or weak internet (alt text is what shows up on the screen if the image is slow to load)
WCAG standard
-
Color contrast
Issue
A combination of foreground and background colors that’s difficult to read because of a lack of contrast (ie. light gray text on white background)
What to do
If you change the foreground (text) or background color of an element, make sure the color contrast is 4.5:1 or greater.
Note if you’re using the Michigan Engineering Forty-Two theme: Elements in the Forty-Two design system will have accessible levels of color contrast in their default state. (There are some exceptions and variance around logos, decorative elements and large text. Check with C&M if you’re unsure)
Recommended tools
- University of Michigan brand color palette color contrast chart
- TGPi Colour Contrast Analyzer (also available through U-M managed software)
- WebAIM color contrast checker (see our How To: post)
- Also see: How to: Color contrast checker
Who’s affected
People with:
- Low vision or color deficiencies
WCAG standard
Find more tools and guidance at the University of Michigan Digital Accessibility website.