Cobra Learning - Meeting web content accessibility standards
The Cobra Learning - Organizing your course accessibly and Cobra Learning - Setting release conditions and special access to support students with different needs topics provide guidance on organizing your course and setting release criteria to better support students with disabilities. This topic discusses design decisions you should consider when creating HTML content. Most of the tips provided are web content standards set by the World Wide Web Consortium. For more information, review their Web Content Accessibility Guidelines.
- When possible, use HTML topics to create your course content. D2L provides accessible HTML templates to streamline the content creation process. If you need to use other file formats, such as video files, choose formats that are recognized by most browsers or offer the material in multiple formats.
- Use a simple layout that does not use tables or columns to organize information. When information is organized simply, it is easier for students to read and understand. Simple layout is also easier for assistive technology devices to interpret and present, and for mobile and handheld devices to resize.
- Use headings to communicate the relationships between sections. Use Heading 1 for the title, Heading 2 for major sections, Heading 3 for subsections, and so on. If headings are used correctly, screen reader users can quickly search a page by heading and participants with cognitive disabilities can understand how sections and content relate easier.
- Make sure each heading, item, and file name are unique.
- Include a table of contents that links to each section. Ensure that there are Back to top links at the end of each section for longer documents.
- Include alternative text descriptions (alt text) for all graphics. Use double quotes (null) as the alt text if the object is a decorative element that does not add meaning to the topic. If the graphic is a link, begin the alt text with "Link to". The HTML Editor in Cobra Learning automatically prompts you to include alt text when you insert an image.
- Include detailed captions below tables and graphs. These captions should explain what information the objects convey, including important trends and statistics. For tables, include a caption using the caption element that explains how the table is organized. Check that tables make sense when read from left to right. Screen readers often have difficulty conveying information that reads from top to bottom.
- Use the same text on-screen and in the alt text for links. Make sure that the text describes the action that will occur when you click the link. Do not use text such as Click Here as the link. Screen readers often use a list of links to quickly navigate actions on a page. This is not possible if links are not descriptive.
- Include text alternatives of multimedia content, such as audio or video files. If you do not have the time to create a complete text alternative, include a descriptive label that summarizes the content.
- Do not use blinking or flashing multimedia, as it can cause seizures in individuals with photo-sensitivity. Use animation when it helps convey a concept, and not to draw attention to an unchanging object. Use a combination of color, size, and prominence to draw attention to objects.
- Do not use color to convey meaning. If you want to show how concepts relate to each other, use a combination of size, color, and text labels.
- Ensure that there is a strong contrast between the text and the background colors in your course materials.
- Use relative font sizes and make sure that the text and page layout adjusts when a user changes the font sizes. Users should not have to scroll horizontally.
- If you use PDF files for content, scan them with optical character recognition (OCR) to the text can be read by screen readers. Scan pages with multiple columns one column at a time so that the optical character recognition functions as expected. Add bookmarks for major sections to make the content easier to navigate.
- If you create PDF files from Microsoft Word or another word processor, format titles and sections using heading so they are correctly tagged in the PDF.
- If learners use text-to-speech software to read text aloud or highlight text as they go through it, test the software to ensure it functions correctly for specific tools and settings that you want to use. For example, if you turn off right-click in quizzes, it can prevent some text-to-speech software from tracking text.
Compliance to accessibility standards in HTML-authored content
An accessibility checker is now available within the HTML Editor for use within Content, Widgets, Quizzes, Assignments, Calendar, Assignments, and any other tools where you can access the HTML Editor.
The accessibility checker is available on the HTML Editor bar. After you add content to the HTML Editor, you can click the checker to ensure that the HTML page meets conformance to WCAG and Section 508 accessibility standards.
The accessibility checker reviews content for the use of the following items:
- Use of paragraphs as headings
- Sequential headings
- Adjacent links
- Ordered list structure
- Unordered list structure
- Contrast ratio of text to background colors
- Image ALT text
- ALT text file name
- Table caption
- Complex table summary
- Table caption and summary
- Table heading scope, markup, and headers
The checker indicates if the content is free of accessibility issues, or offers suggestions to fix them.
Note: that the accessibility checker does not check multiple files at the same time and does not check files that you have imported into a course. Also be aware that the accessibility checker is only available for HTML files in the HTML Editor tool; it cannot be used to check any other file type, such as MS Word, PDF, PowerPoint, and so on.