Element

Accessibility Concern

Suggestions and HTML Code Examples

ü

Navigation

Establish consistent navigation throughout the site or course. 

 

Predictable navigation is helpful to all users.  Try navigating through the site without using the browser “back button.”

 

Use clear and concise links. 

 

Example: 

Elements of a Good Research Paper

Instead of:

Click here to see a good research paper or Elements of a Good Research Paper

 

If images (such as buttons or icons) are used for navigation, be sure to include meaningful and simple alt text. 

See “graphics” section below.

 

Build your site so that it can be navigated using a keyboard or through the use of assistive technology.

 

To test this, use the tab and enter keys on your keyboard to navigate through your site and make sure each link can be accessed in this way and that the order is correct.

 

In some courseware, if you use an image other than the default image for a particular function, such as “e-mail” or “chat,” a screen reader will read it simply as “link” instead of including the name of the link.

Use default icons or inform students of this problem.  Or ask for technical assistance to add alt text to the icon.

 

Graphics

(that are important to page content)

Include alt tags and/or long descriptions (if the graphic element provides detailed information).

 

Best practice: Include a long description tag and a “D-link” for those using older screen readers.

<img src="map.gif" alt="Map of Arkansas with UA System Schools"  longdesc="uasystemmap.htm" />

 

<a href= “uasysmap.htm”>d</a>

Contact the DSS office for assistance with writing long descriptions.

 

Graphics (that are purely aesthetic)

Include a “blank” alt tag so that the screen reader does not read the image name.

<img src= ”squiggle.gif” alt= ”“ />

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Element

Accessibility Concern

HTML Code or Resources

ü

Video clips

Include captions for students who are deaf or hard of hearing and audio descriptions of video for students who are blind or have low vision.

 

Best Practice:  Also make a CD-ROM version of video clips available for users with slow connections.

Use an application that will assist you in creating captions or audio descriptions of your video clips. 

For technical assistance, refer to the following resource: http://ncam.wgbh.org/webaccess/magpie/

 

Or contact:  Aimee Dixon – acdixon@ualr.edu or Melanie Thornton – mpthornton@ualr.edu

 

Audio clips

Include a link to transcripts of any audio clips that you use.

<a href=”trans4.htm”> Transcript of Lecture #4</a>

 

Tables for layout

Make sure a screen reader will read the table in an order that makes sense to the user. 

 

Use a validation tool that will show you the order that the cells will be read by a screen reader.  If you are working within a course shell, the tools described to the right will not work.  You will need assistance from someone who can check the course with assistive technology.  Contact StaR (569-8954) or Project PACE (569-8410).

 

If your site is already on the web, view it using WAVE 3.01: www.wave.webaim.org

 

If your site is a work in progress, still on your PC, use A-Prompt. It can be downloaded for free at:

http://aprompt.snow.utoronto.ca

 

Tables for data

So that the relationship of data cells to each other is clear to students accessing the site with a screen reader, data cells must be associated with header cells.

Some screen readers only read tables that are coded this way correctly if the tables are small.  To see examples of this code, go to:

www.ualr.edu/pace/webaccess/advanced.html

 

Since tables of more complexity may not be read correctly, we recommend including a text alternative.

Include a “d-link” (as described above in the “graphics” section). 

 

Include a table summary and a caption for the table.

<table  summary="This table contains data that shows the relationship between sunlight exposure and growth of plant"><caption>Table 1. Effect of sunlight exposure on plants</caption>

 

 

Element

Accessibility Concern

HTML Code or Resources

ü

Color and Contrast

Make sure text is on a background with good contrast.

Black text on a white or a light background is ideal.

 

Avoid using color only to convey meaning.

If you use color as a method for categorizing topics or coding items, make sure there are other designations.  Use shapes and color or text and color. 

 

Flashing/ Flickering Objects

Avoid flashing and flickering graphics and text.  Flickering items trigger seizures for people who have seizure disorders.

If you have a graphic that you must use that flickers, create a separate link to it with a warning that it flickers.

 

Related Links

Make sure the sites that you recommend to students are accessible or be prepared to provide the content in an alternate format.

Check the sites using an accessibility validator.

 

WAVE 2.01: www.wave.webaim.org

 

Bobby:  www.cast.org/bobby

 

WAI: http://validator.w3.org

 

 

 

Exams

Most exams and practice exams designed for online courses are set up as forms.  Forms can be made accessible to screen readers, but there are too many accessibility fixes to list them all here.

 

Extended time for mandated test accommodations needs to be addressed.

 

Best Practice: Create a practice test and allow students to take this exam prior to the first exam. Students with assistive technology will have the opportunity to test their technology with your test format.

Tutorials on making forms accessible can be found online.

For a tutorial on making forms accessible, visit:

www.webaim.org/howto/forms

 

Have a plan for proctored tests.  Ensure CMS has method by which you can individualize time for tests taken online.

 

If you use pre-packaged exams and practice exams, the feedback the student gets after submitting the exam may not be accessible.

Be prepared to provide this feedback in an alternate format, include a statement somewhere on the site that instructs the student how to handle this accessibility concern.