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

1. Understand the tools
   • TidyUP, the Canvas integrated tool, helps you identify and remove unused, duplicate, and outdated content. Watch the “Getting Started with TidyUP” short training videos to learn how to use the tool and execute a streamlined workflow before remediating your documents and course.
   • UDOIT, the Canvas integrated course accessibility checker, helps you resolve accessibility issues in your course. Watch the “UDOIT” short training videos to learn how to remediate your documents and course.
2. Locate TidyUP in your Canvas course
   • Access TidyUP from your Canvas course navigation menu.
   • Scan your course to see a quick way to view all the content in your course, clean out files and content that are no longer needed.
3. Locate UDOIT in your Canvas course
   • Access UDOIT from your Canvas course navigation menu.
   • Review your course accessibility score to understand where improvements are needed.
4. Explore the UDOIT Dashboard
   • Review your course’s scan results, including: Number of accessibility issues identified, number of files scanned, verall accessibility score and progress.
5. Get familiar with document and Canvas remediation best practices
   • Attend an ATS accessibility training session
   • Visit Division of Informational Technology Best Practice accessibility webpage
   • Attend a Division of Informational Technology training session

1. Use TidyUP to review your course 
   Before diving into remediating your course and documents, take time to remove duplicates, delete unused files, and organize content in TidyUP.
2. Use TidyUP to streamline your course accessibility workflow
   Now that you have organized your course and deleted unused and duplicate files, using UDOIT will streamline your process to remediate your course.  

1. Start with the easiest accessibility fixes found in your course web-based content
   • Open UDOIT and Select the “Home” tab at the top of the page, next navigate to the “Ways to Get Started” section found on the right of the page and view your “Easiest to Fix” issues.
   • Review the list of documents and click “Review” next to each file title to see specific issues. This will automatically take you to the “UFIXIT” tab and will walk you through the process of remediating your Canvas web-based content and documents.
2. Review your uploaded course files
   • Select the “Review Course Files” tab at the top of the page.
   • Review the list of documents and click “Review” next to each file title to see specific issues. Here you will be given an explanation of why your file is not accessible, opportunity to replace with an accessible file, and create an alternative accessible formats for your students to access.
3. Continue to fix and verify that your course is accessible
   • Address the issues directly within UDOIT whenever possible.
   • Continue working through your list of specific issues using the “Review” button.
   • As you fix more items, your overall course accessibility UDOIT score will improve.
4. Provide Captioning for Your Videos
   • Check all videos for captions. Ensure every video, whether embedded in Canvas or linked from another platform, includes accurate captions.
   • In your Canvas course review your videos for accuracy, punctuation, and speaker identification. Utilize the integrated tool Kaltura Media Gallery to edit your multimedia captions.
5. Provide transcripts for your audio-only media
   • Provide written transcripts for podcasts, recorded lectures, or other audio material that is non-video content. Provide a transcript that conveys all meaningful spoken content.
   • In your Canvas course utilize the integrated tool Kaltura Media Gallery to edit your transcripts.
6. Use CSULB captioning resources
   • If you’re using a video that you do not own (i.e., YouTube or Vimeo), correct the auto-generated captions for accuracy and punctuation using CSULB self-serve Beach Captions tool.
   • Submit an Audio and video remediation support TDX ticket requesting captioning support for your multimedia. This service ensures accurate captions for instructional videos hosted in platforms such as Kaltura or YouTube are accessible.
   • Visit the Bob Murphy Access Center captioning services webpage for step-by-step tutorials on captioning and to access their Captioning Guide. 

1. Re-run UDOIT scans periodically to check for remaining or new issues
   Access UDOIT from your Canvas course navigation menu and select the “Scan Now” button.
2. Make accessibility part of your course design routine
   • As you create new modules or upload materials, use UDOIT to check content early, before the course goes live.
   • Choose accessible templates, headings, and color-contrast-friendly designs in Canvas and documents.
3. Stay informed about accessibility standards
   • Attend ATS or campus workshops on accessible design.
   • Explore updated resources on the ATS accessibility webpage and Division of Informational Technology (DoIT) website to stay current on best practices and evolving requirements.
   • Visit the CSULB Accessibility landing page to find campus accessibility services.
4. Contact campus partners for support
   Contact ATS instructional designers and accessibility staff at ATS-ID@csulb.edu for course reviews, remediation questions or accessibility technology training.  
5. Model inclusive teaching
   • Seek student feedback to understand how accessibility impacts their learning experience.
   • Include accessibility statements in your syllabus, visit the ATS accessible course design page for examples. 

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