|
Designing Accessible Web
Sites |
Instructional Technology
Designing
Accessible Web Sites
Designing Accessible Web Sites
Hint 1: Maintain a simple,
consistent page layout and navigational structure throughout your site.
Hint 3: Use the clearest and simplest language appropriate for a site's
content.
Hint 4: Provide an alternative text-only version for your web site.
Hint 5: Provide a text equivalent
for every nontext element such as graphics and images.
Hint 6: Do not create pages that
flicker.
Hint 7: Use frames and tables
sparingly.
Hint 8: Do not rely on color alone.
Hint 9: Provide an HTML version of
any PDF document.
Hint 10: Create meaningful links.
Resources
The Internet is a
powerful and versatile tool able to provide access to information and resources
at any time. Because of this, many
educators have incorporated Internet components in courses they teach. Some of these are done as course companion
websites. Others are complete online
courses of instruction. The Americans
with Disabilities Act (ADA) of 1990 requires that
In general, there
are five types of disabilities that can affect Internet usage. These are:
People using older
computer equipment are also at a disadvantage when utilizing web resources that
are not accessible.
There are many
assistive and adaptive technologies used to assist people in accessing the
Internet. Some are:
The World Wide Web Consortium (W3C) develops common protocols used on the Web to insure interoperability to promote universal access. The W3C’s Web Accessibility Initiative (WAI) has proposed guidelines for designing accessible web pages that stress applying Universal Design for Learning (UDL) concepts. UDL stresses that curriculum, materials, and teaching practices should be flexible and adaptable to include alternatives so that students with learning differences and disabilities can be successful learners.
The purpose of this guide is to show what you can do to make your course website accessible to all students. The following suggestions are based on the WAI guidelines for web content. Follow these guidelines when developing and revising your course web pages to ensure that they are accessible to all students.
Everyone benefits from well-designed web sites, regardless of cognitive capabilities. A clear, consistent presentation will especially assist people with visual impairments or learning disabilities who have difficulty following disorganized presentations. A simple consistent design and look makes it easier to locate specific information within your site.
For example, a feature presented on every page, such as a standard navigation menu or logo for the site should always appear in the same place. Clear navigation mechanisms on each page allow users to easily find navigation buttons between pages as well as locate the primary content for each page. While this makes it easier for everyone, it is especially helpful to people with learning and reading disabilities. Making it easy to predict where the needed information is found on each page will increase the likelihood that it will be found. A carefully planned organizational scheme will help everyone use your site.
People
with low vision or colorblindness, or those using black and white monitors can
have difficulty reading information at sites with busy backgrounds and dark
colors. Some background images obscure
text and make reading difficult. Simple
easy to read fonts in dark shades of blue, purple, or black are easiest to read
on unpatterned backgrounds. Make sure there is enough contrast
between your text and the background of the page. Choose background, text, and link colors
carefully and always test your site by viewing it a different resolutions and
color depths. For example, you can
change your monitor settings to a resolution of 640x480 and 16 colors for one
test and to 1024x768 and 24 bit color for another.
Using clear and simple language promotes communication. Access to written information can be difficult for people who have cognitive or learning difficulties. Using clear and simple language also benefits people, whose first language differs from your own, including those who communicate primarily in sign language.
Text is considered accessible to almost all users since it may be handled by screen readers, non-visual browsers, and braille readers. Text may also be magnified. Providing an alternative text-only version of your site provides the option of having text read by one of these technologies for those who rely on them. The link to the text-only version is best placed in the upper left hand corner of the screen where users' screen readers will find it first.
An example of a text-only version can be found at PJC’s main page: http://www.pjc.cc.fl.us
Use the ALT tag to describe the function of all images and graphics appearing on your site. The more important the information conveyed by a graphic, the more important it is to have ALT text associated with it. The ALT tag provides alternative text descriptive information for graphical elements of a web page. The text should be a brief description of the image’s purpose. The ALT tag helps visitors understand what is on the page if they are not viewing the graphic. This could be because they are blind or are using a text-based browser or graphical browser with the image loading feature turned off.
Graphical elements that add no content to a page, like a divider bar or decorative object, still need ALT tags, but they should be empty, like this: ALT="". By using two quotation marks with no content, you can reduce the amount of distracting text when a page is viewed with graphic capabilities turned off or with a text-based browser.
Image maps should include ALT tag text to describe each hotspot. Complex graphs and charts should be accompanied by a detailed text description elsewhere on the page (or on another page) in addition to having an ALT tag.
It is important here to address an apparent conflict between the needs of individuals with visual impairments (who benefit from text rather than graphics) and those with cognitive impairments (who benefit from graphics and icons). There is no need to interpret these needs as mutually exclusive. Those using screen readers are not harmed by the use of images, as long as alternative text is provided. Those with cognitive disabilities will not be harmed by the presence of the alternative text supplied for images. It is possible, and desirable, to create Web pages that cater to both of these audiences, without alienating non-disabled audiences.
To test your site, clear your cache, set
your browser to images “off”, and browse your site.
Pages that have flickering and flashing elements can cause several accessibility problems. A flickering or flashing screen may cause seizures in users with photosensitive epilepsy. Because of this, web developers should avoid creating pages that flicker at a rate that is likely to cause seizures. Seizures can be triggered by flickering or flashing in the 4 to 59 flashes per second (Hertz) range with peak sensitivity at 20 flashes per second. Some banner ads, designed to grab attention, flash or flicker at rates that may indeed induce seizures in those susceptible to them.
Also screen readers can be set to report any new information appearing on the screen. Blinking or flashing text is sometimes reported over and over, interrupting the users reading of the screen.
Frames are currently
considered inaccessible page presentation. In time, this may change as browsers
handle them with greater sophistication and the screen-readers can more
intelligently map the screen. Until that happens, avoid using frames, but if
you must, title each frame to facilitate identification and navigation.
Tables also create
problems for screen readers. The current state of screen readers is that most
of them are unable to discern columns in web pages. They read from left to
right, jumbling the meaning of information in tables. Some blind visitors can
interpret tabular information, but it is best to look for other ways to present
the information to ensure that visitors with visual impairments can reach your
data. Avoid or offer an alternative to multiple columns. Since the page will be
read left to right and top to bottom, it's best to use single columns only.
Techniques:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
<HTML>
<HEAD>
<TITLE>A frameset document</TITLE>
</HEAD>
<FRAMESET cols="10%, 90%" title=”University Book Store”>
<FRAME src="nav.html" title=”navigational links”>
<FRAME src="doc.html" title=”main content of page”>
<NOFRAMES>
Color coding should not be used as the only way to convey information. Information conveyed through color alone can be difficult for people with color deficiencies. For example, when asking for input from users, do not write "Please select an item from those listed in green." Instead, ensure that information is available through other style effects (e.g. a font effect) and through context (e.g. comprehensive text links).
Techniques:
To Test:
To test whether your document still works without colors,
examine it with a monochrome monitor or browser colors turned off. Also, try
setting up a color scheme in your browser that only uses black, white, and the
four browser-safe grays and see how your page holds up. To test whether color
contrast is sufficient to be read by people with color deficiencies or by those
with low resolution monitors, print pages on a black and white printer (with
backgrounds and colors appearing in grayscale).
Adobe Acrobat PDF files are sometimes accessible, but access can be limited or unpredictable. Offering an HTML version provides an accessible format. It is also useful to people who want to "skim" the document before deciding whether to download and print the entire PDF file.
Make links descriptive so they are understood out of context. Visitors who use screen-reading software can adjust their software to read only the links on a page. For this reason, links should provide enough information when read out of context. Use a more descriptive phrase than “Click here” as a link or next to a graphic used as a link.
Techniques:
BAD EXAMPLE:
<a href=”http://www.pjc.cc.fl.us/”>click here</a>
GOOD EXAMPLE:
<a href=” http://www.pjc.cc.fl.us/”>Pensacola Junior College</a>
For more information on making your web pages accessible visit the following sites:
WebAIM: Web Accessibility in Mind
http://www.webaim.org/intro/
W3C: World Wide Web Consortium
http://www.w3c.org
CAST: Center for Applied Special Technology
http://www.cast.org