Perceivable: WCAG Principle #1
"Information and user interface components must be presentable to users in ways they can perceive."
Can my students both see and hear all of my materials?
1.1) Provide alt-text for images
WCAG language: "Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.”
The alternative text attached to a digital describes the contents of image, videos, animations and other visual elements. This text is articulated when screen reading software encounters the image and it is displayed if the images cannot be displayed by the web browser. Images can become "broken" and the alt-text displayed if they are deleted or if the web server where they are hosted is temporarily unavailable. Many instructors find the alt-text is useful for recreating materials if the original images become unavailable.
This text is added to materials created using the ATTO text editor in Moodle as well as PowerPoint presentations, Word documents, PDF files, and other digital files. When images are added to documents created using any of these software tools, authors can add a one or two-sentence description to the "alt-text" box associated with the image.
If the images conveys no content, then it may be marked as "decorative," but faculty should avoid using decorative images as they can interfere with learning. The tools one uses to add alt text to images depends on where the image is being created:
- Accessibility Checker in Moodle (checks for missing alt text among other things)
- Accessibility Checker in Microsoft Office (checks for missing alt text among other things)
- Preview your content in a screen reader
- Alt-text when adding images to Moodle
1.2) Provide transcripts and closed captions
WCAG language: “Provide alternatives for time-based media.”
To be perceptible, content that is presented as audio must be available in text as well. Closed captioning refers to text that appears on the screen at the same time the words are spoken and other audio is played on videos. Transcripts are files that contain the text of the words spoken in an audio or video file. It should have timestamps as well as the text and include other audio content, for example applause, laughter, and environmental noises such as wind. The best practices is to create a transcript file that is available for download so the student can decide the best way to use it.
Best practices for transcripts:
-
- Published transcripts should be at least 99% accurate.
- Grammar and punctuation should be complete and accurate.
- Speakers are identified by name or other pertinent factor if names are not available.
- Include non-speech sounds (i.e., sound effects, music, laughter, environmental sounds).
- Content should be transcribed as close to verbatim as possible. If it has been edited for clarity (i.e., removed misspoken or repeated words, “um”s or “uh”s) or if words are inaudible or unintelligible, add a statement to that effect.
- The full transcript or a link to a transcript file should be located in close proximity to the audio or video file and easy to find by screen reader or tabbing.
- For transcripts of video content, include descriptions of movement and relevant visuals.
1.3) Use Heading Styles and Header Columns on Tables
WCAG language: "Create content that can be presented in different ways (for example simpler layout) without losing information or structure."
Most sighted users gain information through the visual formatting on a page. Headers stand out because they are larger, bold, indented, and/or have space surrounding them. Items in a list are set apart by indents or bullets. This visual organization can be lost when text is read by a screen reader or by a braille refreshable display. Auditory cues, such as chimes, can also be lost with a change of formatting. These signals and organization should be transferable in some form. For example, screen reader users are able to jump from heading to heading to browse the contents of the document.
To conserve the organizational cues and supports provided by headings in text printed documents, authors should apply the heading styles that are included in the formatting tools in the ATTO text editor in Moodle or word processors rather than creating their own headings with the formatting tools. (If the appearance of the styles is not what is desired, then the styles can be updated to reflects the desired appearance.
These tools help authors use effectively:
- Accessibility Checker in Moodle (checks for headings among other things)
- Accessibility Checker in Microsoft Office (checks for headings among other things)
- Using Styles in Microsoft Office
- Table Headers in Microsoft Office
- Tables Headers in Moodle
1.4) Use High-Contrast Colors
WCAG Language: "Make it easier for users to see and hear content including separating foreground from background."
Color is often used to draw attention to and differentiate items. Using color alone to convey meaning can be problematic for people who cannot distinguish between colors well. This applies to text, links, charts, graphs, images, objects, buttons, or anything that prompts a response. Attention to this principle will improve legibility for all users.
- Working with Color Contrast (a 7-page presentation with a check-in at the end)
- Using the Colour Contrast Analyzer-- Slides (a brief slide show taking you through the use of CCA)
- Using the Colour Contrast Analyzer
- Adding Markers to Graphs
1.6) Avoid Using Decorative Images and Animations
While some faculty add images to make their courses and the materials they create more visually appealing, there is evidence these images and animations can interfere with learning. The effect is attributed to the extraneous cognitive load introduced by the images and animations. An example of the research documenting the effect is here:
Decorative animations impair recall and are a source of extraneous cognitive load.
It should noted this does not refer to icons and other images added to pages to help students navigate course pages. For example adding a book icon next to the reading assignment for every module can increase accessibility as long as the image is consistent and meets the color contrast requirements.
1.7) Avoid Using Colors to Highlight Important Information
WCAG Language: "Make it easier for users to see and hear content including separating foreground from background."
Because one can't be certain how colors will be displayed, faculty should avoid using colored text or highlights as the only method of indicating important text. Using bold or underline is preferred to italics which can make text difficult to read on screens.
1.8) Avoid Text as Image
WCAG Language: "Present all text in text format. Avoid images of text (e.g., memes). Company logos are an exception."
Text can be translated by assistive technology such as screen readers, or customized to the user’s preference, while images of text cannot. There are some particular presentations of visual information that is essential and cannot be transformed without losing meaning, such as company logos or trademarked images.
Text in graphics such as WordArt, and SmartArt in Microsoft documents as well as in charts, graphs, and in arrows and other visual aids to navigation should be described in the alt text and in the text of the document as well.