Course Structure and Content
To develop an accessible online course, consider these two main areas for applying best practices:
- The STRUCTURE and LAYOUT of the course as a whole such as in the navigation, module organization, titles, and labels.
- The CONTENT you author or import including written text, documents, videos, images, presentations, and other materials.
Take advantage of these CSULB resources to support your accessible course development:
- Blackboard Ally: Available in Fall 2021 BeachBoard courses, this service automates the creation of accessible materials.
- BeachBoard Templates: Use one of the pre-built BeachBoard templates 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.
- Accessible Instructional Materials Center (AIM): The AIM Center provides resources and training for faculty to develop accessible course materials.
Accessibility Best Practices in Online Course Design
The Web Content Accessibility Guidelines (WCAG) offer best practices for developing accessible online course content. Key points are listed below:
- 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 the text editor to provide short intros and instructions for content items added to BeachBoard.
- 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.
- Use the "special access" feature to allow students with disabilities to have an extended time to complete quizzes.
- Provide alternative formats to content that allow students to choose that which meets their needs (Blackboard Ally can help with this).
Page Layout Design
The following points are applicable when creating new content in BeachBoard using the "Create a File" option. When using this option, you will create your content within a text editor box that includes formatting tools for font size, color, family, etc., as well as HTML coding to label structures like Paragraph text, Headers, and Lists. Use these built-in tools in the text editor box to ensure accessibility.
- 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 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.
- Utilize the content page Accessibility Checker to evaluate your HTML.
- 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 it's destination rather than the URL itself (e.g., Visit our BeachBoard Help Topics).
- 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.
Contrast & Color Reliance
- 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 BeachBoard 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.
Video & Audio
- 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.