| Checkpoints | Explanation | Informational Resources |
|---|---|---|
| Keyboard: Clear indication of visual focus | Mouse users simply click on content to activate it. Keyboard-only users typically use the Tab key to navigate through interactive elements on a web page—links, buttons, fields for inputting text, etc. When an item has keyboard "focus," it can be activated or manipulated with the keyboard. A sighted keyboard user must be provided with a visual indicator of the element that currently has keyboard focus. A basic focus indicator is provided automatically by web browsers and is typically shown as a border (called an outline) around the focused element. |
Keyboard Accessibility: Focus Indicators * Note: While the learning management system itself (Moodle, Compass, etc.) already meets compliance standards for visual indication of focus, we also need to consider third party material a course may use, like publisher resources, third-party applications, etc. |
| Keyboard: Content is keyboard navigable for keyboard users. | Keyboard-only user should be able to navigate easily to all portions of the content.* |
Keyboard Accessibility: Navigation |
| Keyboard: Tabbing order reflects the visual order. | When keyboard-only users navigate through a page, the order in which items receive keyboard focus follows the visual order of content the page as it appears from left to right, top to bottom.* | Keyboard Accessibility: Navigation |
| Color: Color contrast meets at least WCAG 2.0 level AA standards. | To ensure content is readable by people with low vision or color blindness, sufficient color contrast is provided with text and background and in charts and graphs. You can easily use the dropper tool in the free Color Contrast Analyzer to quickly test for contrast and for colors that work for color blind users. |
|
| Color: Color alone is not used to convey information. | For color blind users and blind users, color alone should not be used to convey information (e.g., items in red indicate a deficit). Color can be used to convey information provided it is used in conjunction with other textual means of identification. | Designing for Color Blindness |
| Color: Page responds to high contrast settings and is still readable. | Users with low vision and certain other types of visual disabilities benefit from high contrast settings/themes in their operating systems (Windows, MacOS, etc.). Sometimes certain types of images, font/background combinations, and images called through CSS, may not work well when high contrast mode is used.* | High Contrast Settings |
| Logical Structure: Content is logically ordered (e.g., hierarchical heading level structure, related items grouped using ordered & unordered lists, data tables for tabular data). | All users benefit from content that is organized logically. Different document types (HTML, Word, PDF, PowerPoint, etc.) provide support for semantic markup that benefits all users, particularly those working with assistive technology like screen readers or text-to-speech software. | Logical Structure |
Logical Structure: Tables have titles (either a heading used to introduce the table, or a table caption in Word or HTML). Tables are properly formatted using table headers and, where applicable, scope. |
Proper formatting of table content makes it more readable to all users. Because table content is linearized by assistive technology like screen readers and other text-to-speech applications, it is read one cell at a time from top to bottom, left to right. Proper heading structure provides a necessary frame of reference for cross-referencing the type of content in any given cell. Without header references, for example, you can imagine the difficulty of identifying the type of content in a long table that lists cell, home, and fax, phone numbers across a series of columns. |
Creating Accessible Tables See also Electronic Document Formats checkpoint for document-specific cheat sheets. |
| Links: Hyperlinks should contain meaningful text when read by themselves. | For example, link text does not just provide the URL, nor does it use phrases such as "click here," "read more" that convey little when taken out of context. | Links and Hypertext |
| Reflow: Content reflow or responsive design is readable on mobile devices. | The layout of content may change significantly enough to make some content unreadable when displayed on mobile devices. While the learning management system itself (Moodle, Compass, etc.) already meets compliance standards for content reflow, we also need to consider third party material a course may use, like publisher resources, third-party applications, etc. |
Understanding Reflow |
| Graphics: Graphics (e.g., photographs, charts, or graphs) are clearly described and include alt-text and figure captions for informative images. | Blind users and some low vision users rely on alternative text descriptions to identify and understand graphics. | Accessible Images |
| Video/Audio: Player controls are keyboard accessible for keyboard users. | While Mediaspace, Ensemble, and YouTube video already meet compliance standards for keyboard accessible player controls, we also need to consider third party material a course may use, like publisher resources, third-party applications, etc. | WCAG 2.0 Guidelines for Audio and Video |
| Video/Audio: Captions are at least 99% accurate captions (no auto-generated captions). | Auto-generated captions are not accurate enough but can be edited for accuracy. Wherever possible, it is also a good idea to attach downloadable transcripts to the video page. | For Captioning Your Instructor-Created Videos: Mediaspace includes an Automatic Speech Recognition tool to facilitate captioning and editing captions. See Kaltura Captioning Tools for step-by-step instructions for captioning your instructor-created videos. For Captioning Third-party Videos (e.g., YouTube): DRES will assist with the captioning. First upload the YouTube media to Illinois Mediaspace. Then send a Word document attachment containing a list of YouTube URLs and their corresponding URL addresses in MediaSpace to dres-accessible-media@illinois.edu. You will be notified when the videos are captioned. |
| Audio: Text transcripts are provided for content. | For deaf and hard of hearing students, a text transcript should be provided for audio-only content (e.g., slides with audio narration but no video, an audio podcast, or an audio interview). | Mediaspace includes an Automatic Speech Recognition tool to facilitate the text transcript process. See Kaltura Captioning Tools for step-by-step instructions. |
| Video/Audio: User controls the timing of content changes (no autoplay). | Being able to start and control playback allows users with certain cognitive, reading or motion disorders to process other content on the page as needed before viewing the content. This also prevents audio from interfering with screen reader audio. | WCAG 2.0 Guidelines for Audio and Video |
| Electronic Document Formats: Electronic documents offered in the course (e.g., PDF, Word, PowerPoint, etc.) follow best practices for accessibility. | Without proper formatting, different document types may present challenges to screen reader users, text-to-speech applications, and users with certain cognitive issues. | Document Format Cheatsheets: DRES also offers Sensus Access, a tool for converting documents some of the most common file types (such as Word, PowerPoint, and PDF) into an alternative, accessible format. |