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: |
|
|
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: |
|
|
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
|
|
|
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:
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. |
|