Right-click on the appropriate image below and choose "save as" on the PC or, on the Mac, simply click and drag the image to your desktop.

Education Accessible

It would be very useful to have a program that could check to see if a page is accessible. This is not currently possible, since most decisions must be made in the mind of a trained designer. For instance, only the designer can tell whether link phrases are descriptive enough.

On this page, you will find a checklist of points important for accessibility, adapted from checklists provided by the World Wide Web Consortium. These points do not establish full accessibility by themselves, but they are an important step in becoming compliant. Most of the points rely on the informed judgment of the designer. If you wish to learn more, you can acquire more information through the links at the bottom of the page.

If you are satisfied that you are complying with each of the items on this checklist, then you are entitled to use the "Education Accessible" icons at the top of the page. Arizona State University cannot, of course, vouch for each page that uses the icons: you are on your honor.

The Arizona State University "Education Accessible" icons are to be used on websites by educators and others who

Guide to accessibility requirements:

In general: if you have an item that is non-text, provide a text equivalent. It is that simple! Remember that you are creating an interface between the technology and the user, and make that interface logical and easy to use. To do so, imagine yourself in the place of the user. What follows is the means of implementing these principles.

Use alternative text or "alt text" as a brief explanation for images, applets, and image maps.

Here is an example: < img src="school1.jpg" alt="Photo of Poe Elementary">

The use of alt text is the single most helpful thing you can do to make a web page accessible. Alt text consists of alternative text to be read aloud by a screen reader. Ideally, text descriptions contain the same information that the image conveys.

If an image consists of text, then the alt text consists of whatever text is on the image. If, for example, an image that reads "News" is used, then the alt text would be "news." The screen reader will present the alt text in the place where a reader would see the word.

Much of the time, alt text will be used to describe images and photos. Here, a useful convention is to set off the alt text by using square brackets. For example, one might write, "alt= [Photo of the school principle, Mr. X.]"

For images that are merely decorative, or are spacers, or convey redundant information, you can provide "empty alt text" like this:
< img src="circle.jpg" alt=" " >

If an image is also a link, provide alt text even if the image does not convey information.

Text descriptions should be short. Remember that each time the screen reader accesses the image, the text description will be read aloud. (If long descriptions are important to convey all the information, see point #3.)

If your alt text does not completely describe your graphics, scripts, applets, etc., provide a complete and accessible description somewhere else.

Currently, an accepted way to do this is through a "d" link. To create a "d" link:

After your image or other element, place the letter "d." Make its color the same color as the background of the page, so that the link is invisible to all but users of screen readers (and of text browsers, such as Lynx.).

Make the letter a link to another page, or to another area on the same page, where you provide a complete description. (This way, users of screen readers and text browsers do not automatically hear the complete description each time they come upon the image.)

It is just as important to supply alternative text for imagemaps. Give each area in the imagemap its own alt text:
< img src="floorplan.gif" alt="navigation" usemap=#navigation>
< map name="navigation">
< AREA coords=1,1,47,34 alt="first grade info" >
< AREA coords=1,34,47,64 alt="second grade info" >

Provide the same information in text links, for the use of those who do not have software than can access imagemaps. This can be easily done with a group of text links at the bottom of the page. The links can be made invisible if you wish.

Provide a text equivalent (transcribe any words used) for audio.

For video and animation, provide two alternatives. Caption the video, for the Deaf (or provide a text transcription of words used so that the viewer can read along during the video.) For screen readers, provide a description of what is going on in the video. This can also be done as a form of oral captioning when the video is created.

With audio, video, and animation, synchronize any captioning and descriptions (whether text or oral) with the content.

If your information relies on color, and would not be understandable if viewed without color, provide the information in another way as well. Consider color-blind users. You may want to check your page with a utility that will show you the way your colors look under various forms of color-blindness (see the links that follow for a website that does this task.) Avoid having red and green together, or gray/blue/purple.

If your page uses any kind of animation including blinking, scrolling, auto-updating/refreshing features, provide a pause button and/or make the animation optional. Under several forms of learning disabilities and other conditions, repetitive animations can cause problems.

Remember that some users cannot use a mouse, and provide ways to navigate your page using the keyboard and/or voice. In particular, if you create a user interface separate from the browser, make your new interface accessible.

Don't use frames. Frames are very difficult for users of older screen readers. For those who insist on using frames, make sure that navigation within the frames is clear, and that all frames have names. Suggestions:

Give your frames descriptive names and titles, such as "Main" and "Navigation." Users of screen readers can only view one frame at a time, so give users a good idea of what page they are going to visit.

There are three places in which the descriptive names/titles are important. If you provide all three for each frame, navigation will be possible for users of all screen readers.

First, use the descriptive term in the title element of the HTML for each frame, thus:
< head >
< title >
Main Content
< /title >
< /head >

Second and third, provide both a name and a title in the FRAME element on the main page. It is important to use both since they are referenced by different screen readers. Example:
< FRAME scr="main.html" name="main content" title="main content" >

Tables serve two purposes. They can display data; they are also used for layout.

If you use tables for layout, avoid nested tables. This is because screen readers present only one cell of a table at a time. In other words, they linearize the table. Table cells are read one at a time, left to right and top to bottom. If the screen reader comes to a cell with a table inside of it, then the table inside will be linearized and presented before the screen reader continues. This can make the data very confusing.

If you use a table for layout, make the content flow in a logical manner. For instance, if you have a group of cells containing images that are links to other pages, you might place your main content in one big cell to the left. This cell will be read first. If you place your navigation cells to the right, this group will be read after the main content is presented. Check your layout tables in Lynx to find out if they are logical.

Older screen readers do not distinguish between cells. Thus, if you have two columns of text, the screen reader will read the first line in the first column, then the first line in the second column, and so on. This is very confusing. To prevent this situation from occurring, use only one column of text, and place images in the second one.

If you use tables to present data, use captioning and summarizing features to explain the tables.

Use stylesheets so that structure and presentation are separate. Do not use presentation features ("bells and whistles" and style sheets) to present content.

Low vision users may set fonts to large sizes. If you use percentages rather than fixed width text areas such as tables, these users can easily view the pages even when columns contain only a few words. With stylesheets, you can set margins in percentage points and often avoid tables entirely. Since margins are a presentation feature, they should be set in the stylesheet anyway.

Headers can also be modified in stylesheets: you can define the color, size, alignment and more. Using the various levels of headers from 1 to 6 is useful for screen readers, since headers, used properly, outline the page.

If you are using abbreviations and foreign words, change the language markup to reflect this. Ideally, also provide information on how to pronounce such words. Older screen readers may not be able to switch pronunciation from one language to another.

Know your audience. Go beyond current requirements so that people with older browsers and screen readers can access your information.

Design your pages so that navigation elements are together; and other elements that belong together, are together. Also, provide a means of skipping such groups. For instance, you can provide a link at the start of a group of redundant links that takes you on past the links. This users of screen readers can choose not to hear the same list of navigation links repeated on every single page of a website.

Create good link phrases (e.g., do not use"click here" as a link phrase. Instead, use phrases that are neither too short or too long and phrases that describe where the user is going.) This way, a user can tab from one link to another.

Make navigation easy and logical.

If the information in one article is divided into several pages, add a single downloadable file with all the information on one page (e.g. printable version.)

Make sure that your page contains a DOCTYPE statement. In the HTMl code, above the head, insert a statement telling what level of HTML your page will validate to. Not sure what level to use? Try this one:
<!DOCTYPE HTML PUBLIC "_//W3C//DTD HTML 4.0 Transitional//EN" >

If necessary, create a separate alternate page as your accessible website: this is a last resort. Create a link to the alternate version in the upper right hand corner of your regular page. If you update the regular page, update the accessible page as well.

Finally, as new HTML functions and web technologies emerge, take steps to make your use of them accessible.

To Learn More:

Investigate the World Wide Web Consortium's website, at http://w3.org.

Go Thanasis Kinias' online presentation at http://www.asu.edu/it/fyi/ train/mec/. The presentation will teach you more about the World Wide Web Consortium's suggestions.

Read "Designing Accessible Journals, at http://is.asu.edu/accessibility/access_paper/," a paper written and presented at the American Educational Research Association, April, 2002. This paper gives a visual representation (using Lynx screenshots) of some accessibility problems.

Validate your page for accessibility with Bobby, at http://bobby.watchfire.com

Validate your page to HTML and CSS standards, at the World Wide Web Consortium's website.

Doublecheck your colors at http://newmanservices.com/colorblind/default.asp, a site for checking HTML for the use of those with colorblindness.

Take Anthony's Cascading Style Sheets 2 Tutorial to learn about CSS.