Designing for Accessibility

• Caption everything. Captioning increases accessibility for all learners, especially for deaf or hard-of-hearing students or non-native English speakers. Captioning can also help people focus on the content, improve comprehension and increase engagement. To get started with captioning, use YuJa to auto-caption all uploaded videos. To increase accuracy of your pre-recorded videos, request caption correction from Accessibility Corps.

  • A Rising Tide: How Closed Captions Can Benefit All Students

Use descriptive links instead of pasting website URLs into documents. A screen reader will read the pasted URL character by character, so “www.online.ucsc.edu” becomes “double-U, double-U, double-U, dot, Oh-En-El-Eye-En-E...”. This might not seem like a huge annoyance until you consider how long and nonsensical some URLS can be and how often they are unceremoniously pasted into a page. When descriptive links are used instead, a screen reader announces "link" before reading the linked descriptive text. This video powerfully demonstrates this in less than a minute.

Tips for writing good descriptive text for links

1. Identify the purpose or function of your link and avoid simply using "click here". Compare these examples: "Click here to read the article" vs. "Read more about teaching online." The second example better informs the reader about the context and relevance of the included link.

2. Keep link text visually distinct and formatting consistent. Linked text is usually underlined and shown in blue text. Normally, text editors in Canvas or emails will do this automatically — but it's still worth mentioning. 

Visit this page to learn more about the screen-reader experience. This page also includes video examples with a screen-reader, and a tutorial on how to add links in Canvas.

Make reading and decoding words, numbers, and symbols easy for all readers so they can focus on comprehending the meaning of content, not making sense of the format. Individuals with learning disabilities may have trouble manipulating letters numbers or words, and some assistive technology like screen readers might not understand or correctly read aloud the sentence as intended.

Tips for clear formatting:

• Avoid using Roman Numerals as these can confuse readers and likely are read incorrectly by screen readers or text-to-speech tools.

• Use punctuation correctly to ensure any assistive technologies read it as written. Avoid using symbols to decorate or call attention to headings or subsections, like "*Lesson 1*".

• Use a dating format that can be read and understood in any culture. 03/05/2021 can either be interpretted as "March 5th 2021" or "May 3rd 2021". Writing out the month in words can avoid this confusion.

For more guidance, visit this W3 page: Use Clear, Unambiguous Formatting and Punctuation.

Use colors with good contrast. Any colors used should have sufficient contrast. The colors should provide enough contrast between the text and its background so that it can be read by people with moderately low vision. If contrast is too subtle, it might be difficult to read the text or page.

Acceptable colors are set by contrast ratios as defined in Web Content Accessibility Guidelines 2.0 (WCAG 2.0). There are a number of resources to determine if certain color combinations have enough contrast. 

• • Check colors used in a webpage

  • For hexcodes: WebAim’s color contrast checker

In addition to the color advice above, avoid using colors to convey meaning. As many as 1 in 12 men have some form of color blindness, so do not rely on color alone to convey the significance of something. Use formatting styles like headers or bold instead.

For example, the text below uses red denotes “incorrect” and green denotes “correct”.

Please contact Sammy and I.
and
Please contact Sammy and me.

For someone who has some form of color blindness, the example above could potentially look like this:

Please contact Sammy and I.
and
Please contact Sammy and me.

Instead, you can do something like this:

❌ Please contact Sammy and I.
and
✅ Please contact Sammy and me.

where “incorrect” and “correct” are represented with recognizable symbols: a cross and a check mark, respectively.

A good way to simulate some color blindness is by using Color Oracle. Color Oracle applies a full-screen color filter to allow you to see what your screen would look like for someone with color blindness, as well as in grayscale (a universal contrast test).

Alternative text (also known as 'alt tag') is what a screen reader will read in place of an image. If there is no alt text, the user will only hear “image”. These are some best practices for providing alt text descriptions for images:

• • Do not use the word “image”, “picture”, or “photo”. Instead of “An image of the Porter Squiggle at sunset,” write just “Porter Squiggle at sunset.”

  • Do not write a story. Keep the description as short as possible.

  • If an image is purely decorative, check the “Decorative image” box or write “Decorative” in the description. If an image is not purely decorative, do not use this.

  • If your image already contains a caption, do not repeat it. Where the caption provides an accurate description, it is fine to leave the alt text field blank.

Use heading styles and hierarchy appropriately. Using headers helps readers get a sense of the page’s organization and structure. Done appropriately, screen reader users will also benefit from headings. Screen readers can navigate through headings and skip to the section that they want to listen to. 

Headers are a specific style and cannot be created from just increasing the font size or bolding text. The distinction is important because of the underlying code associated with text formatting.

• In 2017, WebAIM asked how screen reader users preferred to find information on lengthy web pages and almost 70% of respondents said they preferred to use headings on a page.

An example of a screen reader using headings for navigation (video)

If text on a page is not recognized as text (but as an image), a screen reader won't be able to read it. To make sure that doesn't happen, check your PDFs for text recognition: try to select a portion of text to copy/paste. If you are not able to do that, and only area-based selection is available, the text is not screen-readable. Try to obtain a better version of the document, or contact Accessibility Corps for document remediation.

In Zoom meetings or webinars, the host can enable Zoom’s live transcription feature to provide captions. This feature can be used to enhance the general accessibility of a meeting and is also particularly helpful for hearing individuals who benefit from audio prompts and individuals who use captions to aid English language comprehension. 

To start Closed Caption or Live Transcript in a Zoom meeting or webinar:

• • 1. In a Zoom meeting or webinar that you are hosting, click Closed Caption or Live Transcript. 

    2. Select Enable Auto-Transcription: This allows the system to start providing live transcription. Participants will be notified that this service is available.

For additional options, click the caret (^) on the Live Transcript button to hide subtitles (only affects your view), view full transcript or edit subtitle settings.

Note that live transcription is currently not supported in breakout rooms, nor will it be visible in a recording.

More information about Zoom Live Transcription is available on the Zoom Support website.

In Zoom meetings, if someone asks a question in the chat, read the entire text of the question out loud before answering it. This context can be crucial, especially during playback of a recording, which often doesn’t include the Zoom chat. 

Consider these different responses: 

• “Yes, it will be included”

• “Sammy is asking if chapter three is going to be on our exam — yes, it will be included”

Describe any images in your slides. This helps students who are blind or low-vision and it might also serve as a good way for you to describe the context of the image, or why you chose the image and how it is relevant to the slide or discussion overall.