Common Barriers to AccessibilityCommon Barriers to AccessibilityMany web pages on the UIUC campus have the same barriers to accessibility. These can be relatively easy to spot and correct, so check out your pages to see if you have:
Some users will not be able to see the images in your page. This may happen when someone chooses to turn off images in a browser like Netscape Navigator or Microsoft 's Internet Explorer. Other browsers made specifically for the blind, like pwWebspeak or IBM's Home Page Reader, don't display images at all. When there are no images, the user needs a way to get the information presented in the image.
"Alt text" is the text that shows in place of a missing image. This is text that you, as the page author, need to include when you add an image. Here is the HTML source code for the image at the top of this page:
<IMG SRC="../images/a1000.gif" ALT="Universal Design
icon" WIDTH="72" HEIGHT="67">
The alt text is the text in quotation marks following ALT=. In
this case, the alt text is "Universal Design icon".
If you are using Netscape Navigator and you hold the mouse over the image, a little yellow rectangle should appear with the words "Universal Design icon." You can view the alt text the same way using Microsoft's Internet Explorer. Or, in IE, turn off images and turn on alt text, and you will see the alt text in place of the image.
Note that you should also use alt text for the images in an image map.
Read the full W3C Web Content Accessibility guideline on text equivalents for more information and techniques.
Some people with visual impairments or learning disabilities need to enlarge the text on a web page in order to read it. This works because text is scalable; you can make it larger and smaller. Images, on the other hand, are not scalable. No matter how large a user makes the text, each image in the page will retain its original size.
Some web designers like to use images instead of text so that they can have fancy fonts, backgrounds, etc. This is most often done in the page title and section headers. Since images are not scalable, some users will not be able to read words presented in images rather than plain text.
One way to work around this problem is to provide alt text that has the same wording as your image. Since the alt text is displayed as plain text, it is scalable and can be enlarged. A more advanced way to correct the problem is to use web style sheets to create plain text with the look you want.
Read the full W3C Web Content Accessibility guideline on appropriate markup for more information and techniques.
Every web page can be broken into three elements:
Only the author can dictate the content and structure of a document. You alone have control over what you say and how you say it. The presentation of the document, however, is dynamic, and can change with different users and web browsers.
Some web page authors try to dictate presentation. They do this by using
such "physical" HTML tags as <FONT>,
<B> (bold), <U> (underline), etc.
However, some users, such as those with visual impairments and learning
disabilities, need to be able to control the presentation of the document in
order to read it. When you use HTML tags which dictate presentation, you make
it harder for these users to read your web page.
One way to prevent this problem is to use "logical" HTML tags
instead of physical ones. For example, if you want to bold some text for
emphasis, use the <STRONG> (strong emphasis) tag instead.
Most browsers will display this as bold. A few may use italics, but they will
all make sure that the text stands out, which was your intent anyway. If you
want to make large, bold text as a section heading, use the HTML header tags
<H1>, <H2>, <H3>, etc.
instead. See the
NCSA
Beginner's Guide to HTML for more information on logical vs. physical
styles.
You can also prevent this problem by using web style sheets, particularly cascading style sheets, or CSS. These style sheets allow you to set the preferred presentation of your web page, while still allowing a user to override your preferences if necessary.
Read the full W3C Web Content Accessibility guideline on controlling presentation for more information and techniques.
Users with blindness, visual impairments, and learning disabilities often have trouble picking out the structure of a page. They may tab through just the links in order to get a feel for the page structure and content. The way you write your link text can help or hinder this process. Consider these two versions of a link:
These are examples of non-descriptive link text; a person just reading "Click here" or "here" would not know where the link was going. Imagine a blind user skimming through a whole page with this type of link text: "Click here. Click here. Click here..." This doesn't tell her much of anything, except how many links there are on the page. Now consider this version of the same link:
This version has descriptive text. Users reading it know where it will take them. Note that the version with descriptive link text does not include the words "click here". It assumes that the users know what a link is and how to follow it. A user skimming through a page with descriptive link text will learn a lot about the content and maybe even structure of the page.
Read the full W3C Web Content Accessibility guideline on appropriate link text for more information and techniques.
While the HTML <TABLE> element was initially meant for
creating data tables, it is now used on almost all web pages to control page
layout. Browsers that do not support tables present the page elements in a
"linear" fashion, usually left to right and then top to bottom. Look
at the following table with three rows and two columns:
| Cabbage: | a green, leafy vegetable |
| Carrot: | an orange root vegetable |
| Apple: | a round fruit; may be red, yellow, or green |
In most linearized versions, the table would read as:
Cabbage: a green, leafy vegetable Carrot: an orange root vegetable Apple: a round fruit; may be red, yellow, or green
In this case, the information makes sense as presented. However, consider the following table, adapted from the University of Illinois at Urbana-Champaign homepage:
 |
 |
| Colleges, schools, departments, research centers, courses, academic & summer programs... | U of I Extension, continuing and distance education, resources for schools, businesses, and community... |
 |
 |
| Applications, registration, transcripts, financial aid, housing, tuition... | Alumni, sports, arts, entertainment, museums, personal pages, local-regional... |
| etc. | |
In most linearized versions, the table would read as:
Academics & Research Outreach & Extension Colleges, schools, departments, research centers, courses, academic & summer programs... U of I Extension, continuing and distance education, resources for schools, businesses, and community... Admissions & Records People & Community Applications, registration, transcripts, financial aid, housing, tuition... Alumni, sports, arts, entertainment, museums, personal pages, local-regional... etc.
Even with proper punctuation added, the linear version does not make sense. This is because the logical units are not grouped the way the browser expects. You, as a page author, may choose to blame the browser, but the fact remains that if you use tables for layout it is possible that your page will be inaccessible to some people.
In some cases, the desired effects can be created without tables, either with existing HTML elements or cascading style sheets (CSS). For example, the first table above could be replaced with a definition list as shown below:
When possible, it is preferable to control layout without tables. If you can not avoid using tables, check to see how your page looks in a browser that does not support them. One way to do this is to use the Web Page Backward Compatibility Viewer with the "Tables" box unchecked. This way you can be sure that your page makes sense, even to users of text-only, voice-output, and Braille-output browsers. The commercial browser Opera also allows you to turn off tables. You may also want to look at your page in a text-only browser, like Lynx. If you don't have access to Lynx, try Lynx-It, a web site which shows you what your page would look like in Lynx.
Read the full W3C Web Content Accessibility guideline on table mark up for more information and techniques.
Contact us at infotechaccess@server.rehab.uiuic.edu
Go to Accessible On-Line Materials Main Page
