Accessible Course Design

Faculty can create a welcoming classroom environment by including an accessibility statement in their course syllabus that:

• Affirms a commitment to inclusion and access.
• Encourages early communication.
• Uses person-centered, inclusive language
• Emphasizes inclusive course design
• Maintains a supportive, collaborative tone displaying equal responsibility between faculty and the student.

Example:
"As your instructor, I am committed to creating an inclusive and accessible learning environment for all students. If you anticipate or experience barriers in this course material, technology, or assessments, please contact me immediately so we can find a workable solution. Please feel free to discuss your concerns and progress with me at any time."

"Students with disabilities who require reasonable academic accommodations are strongly encouraged to register with the Bob Murphy Access Center (BMAC) each semester. Students must submit supporting disability documentation to BMAC and provide faculty of any BMAC verification of accommodations as early in the semester as possible. 

BMAC is located in the Shakarian Student Success Center, Room 110 and can also be reached by phone at (562) 985-5401 or via email at bmac@csulb.edu."

Resources

• Kaltura & Canvas
  Video content uploaded to Kaltura is automatically enhanced with video captions and text transcripts. However, further editing may be needed to bring captions to 100% accuracy. Audio descriptions can also be added during the editing process.
• Zoom Captions & Transcripts
  Captions and transcripts are automatically generated in synchronous Zoom meetings which can also be recorded. However, some editing may be needed to bring captions to 100% accuracy. Automated captioning is supported across various languages and includes manual captioning.

When uploading an image to Canvas or a website, in most cases, you will be given a prompt or a field where you can enter "alt-text" to describe your image. This alt-text will be read by a screen-reader device used by people with visual disabilities. If you are using images that are unrelated to the content and simply serve as visual interest, note them as “decorative” in the alt-text field.­­­­  

Simple Images

Follow these alt-text best practices (Non-text Content | WCAG 1.1.1 Level A Tutorial):

• Use descriptive and concise alt-text.
• Avoid using the words “image of” or “photo of” in the description.
• If your image is a logo, state that it is a logo in your alt-text description.
• Avoid using images containing detailed text inside the image itself. If you must use images containing text, include the text along with the image description in the alt-text.
• Do not duplicate nearby text in the alt-text description.

Complex Images

For complex images containing more information than can be conveyed in a short phrase or sentence, consider generating a long description. Examples of complex images include:

• Graphs, tables and charts, including flow charts and organizational charts.
• Diagrams and illustrations where the page text relies on the user being able to understand the image.
• Maps showing locations or other information such as weather systems.

In these cases, a two-part, alt-text is required:

1. Short description: Identify the image and indicate the location of the long description.
2. Long description: Include text outside of the image with essential information, such as in the body of the page adjacent to the image.

Graphs and Charts

• Include a short description using the alt-text field on simple chart; include the title and the chart-type (e.g. bar, pie, stacked, etc.).
• Include a long description (text outside of the image) to provide further detailed information, including scales, values, relationships and trends that are represented visually. WCAG 1.1.1 Level A: Non-text Content, WCAG 1.1.1 Level A: Tutorial
• Provide alternative formats (e.g., Excel) for detailed or complex charts and direct students to those options.
• Provide a unique, identifiable label near the chart to identify it; refer to the label name in your content rather than page location (e.g. "See chart at right.").

Resources

• Canvas Accessibility Checker
  • This guide provides step-by-step instructions on how to identify and add missing alt-text for images in your course using the standard editing tools available in Canvas.
• Image Captioning in Word
  • Reference this tutorial for image captioning directly within Microsoft Word application.
• HTML Image Captioning
  • Reference this guide by W3Schools if you’re creating content directly within Canvas and would like to add an image caption using HTML tagging.
• Web Accessibility Initiative's Images Tutorials
  • This resource provides information on the purpose for a variety of course images and offers strategies for generating their alternative text in ways that describe and support instructional delivery.
• Providing Text Alternatives for Emojis: A great guide on how to provide alt-text in a web format in case you would still like to include emojis in your course but do so sparingly.
  
  
   

Text

• Contrast: Use sufficient contrasting colors between text and background: WCAG 1.4.3 Level AA: Contrast
• Avoid using "justified" text alignment as it creates extra spaces between words: WCAG 1.4.8 Level AAA: Visual Presentation
• Do not use color to convey meaning, to indicate an action, or to emphasize significance. For example, avoid using red-colored text to convey importance (color-blind individuals may not see this).
• Use consistent color combinations across all pages.
• Use the WebAIM Color Contrast Checker to validate the color contrast between foreground and background.
• Use simple language when possible; no jargon.
• Choose sans serif type fonts such as Arial, Verdana, etc. for readability.
• Use no more than 3 different font types per page.

Tables

• Use tables for data, not for layout purposes.
  • Use simple table structures and include header rows.
  • Avoid merged or split cells, as they can confuse screen readers. WCAG 1.3.1 Level A: Info and Relationships, WCAG 1.3.1: Table Tutorial
  • Use tables only for organizing and summarizing data.
• Include unique titles and caption text for data tables.
• Define row and column headings clearly.
• Do not embed a table as an image file.

• Transcript: Provide transcripts for all audio content. Prerecorded audio-only content must have a transcript of dialog, narration, and other meaningful sounds. This allows users who are deaf, hard of hearing, or who prefer reading over listening to access the information. Include all spoken dialogue, important sound effects, and any relevant background noises that contribute to the understanding of the content. WCAG 1.2.1 Level A: Audio-only and Video-only (Prerecorded), WCAG 1.2.1 Level A: Tutorial
• Autoplay: A method must be provided to pause, stop, or hide any media content that begins playing automatically and which lasts 5 seconds or more. WCAG 1.4.1 Level A - Audio Control
• Audio Control: Use accessible media players that allow users to stop, pause, mute, or adjust volume for audio that automatically plays on a page for more than 3 seconds. WCAG 1.4.1 Level A: Audio Control
• Background Sounds: Background sounds in prerecorded audio-only content SHOULD be minimized (20dB lower than foreground sounds, except for occasional sounds of no more than 2 seconds) or eliminated during narration or dialog, or a method must be available to turn off background sounds. WCAG 1.4.7 Level AAA: Low or No Background Audio
• Sound Quality: Ensure audio quality is clear and at an appropriate volume. Clear audio quality is crucial for all users, especially those with hearing impairments who rely on clean audio to use hearing aids or other assistive listening devices. Use good-quality microphones and avoid background noise during recording. WCAG 1.4.7 Level AAA: Low or No Background Audio
• Audio Captions: Use descriptive titles and summaries for audio files. Include total run time. WCAG 1.2.2 Level A: Captions (Prerecorded)
• Recorded Speech: Speak clearly and slowly with appropriate pauses to give people time to process information. WCAG 1.2.1 Level A: Audio-only and Video-only (Prerecorded)

Resources:

• Kaltura
  Kaltura is a platform that allows CSULB users to upload various media formats, including audio files.  Kaltura’s accessible media player allows users to stop, pause, mute, or adjust the volume for audios and videos. Users can also select the transcript icon to display the transcript.
• ADA Site Compliance: How to Make Audio Content Accessible
• W3C Making Audio and Video Media Accessible

Links

• Identify the purpose of the hyperlink as part of the hyperlink name (e.g., “Read our accessibility guide” instead of “click here”). WCAG 2.4.4 Level A: Link Purpose (In Context)
• Provide unique words on linked text (e.g. don't repeat "Read more" throughout content).
• Embed links into text rather than pasting the URL itself into the document.
• Use concise, yet descriptive labels with key words on linked text.
• Avoid using “click here” as part of the linked text.
• Reserve the use of underlines for linked text only.
• Provide file sizes along with links to documents to inform the download speed.
• If special software is required to open or download content, provide students with a link to the software (e.g. Adobe Acrobat).

Lists

• Lists:
  • Utilize ordered (numbered) and unordered (bulleted) lists to organize information clearly.
  • Avoid using complex nested lists. This helps users understand the relationship between items. WCAG 1.3.1 Level A: Info and Relationships.
  • Use lists to present complex information in pieces or steps so that it's easier to scan and understand.
• Use the list formatting function in the text editor rather than adding your own dashes or other text elements. This formatting function adds code to the styles which can be better read by screen readers.
• Use bullets (unordered lists) to group items that do not have a specific order or hierarchy in a list.
• Use numbering (ordered lists) for groups of items that have specific steps or order in a list.

Resources

• WCAG Success Criterion 2.4.4 Link Purpose
• WebAIM: Links and Hyperlinks
• Links: Accessible vs. Inaccessible (Video 1 minute 8 seconds)
• CCC Accessibility Center: Making an Existing Link Accessible (Video 37 seconds)
• CCC Accessibility Center: Creating an Accessible New Link (Video 52 seconds)

• Consistent Layout: Maintain a consistent layout (aesthetics, headings, structure, naming conventions, font sizes, and font families) and structure throughout the document to avoid confusion. WCAG 3.2.3 Level AA: Consistent Navigation.
  • Consider starting your course design using a template built with accessibility in mind: Canvas Layouts.
• Navigation Aids: Use bookmarks and hyperlinks to help users navigate documents more easily.
  • Online Course Navigation
    • Provide a “Start Here” section with a course overview and instructions.
    • Include an accessibility statement to demonstrate your commitment and instructions for students who need accommodations.
    • Design your course so that content is easy to find and navigate with a consistent structure and naming conventions; keep the order of content items the same within each module or sub-module.
    • Encourage students to use descriptive titles on Discussion posts.
    • Use short, meaningful, and simple titles on your modules, submodules (e.g., Week 1 Topic Name, Module 1 Topic Name), resources, and activities.
• Sections and Section Headings: Use sections to group related content thematically and chunk paragraphs into blocks, allowing enough white space.. This helps users understand the context and purpose of different parts of the document. WCAG 2.4.10 Level AAA: Section Headings
• Headings:  Heading styles such as “Heading 1, Heading 2…”  must be used to create a clear hierarchy of content. Use descriptive and meaningful heading structure. This helps screen readers navigate the document efficiently.nUse HTML tags to define structure such as Heading 1 for the title, Heading 2 for major sections, Heading 3 for subsections, etc.
• Make sure each heading is titled uniquely.
• Label consistently all links, files, and icons with simple and descriptive names.
• Avoid creating a busy page; incorporate white space.

Resources

• Canvas Accessibility Checker
  • Reference this Canvas tool to help establish meaningful structure to all textual information and help format hyperlinks to external resources.
• WebAIM: Creating Accessible Tables - Layout Tables