Type of Resource
|
Guidelines
|
Additional Information
|
Text
|
Text (or text images) should generally have a contrast ratio of at least 7:1; use true text instead of images of text whenever possible; limit use of all caps and decorative fonts. |
WebAIM Fonts |
Color
|
Do not use color alone to convey information, even in charts and graphs. |
Web Aim Visual Disabilities
Web Aim Color Contrast Checker
Accessibility: Improving The UX For Color-Blind Users by Smashing Magazine (Adam Silver) |
| Check for sufficient color contrast. |
| Avoid use of color combinations such as red/green or blue/orange which might be problematic to those visually challenged by certain colors. Include other signifiers such as border/weight/shape/ written words as an indicator. Use Toptal Colorblind Web Page Filter or run Vischeck or the Colorblinding Chrome extension to check for color issues. |
Blinking
|
Eliminate or limit blinking content to no more than 3 blinks/flashes per second. |
WebAIM Seizure Disorders |
Forms
|
Label form fields and buttons clearly and check there is logical reading order in form. Design form controls with descriptive labels and validation/error messages. |
WebAIM Creating Accessible Forms
Word 2013 & 2016: Creating Accessible Word Forms (video) by The Governor’s Committee on People with Disabilities |
Graphs or
Diagrams
|
Describe graphs and diagrams using alternative text, captions, or long descriptions. Students with visual impairments should receive the same information from the alt text that they would receive from viewing the graph or diagram. Depending upon complexity, assess for alternative methods of presentation/consult with Accessibility Specialist.
Instead of using color-coding for charts and graphs, differences in line style or “texture” should be used so that the chart can be understood in black and white. Data tables should never be converted into images, and basic accessibility guidelines need to be followed for table headers, titles, and so on. |
WebAIM Alternative Text
WGU Common Examples of Alternative Text
WGU Other Images
Accessible Graphs, Charts and Maps (video) by AccessMOOC |
Links
|
Links should be descriptive, brief, unique, to the point, and differentiated from other links on site. Actual URLs they are included, should be formatted as contained in parentheses after link. |
WebAIM Links and Hypertext
Creating Descriptive Hyperlinks (video) by Syracuse University Accessible IT |
Lists
|
Apply style when creating (ordered or unordered) lists; avoid using tab keys for indents. |
WebAIM Lists and Columns
4 Things to make Word Docs on Windows Accessible – 02 – Lists (video) by Disability Resources for Students |
Keyboard Navigation
|
Check that any action using a mouse can also be accomplished using only keyboard. |
WebAIM Keyboard Accessibility
Keyboard-Only Navigation for Improved Accessibility by Nielsen Norman Group
Using the Tab and Space Keys to Navigate a Website (video) by AccessMOOC |
| Interactive elements can function using only the keyboard. |
Navigation
|
Web pages have titles that describe topic or purpose. |
W3C Page Title
W3C Bypass Blocks
W3C Focus Order
Web Accessibility Perspectives: Clear Layout and Design – Audio Described Version (video) |
| Navigation settings and order preserve meaning and operability. |
| Navigation methods applied consistently throughout site/course. |
Images
|
Images must have text alternatives that coincide with image purpose.
- Decorative Image – use a null text alternative (alt=)
- Functional images – alt text describes function of button or link rather than image
- Informative images – at least brief description conveying essential concept portrayed by image
|
Web Accessibility Tutorials An alt Decision Tree by W3C
WebAIM Alternative Text
Composing Meaningful Alternative Text (video) by eLearning WTCC
Access iQ How to create an accessible infographic by Media Access Australia |
| Avoid when possible images of text, alone or within other images. |
| When working with group of images that represent single concept, alt text for one image should convey group. |
| When an image is used as image map with several clickable areas, alt text should capture overall context. |
| Infographics – if creating or using infographics, ensure they are accessible. |
| Tables |
Tables need coding in HTML for screen readers to work. |
WebAIM Creating Accessible Tables
Creating Accessible Tables Word & PowerPoint (video) by Genesee Community College Online Learning |
| Indicate column and row headers. |
| Add table captions /check table properties. |
| Check reading order, assess for function, sequence and logic. |
Word Documents
|
Use uniform heading structure/style guides to reinforce structure through hierarchy |
Best Practices making Word Documents Accessible by Microsoft
Using Styles in Word (video) by Microsoft
WebAIM Alternative Text
Add Alternative Text to a Picture, Shape, Chart, SmartArt Graphic, or Table by Microsoft
Use Table Headers by Microsoft
Use the Accessibility Checker
Use the Accessibility Checker by Microsoft |
| For complex images, link to long description on a separate page, in another section of the document, on an accessible web page, or provide the long description in the surrounding text. |
| Alternative text is applied; should be non-visual brief words indicating content or function of an image |
| All data tables in document should have first row as header (refer to above in this document – In general -Tables, for additional criteria) |
| Use Accessibility Checker Word tool; resolve any issues. |
| PowerPoint Presentations |
Give each slide a unique title. |
Make Your PowerPoint Presentations Accessible by Microsoft |
| Use design slide layouts/place all content within “content placeholders”. Add more content placeholders rather than additional text boxes. |
| Apply alt text to images, keep descriptions specific and short. |
| Select and add designs which have sufficient color contrast; see other color considerations above (in general-color). |
| Use sans serif fonts Verdana /Arial (a block quote can be serif). |
| Use 24 point font as the minimum size. |
| Avoid animation and automatic slide transitions. |
| If using all but simplest tables, consider using .pdf format. |
| Use outline view to check to make sure title and text correctly identified and ordered. |
| Hyperlink text meaningful, brief and unique |
| Check hierarchy order in slides by tabbing through. |
| Use Accessibility Checker function within .ppt to check for issues. |
| Excel |
Include alternative text for all visuals and tables. |
Make your Excel Spreadsheets Accessible by Microsoft |
| Give all sheet tabs unique names and remove blank sheets. |
| Leave cells unlocked for screen reader compatibility. |
| Use simple table structure and specify column header information. |
Multimedia
|
All videos should have closed captioning. If linking to video on outside sources (YouTube), closed captioning should be of 95% accuracy or above. |
WebAim: Captions, Transcripts, Audio Descriptions
Audio Description by WGU
WCAG 2.0 Audio Description |
| Videos that include visual information that is not conveyed through the audio require audio description to describe information on the screen. Audio descriptions provide visually impaired students with access to visual information in the video. |
| Audio/Video should be checked throughout the entire timeline of a video to ensure, quality, clarity, consistency of volume/image. It should be checked again when once embedded in platform or uploaded to video repository. |
| Audio and Video content should include user controls that are keyboard navigable, so students can pause, replay, and fast forward. |
PDFs
|
On a PC, from within Word, select “Save as PDF”, select “Options”, make sure that “document structure tags for accessibility” and “create bookmarks using Headings” checkboxes are checked. Also, save original files. |
Create Accessible PDFs (Windows) by Microsoft
Create Accessible PDFs (Mac) by Microsoft
PDF Table Tagging
Use automatic OCR software in Acrobat by Adobe
Using the Acrobat XI Pro Accessibility Checker by Adobe
10 Easy Steps to Accessible PDFs (video) by University of California IT |
| If a scanned document, run Optical Character Recognition (OCR) to make active text, proofread and edit as needed. |
| Use Acrobat Pro to run Accessibility Checker, address any issues. |
Open Educational Resources (OER)
|
Assess for accessibility potential (can usually be modified to become accessible if not already). |
|
Simulations
|
Check for multiple approaches or methods of interaction that will be welcoming and equivalent to all participants. |
|