Tools for Accessibility Check

Useful tools and resources are listed here. You can identify and apply the appropriate tools and techniques for creating and evaluating learning content.

Assistive Technology Demonstrations

Tools to Check Accessibility

Accessible Content Creation Tools

List of Useful Resources

If you have any questions or suggestions on this topic, please contact Jinhee Choo or eLearning@business.illinois.edu.

Legal Responsibilities

You can learn about federal laws to protect individuals with disabilities from discrimination on the basis of their disabling conditions.

Section 504: Rehabilitation Act of 1973

“No otherwise qualified individual with a disability in the United States, as defined in section 705 (20) of this title, shall, solely by reason of his or her disability, be excluded from the participation in, be denied the benefits of, or be subjected to discrimination under any program or activity receiving Federal financial assistance…”

Section 504 applies to those entities that receive federal funds, so most institutions of higher education are subject to its provisions.  Federal funds include grant monies awarded to faculty and staff as well as federal financial aid programs.

Americans with Disabilities Act (ADA) in 1990 and the 2008 Amendments

  • Civil Rights legislation protects against discrimination based on disability status
  • Covers employment, public entities (schools), public accommodations, telecommunications
  • 2008 amendments broaden disability definition

Section 508 (1998 & 2017)

Section 508 is an extension of the ADA, requiring telecommunications and online classrooms to offer equal opportunities to all students, including those with disabilities.

 Differences in Sections 504 & 508

504

508

  • Passed before the ADA (1973)
  • Forbids discrimination against persons with qualified disabilities by colleges and universities that receive federal funds
  • Allows for government enforcement as well as private actions
  • Passed after the ADA (1998)
  • Requires electronic and information technology to be accessible to persons with disabilities if an entity receives federal funds
  • “Refreshed” in January 2017 to align with WCAG 2.0

Web Content Accessibility Guidelines 2.0.

Web Content Accessibility Guidelines (WCAG) 2.0. is another important regulations and guidelines to note. They are part of a series of web accessibility guidelines published by the Web Accessibility Initiative (WAI) of the World Wide Web Consortium (W3C), the main international standards organization for the Internet. They are a set of guidelines that specify how to make content accessible. The current version, WCAG 2.0, was published in December 2008 and became an ISO standard, ISO/IEC 40500:2012 in October 2012.

If you are interested in accessibility-related legal cases in higher education such as the Kindle case, click here.

Our Responsibilities

22.2% of adults (18 and over) in the United States identify as having some type of disability (CDC, 2015) and 11% of higher education students in 2011-12 reported having a disability (USDOE, 2015). Many more choose not to disclose. It is our legal duty to make sure that we are not discriminating against learners from our lack of knowledge or understanding. In other words, with all these laws, we are responsible for holding to these accessibility standards. As an educator, however, we know that our responsibilities should go beyond the laws. All these raised standards can actually benefit more diverse learners with or without disabilities since learners have different learning styles. This is more important and meaningful In the online courses where identification of students’ disability is less evident and easy with limited contact. Ultimately for better learning experiences and outcomes, we should be more attentive to inclusive and flexible universal design of our courses regardless of different delivery mode. Furthermore, it needs to be done proactively so that learners can have equal access and feel more included from the moment they start taking a class.

If you have any questions or suggestions on this topic, please contact Jinhee Choo or eLearning@business.illinois.edu.

 

Accessibility Guidelines

Section 508 Standards and Web Content Accessibility Guidelines (WCAG) 2.0 

Click each item listed below to learn more details of the Section 508 standards and WCAG 2.0 guidelines to create accessible learning materials.

Images

Multimedia

Tables

Text and Navigation

Course Assignments

If you have any questions or suggestions on this topic, please contact Jinhee Choo or eLearning@business.illinois.edu.

Accessibility Checklist

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.

Adapted from WGU Accessibility Checklist by Western Governors University Instructional Design Team

If you have any questions or suggestions on this topic, please contact Jinhee Choo or eLearning@business.illinois.edu.

Tools for Transcripts

Transcripts are required anytime there is dialogue and/or important non-dialogue audio. Transcripts may also contain text descriptions of visual information. Here are some examples of multimedia types that require transcripts:

  • Videos
  • Audio files, podcasts
  • Narrated slide presentations and slide presentations with embedded media
  • Audio notes in text documents

This is not an exhaustive list of media that require transcripts; thus, be sure to do your research on accessibility requirements before publishing media to the web.

There are several ways to create a transcript.

  • Modify a pre-made script
  • Listen to the audio and manually type of what you hear into a text document
  • Edit a transcript created by speech recognition software
  • Pay a service

Modify a Pre-made Script

Writing a script before recording anything is good practice for many reasons. In terms of accessibility, it makes it easier and quicker to create a transcript (and even captions.) Simply modify the existing script and then make it available with the video.

Manually Transcribe

If a pre-made script is not available then another method is to listen to the audio and manually type out what you hear into a text document. Of course, this can be time-consuming if the media is long. Luckily, there are online tools that can speed up the process. oTranscribe is a free web app that allows a user to transcribe an audio file from their computer or a YouTube video. This tool is useful when transcribing audio files because it allows the user to slow down or speed up the audio as they are transcribing. The user can set the tool to a pace that is natural to them, which stops them from having to continuously pause and start the media.

Speech Recognition Software

Some tools use speech recognition software to automatically generate a rough transcript for media. The transcript will not be 100% accurate, which means the users will have to edit the file before making it available with their media. An example of a tool that does this is Google Voice. This tool is a Google telephone service that a user can access if they have a Google email account. It provides the user with an actual phone number that people can call. If someone calls and leaves a voicemail message, then not only can the user download that voice mail as an mp3 file but it also provides the user with a transcript automatically generated by speech recognition software. By going to Google Voice online, the user can edit the transcript and download it along with the mp3.

 

Tools for Captions

Websites

There are free websites that have tools for manually captioning videos. Some of them are video hosting websites, such as YouTube.com, and others are specifically geared towards transcribing and captioning, such as Amara.org. YouTube.com and Amara.org are great free tools to manually caption videos.

YouTube

Pros: YouTube has a robust closed captioning tool. It provides several different options for captioning videos. For this reason, using YouTube is often the quickest way to caption a short video. YouTube provides step-by-step guides on all the different captioning options.

One useful feature of YouTube is the option to allow videos to be captioned by the community. This option allows viewers to caption your video using a website like Amara.org.

Cons: YouTube automatically generates closed captions to uploaded videos using speech recognition software. Closed caption files generated using this method often contain a lot of errors. The owner of the video has to manually fix the errors or add a new accurate caption file for the video to be truly accessible.

Another drawback is creators have to upload the video to YouTube to use the caption editor. Also, the caption editor is only available for videos that the creator owns.

For more information on how to add captions to videos in YouTube review this webpage on Adding Closed Captions on YouTube.com

Amara

Transcript for Video: Captioning with Amara (6:15)

Pros: Amara is user-friendly and has many useful features, but the primary benefit to using Amara is the user does not have to own the video or be the person who uploaded the video to create closed captions. Amara allows the user to caption a video from YouTube or Vimeo without downloading it or changing it in anyway. This is because Amara does not host videos; it just adds an overlay to existing videos.

Cons: Every captioning project on the website is open to the public. Not only can everyone see and download the captions, but they can also edit them.  Also, once a video link is submitted into Amara the captioning cannot be deleted from the website.

Since Amara does not host videos, they will become unavailable if the owners delete or change them in YouTube or Vimeo.

Review the Amara Knowledge Base for more information on how to add captions to videos using Amara.

 

Tools for Audio Descriptions

If an individual has editing rights to a video then they can record an audio description file and add it as an extra track to the video using editing software.

Transcript for Video: Adding Audio Descriptions Using Video Editing Software (2:41)

Using video editing software to add an extra track to a video you do not own may be a copyright violation. In this situation, there are some free tools available for adding audio descriptions to online videos.

YouDescribe is a free online tool that allows users to record audio descriptions for YouTube videos from their web browser. The user does not have to download or change the original video.

Tools for Equations

Transcript for Video: Accessible Equations (3:29)

There are many paid and free products available to read and convert mathematical content. An example of free software is InftyEditor.

InftyEditor is a free software for creating accessible mathematical content. This software functions like a typical text document except that it allows the users to add mathematical content and then export it as MathML and other formats. From the same website, users can also buy a software called InftyReader. This tool will recognize and convert scanned images of mathematical content into accessible formats. There is a free version of InftyReader with limited functionality available for download.

To find out which combinations of software function correctly together to read mathematical content, there is a free tool available called the Math Support Finder.

Tools for Images

Transcript for Video: How to add alt text to images in Microsoft Word (2:07)

Adding alt attributes, sometimes referred to as alt tags, alternative text or alt text, to images in web content, presentation software, web site creation tools, etc., is very similar to adding them to a Microsoft Word document. While each interface will have its own way of navigating to the image properties areas,  the information required to make an image accessible remains the same.  To be accessible, all images must have an an alt attribute even if that alt attribute is empty or null (e.g., alt=” ”). Alt attributes are added to the image properties area into a field labeled as Alt Text, Title, Alt tag, etc.

Some best practices for alt attributes are:

  • Be accurate
  • Be succinct when describing the content and function, if applicable, of the image
  • Avoid redundancy between the alt attribute and the context of the image
  • Avoid the use of phrase like “picture of…” or “image of…” when describing the image unless it is relevant content

Transcript for Video: Accessible Graphs, Charts and Maps (3:42)

Determining alternative text for complex images such as charts, maps, and graphs can be more difficult.  There are times when a description for these images may not be succinct enough to use an alt attribute AND a description does not appear in the content of the page.  In this situation, one alternative is to add a long description to the content of the page.  If this is not feasible then another alternative is to use the longdesc attribute.

The longdesc attribute can be used in a couple of ways. The following options came from the W3C page on using Longdesc.

Option 1

The image can be a link to the long description page.  Note:  Alternative text should be provided for the image.  There are a number of advantages to linking to a long description page:

  1. The description can be reused for multiple instances of the same image
  2. Avoids visual clutter in the original document
  3. Provides an obvious endpoint to the description

Option 1 example:

<p><img src=”map.gif” alt=”a complex map” longdesc=”mapdesc.html”/></p>

Option 2

A link can be added to the content of the page next to the image or within the same page.  While this methods ensures all users can access the description it also has a limitation in that the longdesc does not identify an obvious end-point. This requires content developers to not only provide the description but also indicate the its end-point.

Option 2 example:

<img longdesc=”thispage.html#desc” alt=”Map of the United States” src=”http://www.mapsofthe world/maps/US.png”>
<div id=”desc”>
<h3>Long Description: Map of the United States</h3>
<!– Full Description of Map –>
<p>Long description ends.</p>
<div>

WebAIM provides some good examples on how to determine appropriate alternative text for images on their Alternative Text web page.

Tools for PDFs

Transcript for Video: Creating Accessible PDFs (3:33)

PDF tags provide information about the structure and format of the resource. Although not visible, they are an essential part of navigating a resource for users of assistive technology. Not all PDFs contain PDF tags; therefore, they are not accessible. For example, a document scanned and saved as a PDF may not contain PDF tags. Creators must add PDF tags to make these documents accessible for users of assistive technology.

How to Review and Create PDFs

The easiest method for identifying PDF tags is using the keyboard shortcut CTRL+F for PC and COMMAND+F for Mac. In the provided Find/Search text box, type a word known to be included in the document. If PDF tags are present, the Find/Search function will bring focus via the cursor to the first instance of the word in the document. Repeat these steps with several words to confirm PDF tags and compliance. If PDF tags are absent, the Find/Search function will not return any results.

Adobe Acrobat Pro, which is the premium version of Adobe Reader, has built-in tools that assist in creating accessible PDFs and evaluating existing PDFs.  For some best practices for creating accessible PDFs, Adobe provides an Accessibility Guide: Best Practices for PDF Accessibility. The free version of Adobe Acrobat has a limited set of tools available for adding accessibility features to existing PDFs.

There are also some free PDF accessibility checkers available for users who do not have access to Adobe Acrobat Pro or for whom purchasing it is cost prohibitive.  One such tool is PDF-Accessibility Checker (PAC2).