When someone cannot access an image, a text description provides the important information they need.

Learn

• Add text descriptions to images (video)
• Example image with different descriptions based on context (Twitter thread by Donna Murray)

Try it

• When to Describe Images
• How to Describe Images
• Make a copy of this Google Doc. Edit the images in the document to make them more accessible. (Note: You will use the same copy of the document for other “Try it” activities.)

Explore more

• Alternative text from the AEM Center (video)
• Alt-texts: The Ultimate Guide
• An alt Decision Tree | Web Accessibility Initiative (WAI) | W3C 

When text has low contrast, it can be a strain to read the content, especially if someone is reading under the glare of bright lighting. With good contrast, they can instead focus their energy on gaining a better understanding of the information.

Learn

• Provide sufficient color contrast (video)

Try it

• Adobe Color Contrast Analyzer
• WebAIM: Contrast Checker
• Using the Google Doc copy you made earlier, check/correct any low contrast text to make it more accessible. (You can use the same copy of the document for other “Try it” activities.)

Explore more

• Accessibility at Penn State: Contrast or Luminosity/Brightness

Heading and paragraph styles reveal how the information is organized and make the document/slides easier to scan. Properly marking up section headings with styles also improves navigation for screen reader users.

Learn

• Provide a clear structure with headings from the AEM Center (video)

Try it

• Using the Google Doc copy you made earlier, edit the doc heading/paragraph styles to make it more accessible. (You can use the same copy of the document for other “Try it” activities.)

Explore more

• Add a title, heading, or table of contents in a Google document
• Customize or create new styles in Microsoft Word

Screen reader users can use a shortcut to bring up a list of the links in a document. Links need to be unique and descriptive for them to make sense when they are accessed as a list, without the surrounding text for context.

Learn

• Create descriptive links from the AEM Center (video)

Try it

• Using the Google Doc copy you made earlier, edit links in the document to make them more accessible. (You can use the same copy of the document for other “Try it” activities.)

Explore more

• WebAIM: Links and Hypertext - Link Text and Appearance

Closed captions will make your video/audio accessible to people who are: deaf or hard of hearing, learning a new language, unfamiliar with the topic, in an area with a lot of external noise, etc.

Learn

• Captions, Transcripts, and Audio Descriptions
• The Importance of Captioning
• Caption It Yourself: Basic Guidelines for Busy Teachers, Families, and Others Who Shoot Their Own Video

Try it

• Start by making sure you have the sound turned off on your computer or mobile device. Next, search YouTube for a captioned video on a subject that is new to you. Turn the captions off and watch the video without the sound turned on.
• After watching the video without the sound or captions, turn them on and watch the video one more time. Reflect on your experience with the following questions:
  • What did I miss when the sound and captions were turned off?
  • How crucial is what I missed to understand the topic?
  • What would happen if I were assessed on this content without the benefit of the captions?

Explore more

• Creating Accessible Video from the AEM Center

To ensure that you are designing accessible content, it’s important to include an accessibility evaluation as part of your workflow. You can save time by addressing accessibility throughout the design/development process rather than having to correct inaccessible content later. Remember, if it isn’t accessible, it isn’t finished!

Learn

• Evaluation from the AEM Center (video)
• Designing with Accessibility in Mind: A Basic Checklist 
  (Make a copy of the basic checklist.)

Try it

• Use the Microsoft Accessibility Checker
• Compare the “AFTER” Google Doc to the copy you made/used for the “TRY IT” activities. Edits have been highlighted and include comments noting the specific edits.
• Install Grackle Docs add-on and check the accessibility of a Google Doc you have created. (Note: Follow your organization’s policies and procedures for installing/using add-ons.)
• Practice filling in this (pretend) form using only your keyboard
  • Tab = move through all elements on the page
  • Shift-tab = move backwards through the elements on the page
  • Arrows = move between items in a menu, toolbar, etc.
  • Spacebar or enter = activate all elements on the page

Explore more

Accessibility workshop at Red Hat (video)t: Students from North Carolina’s Governor Morehead School spent time at Red Hat testing web designs and components for Red Hat’s Customer Portal and PatternFly Community. Not only did they provide valuable feedback on accessibility for the visually impaired, but they also got to explore what a future in user experience design might hold for them.