Accessible Course Design

There are two main elements you must consider when developing accessible courses:

  • STRUCTURE:  includes navigation, module organization, titles, and labels.
  • CONTENT: includes materials you author or import such as written text, documents, videos, images, presentations, and other materials.

Support Resources

Take advantage of these resources to support your accessible course development and your students:

  • Accessible Technology Program: a technology and accessibility resource lab that provides support and services for students with disabilities, faculty, staff, and the campus community
  • Anthology Ally: Available in Canvas, this service automates the creation of accessible materials.
  • Bob Murphy Access Center (BMAC): The Bob Murphy Access Center (BMAC) assists students with disabilities to achieve their educational degrees and prepares them to be career-ready after graduation. 
  • Canvas Layouts: Use one of the pre-built Canvas Layouts for CSULB to facilitate the development of an accessible online course.
  • Course Consultations:  ATS offers consultation services for faculty to support the use of technology and provide engaging learning for students.
  • CSULB Accessible Technology website contains key information regarding how the university is providing assistance and producing accessible content for our community.
  • Web Content Accessibility Guidelines (WCAG) offer best practices for developing accessible online course content. 

Accessibility Best Practices

Implement the quick points listed in the sections below to improve the accessibility of your course design:

  • 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.
  • Use simple language when possible; no jargon.
  • 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.
  • Use accessible content (i.e., HTML pages, MS Word, tagged PDFs) that can be understood by assistive devices.
  • Provide alternative formats to content that allow students to choose that which meets their needs (Anthology Ally can help with this).

  • Create a consistent page layout and navigation (aesthetics, headings, structure, naming conventions, font sizes, and font families).
  • Label consistently all links, files, and icons with simple and descriptive names.
  • Avoid creating a busy page; incorporate white space.
  • Chunk paragraphs into blocks, allowing enough white space.
  • Use headings to distinguish between sections and clearly describe the content.
  • Use 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.
  • Choose sans serif type fonts such as Arial, Verdana, etc. for readability.
  • Use no more than 3 different font types per page.
  • Use images (don't forget the alt-text description) to engage your students.

  • Provide unique words on linked text (e.g. don't use "Read more" repeatedly throughout content).
  • Clearly label the linked text with its destination rather than the URL itself.
  • 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).

  • Include a short description using the "alt" tag on simple charts.
  • 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.").

  • Use tables only for organizing and summarizing data.
  • Include unique titles and caption text for data tables.
  • Define row and column headings clearly.
  • Avoid large data tables by chunking them into different sections.
  • Avoid using tables for page formatting.
  • Do not embed a table as an image file.

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

  • Do not use color to convey meaning, to indicate an action, or to emphasize significance.
  • Use text labels and icons and avoid color reliance.
  • Use consistent color combinations across all pages.
  • Use dark text on light backgrounds. Avoid using background and text color that is from the same color family.
  • Use hue, shade, tint, or tone as the only means of conveying content or information.
  • Use the WebAIM Color Contrast Checker to confirm that the color contrast between foreground and background is accessible.

  • Include the alternative text description (alt-text) for all images; upload images to Canvas rather than copy/paste to activate the "alt-text" prompt.
  • Use short, concise, descriptions of the image in the alt-text field.
  • Avoid using “image of” or “photo of” in the alt-text description.
  • Do not duplicate nearby text in the alt-text description.
  • If your image contains text (i.e., logo with text), include the text along with the image description in the alt-text field.
  • If your image is a logo, state that it is a logo in your alt text description.
  • If you are using images that are unrelated to the content, mark them as “decorative” in the alt-text field.

  • Title your video content items clearly and include the duration of the video in the title (e.g., Welcome Video 2:15 minutes/sec).
  • Give the user control by deactivating auto-play settings.
  • Provide open or closed accurate captions for videos.
  • Include transcripts with video and audio files.
    • Include important sounds in addition to words heard in the dialog or narration.
    • Include important visual content.
  • Include captions with live broadcast or synchronous video conferences, if requested.
  • Avoid animations or visuals that flicker and can be distracting.

 

Learning to incorporate accessible design into your workflow from the start will strengthen your familiarity with these elements and soon become second nature. These efforts will benefit the diverse learning needs of students and prepare your course for any special accommodations requests.