Universal Design

About

This guide was created to familiarize faculty with campus resources, recommendations, and departments that offer associated services related to accessibility and Universal Design for Learning (UDL). The Teaching & Learning Innovations (TLI) team is committed to supporting CI faculty in the development and instruction of high-quality, accessible courses that benefit all students at CSU Channel Islands.

In addition to the content on this page, there are also several campus services to become familiar with.

Library Course Reserves

Disability Accommodations and Support Services (DASS)

DRP Website

ATI Accessibility Checklists

UDL in Higher Education

This is a great introductory video about Universal Design for Learning in Higher Education. More information can be found in the Helpful links section.

Accessibility Basics

Text Formatting

Headers are an important organization tool; they help readers better understand the main points of each section and allow them to skim the page.

From an accessibility perspective, headings are an absolute necessity so students using screen readers can navigate through a Content page. When headings are used correctly, they allow individuals to move through the information based on heading topic rather than line-by-line. The use of headings is also a great way to 'chunk' material into digestible pieces for students and prevents cognitive overload.

w3.org Heading Example

Heading Tips

  • Use headings that are descriptive and concise.
  • Nesting or Semantic Structure; be sure your headings are in order.
  • Don't overdo it: Not all paragraphs need a subheading. Only use headings if you have more than one point per heading level.
  • Use headings to enhance, not replace: Headings (and subheadings) should supplement the substance of your content, not take the place of your topic sentences.
  • Never create headings manually.*

*Manually creating headers with formatting features such as: font size, bold, and underline may look nice, but these formatting features don't have the HTML tags that screen readers need to identify them as headers (e.g. Underlined text denotes a hyperlink). Underlining your text may confuse sighted users, who will expect the text to then link them to another page.

Using Lists

  • Never create lists manually.
  • Always use the built-in list styles when creating a bulleted or numbered lists.

Using Hyperlinks

Properly formatted hyperlinks help students scan for important information and identify outside resources. When a screen reader identifies a hyperlink, it states 'link' so it is best to avoid using 'link' or 'link to' in your hyperlinked text.

Screen readers are also able to make a 'Links list' which allows users to listen to the list of available links on a page and navigate directly to a desired link rather than listening to the entire page, line-by-line. However, a 'Links List' is only helpful when link text is descriptive.

Tips for Hyperlinks

  • Identify the purpose/function of the hyperlink as part of the link name
  • Be as descriptively possible without being overly long. Screen reader users must listen to full link before moving to the next one on the list.
  • Integrate the link into your sentence-- in doing so, sighted students will see the link and screen readers will identify it.

Color Contrast

Color contrast-- the difference in color between the background and the text/image (foreground). Everyone suffers when color contrast is not high; but especially those with low-vision or who are color blind.

Color and images add visual appeal to your content. However, in order for color to work it must be perceivable and should not interfere with learning. Color blindness is a common condition--a reduced ability to distinguish between certain colors that primarily affects males.

Be sure to check the contrast of any custom colors you use throughout your course via a free online color contrast tool. Some recommended color contrast tools are:

ACART Communications: Contrast Checker

Colour Contrast Analyser

Avoid using color as the sole means of providing information or emphasis. Instead consider using both shape and color.

Helpful References

Color Deficient Vision (Color Blindness) Examples

Color Contrast Examples

Alternative Text

Alternative text, or alt text, is a word or phrase which provides a clear text alternative of the image for screen reader users.

Giving images alt-text allows screen readers to explain the image to people with sight challenges and it can also be useful when an image doesn't load correctly.

Note: not all images need alt text; decorative images null alt-text [alt=""]

Creative Commons & Digital Copyright

Creative Commons (CC) is an example of an open license that authors may choose to apply to their copyrighted works. If you are looking for images or music for your online class or any type of media you are creating for your instructional materials, consider using CC-licensed content.

Helpful Links & Sites to Use for Creative Commons Images

Copyright Basics Video

Unsplash

Pixabay

Pexels

Creating Accessible Google Docs

Introduction

CI Docs is CSU Channel Islands instance of Google Drive and is a great tool for collaboration. This page has been created to equip you with methods and suggestions for increasing the accessibility of documents produced through CI Docs. Please note that materials created in CI Docs may not be as accessible as material created in Microsoft Word.

The following topics will be covered as they relate to accessibility in CI Docs:

Headings

Paragraph headings provide context and a way to navigate quickly for users of assistive technologies like screen readers; these technologies ignore text size and emphasis (bold, italic, underline) unless certain paragraph styles (i.e. Headings) are used.Styles modify the formatting of all occurrences in a document, so you can quickly change the format of all Headings of a particular level (you can still override global settings by changing the format of an individual piece of text, regardless of style assignment). Additionally, Headings can be used to automatically generate a Table of Contents or bookmarks in a document.

Headings should be selected based on their hierarchy in the document. Start the page with a  H1 or Heading 1 which describes the overall document content. Follow it with sub-headings (Heading 2) and sub sub-headings (Heading 3), and so on. Items of equal importance should have equal level headings, and heading levels should not be skipped (i.e., a Heading 3 can't be the first heading after Heading 1; Heading 2 can't be skipped).

To make an item a heading in Google Docs, select the Styles drop-down menu, located to the left of the font drop-down menu.

Updating text to a Heading 1

The Headings can also be called with keyboard shortcuts:
For PCs; Ctrl+Alt+1 (Heading 1), Ctrl+Alt+2 (Heading 2), etc.
For Macs; Cmd+Opt+1 (Heading 1), Cmd+Opt+2 (Heading 2), etc

Heading styles help a screen reader to navigate through a CI Doc page. Heading 1 should be used as the page title, and Heading 2 is used for subsections and Heading 3 is used for sub-subsections respectively.

Images

When using images it is important to make sure they are accessible by adding Alternative Text, or Alt Text. Alternative text for images, charts, graphs, and tables is vital to ensuring that users with visual impairments have access to information included in these visuals.

This descriptive text should be limited to 120 characters for simple images, while the alternative text for graphs, tables, and complex images (such as detailed maps and diagrams) should give a brief summary of the included information. Alternative text should provide sufficient information so that students who are unable to see them are still able to understand what they convey. Images used for purely decorative purposes (i.e., those that do not provide any meaningful information) should not have alternative text. If the body of the document already contains a sufficiently detailed description in close proximity to the image, the alternative text can simply identify the image so that the reader knows when it is being referred to.

While there are no hard and fast rules for determining what alternative text should say (it depends on the image, its context, the intent of the author, etc.), one simple trick is to imagine describing the image to someone over the phone. The more important an image's content is, the more descriptive the alternative text should be.

For charts and graphs, chart type (i.e., bar, pie, line, etc.), data type or axes, overall trends or patterns, and relevant data points should be described. For example, a simple chart might have the following alternative text: "Bar chart of number of traffic fatalities in Los Angeles county from 2008-2010. Fatalities have increased for the last two years. There were 121 fatalities in 2008, 157 in 2009, and 160 in 2010."

  1. Upload and embed the image
  2. Click the image file
  3. Format > Alt Text
  4. In the Alt Text window, enter your alternative text in the Description field

Add Alt Text to image in CI Docs

Color Contrast

It is essential that appropriate contrast exist between text and the background. In general, lightly colored text should have a darker background and darkly colored text should have a light background. Colour Contrast Analyser is a helpful tool for testing the color contrast of your content and is available for Windows and Macs. For more assistance on how to test the accessibility of your color contrast, contact tlinnovations@csuci.edu.

Lists

Like headings, using the built in bulleted list and numbered list styles to create lists ensures that screen readers can effectively read the listed items. Manually inserting any of the list items will not help. Any numbered list that has multiply layers should use a different numbering scheme for each level.

Use the 'Insert List' icons on the formatting toolbar to create a list.

Adding a numbered or bulleted list in CI Docs

Legibility

It is also important to ensure your document is easy to read, not only for those with assistive technologies, but also those that don’t use them.

Sans-serif fonts are considered more legible fonts for monitors than serif fonts.

Serif and Sans Serif fonts

Color plays an important role in any document. The color scheme itself should have contrast between light and dark without going to the extreme. Too little or too much contrast can make the document difficult to read for those who are colorblind or with low vision. Certain color combinations, such as bright colors, can cause headaches and make it uncomfortable to read content.

Table of Contents

To improve quality of navigation for assistive technologies, it is recommended to add a table of contents. Throughout the document you must designate headings, because these are what are used to generate the table of contents section. Using headings is also an accessibility best practice within documents. Doing so also provides other advantages for the author including the ability to rapidly modify the overall document style without having to change each individual header.

Select Insert > Table of Contents

Inserting Table of Contents in CI Docs

This content is adapted from resources by Phil Deaton and Michigan State University and is shared under a CC-BY-NC license.

Helpful Links and Contacts

UDL in Higher Education

This website was created by CAST and focuses on Universal Design for Learning in Higher Education.

Accessibility for Populr

This page features tips and recommendations to make your Populr pages more accessible.

Video Captioning Request

This form can be completed to request up to three class videos (per submission) to be captioned.

Digital Syllabus Gallery

This page serves as a gallery of example syllabi created by CI Faculty, as well as, syllabi templates that can be customized for your course.

Digital Copyright Basics

This page is dedicated to familiarizing you with digital copyright basics including creative commons licensing. Reusing CC-licensed work requires you to be able to decode visual icons so you understand what you can and can't do with the work.

Important Campus Contacts for Accessibility

Teaching and Learning Innovations: Consultations and Ideas for improving accessibility in your courses

tlinnovations@csuci.edu or (805) 437-3788

Library: Course Reserves and Streaming Accessible materials

reference.librarian@csuci.edu or (805) 437-3362

DRP: Questions about supports for students with identified disabilities in your courses

accommodations@csuci.edu or (805) 437-3331