Center for Elearning and Continuing Education

Center for eLearning and Continuing Education

Web Accessibility Guidelines Checklist

Introduction

This checklist is an internal document to be consulted by the Instructional Designers and Faculty members in examining a proposed course’s Web Accessibility. This document is for review purposes only and does not ensure ADA compliance.

Color and Contrast

The Web Accessibility Guidelines (WCAG) 2.0 requires a contrast ratio of 4.5:1 for normal text and 3:1 for larger text and web links.

Contrast/Content Checkers

Check contrast by having both the HEX foreground and background colors at

In Firefox, is a great tool to use

The Juicy Studio Accessibility Toolbar Add-On can analyze contrast ratios for all page elements at once

Foreground and background color combinations met the contrast ratios

(based on the 4.5:1 ration and the 3:1 for larger text and web links)

Only color-coding was not usedto convey meaning of content, indicating an action, prompting a response or as a distinguishing visual element (it is okay to use color, but not just color alone).

Transparent images were not placed on black backgrounds

Cascading Style Sheets (CSS) background images were not used in the place of true images

All images were true text rather than putting text into graphics (graphical text). (This allows for greater readability on a wider range of devices and scales and wraps better.)

All web links were underlined or have a “non color designator” (underlined links is considered best practice -

Red and greenswere not used together, as they are often indistinguishable

Comments:

Skip Navigation (SoftChalk)

A “skip navigation” link must be available at the top of the page

Comments:

Headings

People that use assistive technology also have the ability to navigate web pages by heading structure, assuming true headings are used (as opposed to text that is styled to be big and/or bold).

Use an unordered list (bullet points) when there is not order of sequence or importance. Ordered lists should be used to suggest progression or sequence

Actual headingswere used: H1 for the title of the page; H2-H6 used subsequently

Text formatting, such as font size or bold to give the visual appearance of headings (use the actual headings)were not used throughout the webpage(s) and document(s)

Headingswere not used to achieve visual results only

Comments:

Fonts

It is generally best to use standard fonts that are available on the end users device.

Universal Design fonts for Windows and Macintosh Computers are:

• Arial
• Book Antiqua
• Georgia
• Courier New
• Tahoma
• Trebuchet MS
• ***Verdana – one of the most popular for online viewing

The most common Font Families

• serif
• sans-serif
• cursive – more difficult to read in electronic format
• fantasy – primarily decorative, not designed for long passages
• monospace – each letter takes up the same amount of space regardless of what letter it is

Standard fontswere used throughout the course (based on information above)

The number of different fonts was limited throughout the course to two or three

Fontswereconsistent throughout the course

Font size throughout the course was greater than 10px

(HTML) use <strong> rather than the <b> tag to bold an item and add “strong emphasis”

Blinking or moving textwas not present in the course

Text on webpages was readable when the page is zoomed up to 200%

Comments:

Tables

Someone that cannot see a table cannot make these visual associations; so proper markup must be used to make a programmatic association between elements within the table. When the proper HTML markup is in place, users of screen readers can navigate through data tables one cell at a time, and they will hear the column and row headers spoken to them.

Markup tags are required for data cells and header cells for tables that have two or more logical levels of rows or columns.

Wave (Web Accessibility Evaluation Tool) can check your page for linearization Tables will always be processed by assistive technology in left to right or top to bottom order.

is another way you can check your tables. It also allows you to turn on and off tables completely

Tables were created with linearization (Left to right or top to bottom)

Table headers had content/information (are not empty)

The <th> tag were used in data tables

The table had a descriptive text before or after the table that indicates the content of the table. The reading order should be from left to right or top to bottom and there should not be any headers or summary attributes present.

Comments:

n/a

Forms

When electronic forms are designed to be completed on-line, the form shall allow people using assistive technology to access the information, field elements and functionality required for completion and submission of the form, including alldirections and cues.

The form was accessible using the keyboard

The order of the form was logical when tabbed through

Text labels described the function of each form control

Text labels were adjacent to its respective control.

Are error messages displayed? Does focus switch to the error? Are error messages helpful? Do forms have good instructions, like specifying date formats? And, are those instructions in the label so that users of assistive technology will know that they’re there?

Comments:

n/a

Alt Attributes (images and buttons)

Adding alternative text for images is the first principle of web accessibility. Determining appropriate, equivalent, alternative text is often a matter of content.

Alternative text serves several functions:

• It is read by screen readers in place of images allowing the content and function of the image to be accessible to those with visual or certain cognitive disabilities.
• It is displayed in place of the image in browsers if the image file is not loaded or when the user has chosen not to view images.
• It provides a semantic meaning and description to images which can be read by search engines or be used to later determine the content of the image from page context alone.

The key principle is that computers and screen readers cannot analyze an image and determine what the image presents. As developers, text must be provided to the user which presents the CONTENT and FUNCTION of the images within your web content.

All images had meaningful alt text conveying content/function

Animation of page elements were designed so the screen/image flicker does not occur between frequencies 2HZ and 55 Hz

Images that had text in/on them were saved as image with alt text added and the text should capture the text in the image if that text is meaningful

Alt text was succinct and not more than one to two sentences

Alt text was not redundant (unless it is the same image)

Phases such as “image of… or graphic of” were not used

Form image buttons had alt text (ie a “Submit” button should have the alt text of “submit”) NOTE: HTML buttons will not need alternative text, the name attribute will cover the bases.

Image maps had alt text

Images were not used that conveyed content as a background image

Logos/headers had alt text

Complex images such as a chart or graph that cannot be limited to a short sentence were linked to a separate page and the alternative text provided there

If the image is complex, long alternative text was used to help understanding

Comments:

Multimedia

Multimedia (includes but is not limited to) videos, DVD’s, PowerPoints, audio-only presentations, YouTube and other web-based video and slideshows)

Equivalent alternatives for any multimedia presentation are required topresent.Though captioning is primarily intended for those who cannot hear the audio, it has also been found to help those that can hear audio content, those who may not be fluent in the language in which the audio is presented, those for whom the language spoken is not their primary language, etc.

Captioning can contain additional descriptions, explanations, or comments that may be beneficial or enhance the overall experience (things going on in the background, music etc)

Captions adhere to the following guidelines:

Synchronized - the text content appeared at no more than 1-2 seconds off the same time that audio would be available

Equivalent - content provided in captions were equivalent to that of the spoken word

Accessible - caption content were readily accessible and available to those who need it

Videos were Closed Captioning

Audio only content had a transcript available

Transcripts were a verbatim account of the spoken word in the multi media presentation

All training, informational videos and multimedia productions were closed captioned

Captioning has the ability to be turned on and off

Comments:

Flash Accessibility

Due to lack of Flash support on mobile devices (particularly iOS devices), decreased support in many browsers, poor accessibility, and general transition away from Flash as a commonly-used web technology, using Flash is not generally recommended.

(Either meet all of the below items or you must provide an accessible alternative.)

Synchronized captions for any audio that conveys content were provided

Flash Content was self-voicing when possible (the screen reader will pick up that it is self-voicing)

Strobing content that flashedover 55 times per second were removed

The Flash content was keyboard accessible

Flash content did not require the use of fine motor skills

The user had control over time sensitive content (start, stop and pause)

Ways to use controls and navigation schemes were provided

Used the clearest, simplest language appropriate

Color contrast based on the specified ratios was met

Flash content had the ability to scale to larger sizes

Flash content could be accessed through a screen reader OR provided an accessible alternative

Provided textual equivalents for all non-text (images) elements that convey content or provide a function

Provided an accessible alternative (ie PDF version)

Comments:

Portable Document Format (PDF) Accessibility

If you are using Microsoft Word or PowerPoint, OpenOffice.org Writer, or Adobe tools such as InDesign, you can often create accessible, tagged PDF files without opening Acrobat. Of course, the accessibility of the PDF depends on the accessibility of the original document.

If using Acrobat Pro the accessibility checker can be used to help determine accessibility

The Adobe Add-in, also called PDFMaker, is the best choice to create high-quality tagged PDF files.

The language was set to English in Acrobat X or higher

The PDF document was properly tagged

All images had meaningful alt text conveying content/function

Actual headings were used: H1 for the title of the page; H2-H6 used subsequently

Text formatting, such as font size or bold to give the visual appearance of headings (use the actual headings) were not used throughout the webpage(s) and document(s)

Headings were not used to achieve visual results only

All web links were underlined or have a “non color designator”

Reading order was checked and was accurate

Comments:

PowerPoint(PPT) Accessibility (usually not the best format for the web)

PowerPoint Accessibility Checker

• PowerPoint 2010 includes a new checker that allows you to check your presentation for accessibility problems
• The virtual 508 Wizards ( creates accessible HTML versions of PowerPoint presentation, but to do so, it creates numerous files. They have a version of the tool for Office 2000-2003 and for 2007 (no mention of 2010)

All version of PPT through 2008 for Macs cannot be exported as an accessible PDF file.

Every version of PowerPoint since at least 2000 contains a series of highly-accessible slide layouts. PowerPoint is designed to encourage the use of these slide layouts, especially in newer versions. Using these templates correctly will ensure that your files have correctly-structured headings and lists, proper reading order, etc. The correct use of slide layouts is probably the most significant thing you can do to ensure that your content is accessible.

Images that have text within them (grouped) had alternative text

All images had meaningful alt text conveying content/function

Word Art was converted to an image and was be given alt text

Embedded charts had alt text

Charts that are too big had a link to the data in a different location

Automatic slide transitions were avoided

If transitions wereneeded, simple ones used

Reading order was checked

Videos used in PPT were closed captioning

Audio used in PPT had verbatim transcripts

Once converted to PPT, it was run through the Acrobat X checker and verified as an ADA compliant document

Comments:

Plugins, Java, Applet

Accessibility standards require that if you use a plug-in, you must provide a link so the user can download that plug-in BEFORE you present the content

Every applet, embedded media, plug in, etc. that conveys content must have equivalent alternative text. Applets and embedded media players have to meet the same accessibility standards that web pages do.

Comments:

Comment Section

I have reviewed the below course with the marked Web Accessibility Guidelines listed above and have provided suggestions where appropriate in comments section below. Based on my review, to the best of my knowledge the information above accurately reflects the status of the course.

Comments:

Course Shell:
Course Number:
Course Title:

______
Instructional DesignerDate

______
Faculty MemberDate

Page 1 of 1108.13.14
Z:\Online Education\Courses\Course Development Resources\ADA Course Design Checklist_08_2014_V2.docx