Designing for Accessibility

Designing for Accessibility

When teaching online, it is crucial to design for accessibility. Accessibility means that people can do what they need to do in a similar amount of time and effort as someone that does not have a disability. For something to be accessible, it means that the people accessing it are not excluded from using something on the basis of experiencing a disability. An example of this would be video with captioning.


Making content that is accessible is important because it enables students with disabilities to access the content they need without needing to specifically request access. On top of this, it provides increased educational opportunities to all students. Whether you're creating resources yourself or finding things to share with your students, you want to make sure that whatever you're sharing with them will be accessible for students with disabilities


Accessibility is a key component of equity, which is a broader topic that—in the context of higher education—addresses issues like designing courses to redress historical and present inequalities along lines of race, class, gender, and other socially salient categories. For more information on equity-minded online instruction, visit our resources on Equity and Online Education.

Please keep in mind that designing for accessibility is not the same as providing accommodations. Students with disabilities might still need additional accommodations from the Disability Resource Center (DRC). Contact the DRC for more information: drc@ucsc.edu.

Tips for Accessibility

Fortunately, it’s easy to incorporate accessible design into your course materials and class meetings. Here are some tips for incorporating accessibility into your class.

Caption videos

  • 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.

Use descriptive links

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.

Use colors with good contrast

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.

Avoid using colors to convey meaning

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).

Provide alt tags on images

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

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.

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

For PDFs: text is selectable

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.

For synchronous sessions:

Use live transcription in Zoom meetings

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.

Read questions out loud before answering

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 images

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.

Resources

Accessibility Corps

Accessibility Corps is a flexible service that is designed to help you with making your courses more accessible for all of your students. This program pairs trained student employees with instructors who are interested in improving any aspect of their course(s) for accessibility. Accessibility Corps is a collaboration between Online Education and the Disability Resource Center (DRC).

Accessibility Corps provides the following services:

  • Caption creation/editing/review of your pre-recorded lasting materials — we’ll work with you to create captions, or to review/edit existing captions.

  • Review of material(s) for accessibility and document remediation — we’ll review individual course materials.

  • Review of existing courses for accessibility — we’ll holistically review your existing course(s) in Canvas for areas where accessibility can be enhanced.

  • Consultation for designing for accessibility — we’ll meet with you to discuss designing courses to make them maximally accessible.

Please visit this form for more information and to request Accessibility Corps services.