| Yale-New Haven Teachers Institute | Home |
|
|
by
Joanne Pompano
However, the advances in technology also creates many challenges for persons with visual handicaps. The design or format of a webpage, for instance, may determine whether this resource can be conveniently accessed by a blind person or be an exercise in frustration.
The handicapped population, therefore, must gain an understanding of technology so that they can contribute to the development strategies and propose solutions which will allow this population to use technology effectively.
This unit that will allow blind and visually impaired students and their sighted classmates to:
- 1. increase awareness of the development of technology
- 2. to gain knowledge and experience in using websites
- 3. to develop basic knowledge and use of HTML
- 4. to gain skill in understanding equal access issues for individuals with physical, cognitive, or sensory disabilities
- 5. to investigate various websites to determine how user friendly a site is for the visually handicapped user
The goals of this project include:
- 6. to design an accessible website
- l. To make visually handicapped students and their sighted peers aware of the problems blind and visually impaired have accessing websites
- 2. To educate present and future web masters and web-designers regarding the needs of people with disabilities
- 3. To design a website that is accessible to the blind and visually impaired by creating an accessible website entitled "Homework Helper."
The Internet provides an opportunity for blind and visually impaired users to get information on an equal footing with that of sighted peers. This project will allow my students to gain an understanding of the accessible websites to individuals with print impairments. This curriculum focuses on the problems that this population encounters when they attempt to use websites. By investigating problems students will be able to understand the needs of this population as they develop their own websites.
In addition, this curriculum will give students an opportunity to construct an accessible website that will provide useful information on the services provided by the New Haven Public School Low Vision Department with links to helpful websites about low vision issues.
NOTE: This curriculum was written to assist blind and visually impaired students. However, the techniques used will benefit a wider audience of handicapped individuals that might be described as "print impaired". Print-impaired persons include the blind and low vision users. However, the term is not limited to individuals who experience sensory loss in their eyes. For instance, print-impaired people also include those who have limited or no use of their hands or fingers in order to turn pages of a book or to access a keyboard or mouse interface for electronic documents. People with cognitive disabilities (for example, dyslexia) are sometimes included within the print-impaired category. It's important to keep in mind the broader category of the print-impaired. By doing so, a wider population will be served by this curriculum.
The advancement of technology has greatly assisted visually impaired individuals in their efforts to be active members of society. Computers and adapted technology allow people to do word processing, accounting, financial planning and simple programming on their personal computers. Computers now also provide important job opportunities for blind people.
In addition, new advances in technology allows blind and low vision individuals to be connected to the internet with its vast array of information and interactive capabilities. And so, for the first time, this population can access the same materials as their sighted peers. It is important, therefore, that access to the internet be easy and convenient.
- l. the inability to see graphics due to visual impairments
- 2. difficulty navigating sites that are poorly organized with unclear directions
- 3. difficulty in the use or availability of adaptive technology with computer to access the Web
Accessible websites are sites that can be read by everyone whatever means is comfortable for them. Accessible websites do not need to be dull or unattractive but instead can be fully accessible with dynamic designs that provide not only content, but also visual appeal.
Designers must also understand that attributes which help one person may hinder another. Graphics, for instance, produces a barrier for blind individuals, but may make a concept more clear for someone who struggles to understand the content.
- 1. Web browser software contains an area where the user, can set preferences. For instance, in "Netscape Navigator" the user can select the font, set the size of text, the background color, the color to be displayed by hyperlinks.
- 2. Web browsers can be set so that they will not load images. This benefits individuals who uses screen-reading software with a voice synthesizer.
- 3. Macintosh users with the Apple System 7.5 text-to speech software installed, can have text to"spoken" by cutting and pasting text from a web site to Simple Text and choosing Command-H.
- 4. Windows users can choose pwWebSpeak as their browser. This is a "talking" browser designed for efficient WWW access by people with visual impairments, dyslexia, and learning disabilities.
- 5. Text-only browsers, such as Lynx (DOS), can be downloaded at : ftp://ftp2.cc.ukans.edu/pub/lynx, and used in conjunction with screen reading software.
- 1. Make documents clear and simple
- 2. Maintain a simple, consistent page layout throughout the site
- 3. Provide context and orientation information.
- 4. Provide clear navigation mechanisms.
- 5. Keep backgrounds simple with good contrast
- 6. Use standard HTML
- 7. Design large buttons
- 8. Provide equivalent alternatives to auditory and visual content
- 9. Don't rely on color alone.
- 10. Include a notes about accessibility
The following suggestions will greatly assist access for people facing vision barriers.
- 11. Include short, descriptive ALT attributes for all graphical features on your page
- 12.Include menu alternatives for image maps to ensure that the embedded links are accessible
- 13. Create tables that transform gracefully. (1)
- 1. Designing screen with little clutter
- 2. Leave considerable space around all items
- 3. Avoid placing more than one hyperlink on any one line.
- 4. Avoid tiled backgrounds; text can become obscured.
- 5. Avoid dark or bright colored backgrounds; high contrast between text and background is desirable.
- 6. For each page which contains images, provide a text-only alternative page. This alternative page can then be "spoken" with screen reading software.
- 7. Include text descriptions for images (which can be "spoken" by those using screen reading software). The letter "D" is placed next to each image to indicate to the user that there is an image present and that a
- describes of the image which can be "spoken" with screen reading software is available.
- 8. With images, utilize the ALT attribute with IMG tags, in order to provide a descriptive phrase which will appear as alternatives to images in text-only browsers (i.e. Lynx).
- 9. Auditory cues might help an individual using screen-reading software, such as outSpoken from Berkeley Access. It allows explanatory text to be placed on a web page so the person could hear the explanation with the use of the screen reader. (2)
1. Avoid the use of multi-column presentations or tables.
Multi-column text or HTML tables make the page difficult or impossible to read with most access technology for the blind. A major problem is that, unless otherwise instructed to do so, this technology reads one entire line at a time across multiple columns instead of reading each column separately.
A major problem is that this technology, unless otherwise instructed to do so, reads one entire line at a time across multiple columns instead of reading each column separately.
2. When encoding hypertext links on your web page, enough words in the link must be included so that it can stand alone
When browsing a web page using speech or Braille access technology, the Tab or Shift-Tab keys are used to move from link to link.
When links read "click here," "this," or "click this," the page may be difficult to comprehend by the blind user.
It is helpful, therefore, when the link text can stand on its own. For instance, a word or phrase that describes the purpose of the link is very helpful.
3. Separate adjacent links
Hypertext links are typically indicated visually with highlighting. The blind user needs to know which pieces of text are in hypertext links and which are not because if two adjacent links are separated only by a carriage return, some screen access programs will incorrectly treat these as a single link.
4. Alternative, short text descriptions should be provided for all images
Blank characters, images, or bullets can be used but should not be placed next to a carriage return. It is important to use textual descriptions or identification to learn the meaning of a graphic.
5.Avoid using images as hypertext links.
Images are difficult for visually impaired and impossible for blind so don't use them as hypertext links. (2)
founded in l984. The mission of CAST is to expand opportunities for people with disabilities through innovative uses of computer technology. Bobby is a web-based tool developed by CAST to analyze web pages for their accessibility to people with disabilities. Bobby's analysis of accessibility is based on the World Wide Web Consortium's Web Content Accessibility Guidelines.
Bobby will analyze a web site to determine problems that might hinder access by disabled users. This free service is simple and is an excellent first step to ensure accessible web page design.
To check websites simply type in the URL of the page to be examined and click "Submit." Bobby analyzes the website and reports on the accessibility and browser compatibility. In addition, a Bobby Approved icon will be presented to identify a website that is user friendly for the disabled.
Bobby also provides suggestions and guidelines that are helpful to for low vision and blind user. Their guidelines include the following:
- l. Provide text translations for images, animation and video
- 2. Summarize graphs and charts
- 3. Ensure that information conveyed with color is also available without color
- 4. Identify changes in natural language of a document's text and text equivalents of non-text content such as captions
- 5. Clearly and logically organize content
- 6. Provide alternative content for features that may not be supported such as applets and plug-ins (3)
Other devices used by blind and visually impaired individuals to access the web include: hard-copy Braille embossers, Braille translation programs (software that converts print into Braille), audible screen review programs, reading machines (devices that scan a printed page and translate text into spoken words), scanners, optical character recognition systems, refresh able Braille Displays, Braille note-taking devices, and raised-line drawing equipment.
For instance, many can read standard size text while others need enlarged text and use screen or software magnifiers to assist them in enlarging print. Highly contrasting colors aid many low vision readers while others can only read yellow text on a black background.
'Access technology,' which is installed in computer allows visually impaired individuals to read webpages. Synthesized speech software reads the content of webpages aloud and braille software outputs the text to a retractable braille display.
Also, the Center for Information Technology Accommodation (part of the Office of Information Technology at the General Services Administration) is addressing accessible web design by establishing an interagency working group focusing on Universal Access.
Also, the Web Accessibility Initiative (W3C) established by the World Wide Web Consortium has developed guidelines for accessibility: (5.)
American Printing House for the Blind (APH), is a company devoted to creating products and services for people who are visually impaired. Their website is an excellent example of a page that is easy to access and use.
APH's website present very few pictures and those are present have a title and description of what is pictured. The beginning page has a short description of the organization. The next page is an index of the various sections on the site. This index is presented in a single column on the left side of the page. This allows blind users to scan quickly down the list and locate the section they need.
HEAD>
META NAME="keywords" LANG=en-us CONTENT="APH, federal quota program, products for the blind, custom braille, low vision aids, Louis database of accessible materials, braille books, large print books, books on tape, museum tour, factory tour">
META NAME="description" CONTENT="Founded in 1858, The American Printing House for the Blind, Inc. (APH) is the world's largest company devoted solely to creating products for people who are blind and visually impaired.">
____TITLE>American Printing House for the Blind/TITLE>
STYLE TYPE="text/css">
!--
BODY { background-color: white;
color: black }
A:link: { color: blue;
text-decoration: none }
/HEAD>
BODY>
img src="rwbhome.jpg" width=600 height=90 border=0 alt="American Printing House for the Blind">
hr align="CENTER">
A HREF="frhdann.htm">IMG SRC="fhshare.jpg" WIDTH=473 HEIGHT=111 VSPACE=2 ALT="Share your ideas for Fred's Head Database!">/A>
UL>
LI>A HREF="about.htm">About APH/A>br>
LI>A HREF="prodlife.htm">Products/A>br>
LI>A HREF="services.htm">Services/A>BR>
LI>A HREF="visit.htm">Visit APH: Museum and Plant Tour/A>BR>
LI>A HREF="federal.htm">Federal Quota Program/A>br>
LI>A HREF="involved.htm">Get Involved/A>br>
LI>A HREF="research.htm">Research & Education/A>br>
/UL>
- LI>A HREF="contact.htm">Contact APH/a>
A HREF="http://www.aph.org:8765/?qc=">IMG SRC="smallse.jpg" ALT="Search our site" WIDTH=201 HEIGHT=23 BORDER=0>/A>BR>BR>
A HREF="louis.htm">IMG SRC="louhome2.jpg" HSPACE=5 ALT="Louis Database of Accessible Materials for People Who Are Blind or Visually Impaired" WIDTH=368 HEIGHT=52 HSPACE=5 VSPACE=5 BORDER=0>/A>
HR>
ADDRESS>IMG SRC="logocirc.gif" ALT="APH logo" ALIGN=MIDDLE>
Copyright ©1998 American Printing House for the Blind, Inc.BR>
A HREF="http://www.cast.org/bobby">IMG SRC="bobby.jpg" ALT="Bobby approved">/A>
IMG SRC ="acclgsm.jpg" ALT="Web Access Symbol (for people with disabilities)" HSPACE=10>/ADDRESS>
/BODY>
/HTML> (6)
TWA, American Airlines, and other airline companies present webpages that may be difficult to access. Columns, colors, and photographs make it challenging to locate information. Pictures and graphics are not described so readers will be presented with no data for those areas. There is no index listing the various topics that are in this site. Instead they present busy layouts with numerous pictures and text scattered around the page. Such layouts may result in confusion and frustration for the blind user.
The following is a commercial website that posses a number of problems for blind and visually impaired users attempting to gain information from this airline on the internet.
[SCHEDULES & RESERVATIONS][FREQUENT TRAVELER INFO][ABOUT TWA][GETAWAY VACATIONS][HOT DEALS]
[TWA] [Image]
[airport information] [travel agents][passenger services] [TWA cargo services] [site info]
[Image]
[Welcome to TWA.com]
[Hot Deals] [Book a Flight] [FLIFO]
[Hot Deals] [ImEnd Up Miles Ahead with two new [Image] [FLIFO]
Aviator promotions!
Trans World [Image]Extra miles for Privilege Get arrival and
Specials. Special departure gate
fare discounts card holders information for
each week to [Image]Earn Privilege card flights.
various locations status 50% faster
around the world.
[Breaking News] [JD Power] [Mileage]
[Breaking News] [Image] [Image] [Mileage]
Frequent Flyer magazine/J.D.
TWA Labor Power and Associates 1999 Check your
Negotiation Update Customer Satisfaction Aviator
Breaking News Study--U.S. Flights.™ Study Miles
conducted among frequent
airline travelers who completed
6,250 individual flight
evaluations. Short flight is
defined as less than 500 air
miles.
[iXL - San Francisco]
Designed and [Image]
Developed by, [Search]
iXL-San Francisco,
Inc.
Getaway Vacations
Hot Deals | Airport Information | Travel Agents
Passenger Services | TWA Cargo Services
Site Info | Contact TWA (7)
In the early days of the internet, most browsers such as Lynx were text only. Thus disabled individuals, many for the first time, had access to information from around the world. However, graphical browsers and multi-media features and the freedom by authors to create documents began to limit the sites that were readily accessible for some such as blind and visually impaired people.
When using HTML code web designers must be aware that those who use screen readers are gaining the information one piece at at time through their sense of hearing (serial sense). This is very different from the way sighted individuals gain information from a printed page. Individuals without vision problems can scan the page and understand the structure as a whole. (parallel sense)
The HTML writers can assist visually impaired by presenting an outline of the structure at the beginning of the page, where the screen reader begins. In addition, they should include important hints along the way.
To deal with this problem websites use an Alternate Text (ALT Text). This is a very brief description of the image. This text is displayed in place of the image when the image loading has been turned off.
Labels (short text groups placed just after an image in the document) can also be used to help everyone understand the image.
Another solution to the problem with graphics is to use a "Text Only" version of a Document. This is a parallel page that can be accessed by users who are unable to make use of the information contained in an image. This text version should include all the same functionality and content as the original page.
However, authors must be careful about the way they format their pages because screen readers do not always alert users to line breaks, new paragraphs, new pages, centering or spacing used by sighted individuals to process and comprehend printed text.
For example, sighted people would have no problem understanding that the script at the bottom of the page, detached from the main text, is a footnote. However, the screen reader would read right on through causing confusion for the reader.
To solve this problem the following should be considered:
1. Use tags to separate different paragraphs, footnotes or other structures. For instance, tags can be used for navigation buttons and page information to reduce confusion.
2. Use ALT Text for graphical page separators or headers. ALT Text can provide page information and give structural cues that divide the page into meaningful pieces.
3. Avoid horizontal lines since they can be confused for text entry lines in forms by the Lynx browser.
Website designers can avoid these problems by considering the following:
1. Lists should be labeled with a tag at the start such as a Listname
2. Number each of the choices so the user can enter the list with an idea of its total length. This also aids the user since they can remember the number of the items that they are interested in. The numbers also break up the text so that each item can be individually perceived.
3. Sub-lists can be represented alphabetically.
This allows blind and low vision individuals who cannot see monitors to use computers.
There are several major problems with screen readers.
1. An important problem challenging screen readers is the lack of understanding the page. Screen readers are not able to recognize what is important and what is useless. Instead everything is outputted in a sometimes ambiguous stream.
2. Screen readers perform many operations simultaneously with the other applications running on the system. High workloads result and lead to program interactions.
3. The screen reader must make important changes to the computer in order to gain access to the text output before it is displayed on the monitor. Unfortunately, these modifications sometimes cause problems.
Each browser interprets and deals with information differently. Lynx, for example, is a text based browser and does not display images. However, even in cases where two browsers support the same element they may treat the information differently. For example, Mosaic shows the Alternative (ALT) Text while loading an image but Netscape does not. This means that information can be distorted or even absent depending on the browser used.
Sometimes hyperlinks are meaningless for blind users. This is due in part because web designers sometimes take short cuts in designing pages. They may construct a link by using of text and a hyper link. For instance, designers may write a sentence such as: "Click here to learn about ....... If "click here" is the hyper link the sighted user has no a problem. However, for people using screen readers that are configured to jump from link to link, " click here" means nothing.
This can be avoided by making the meaningful words in the sentence into the hyper links. This will allow a user who is skipping from link to link to get an idea of the choices available. It also will prevent the use of meaningless commands.
However, sites utilizing buttons by themselves are a problem for persons with visual disabilities.
Many sites, utilize clickable buttons to provide the user with a better idea about their destination. When an active image is included on the button, Lynx users will simply see the word "image" but will not known what a location it represents. The solution to this problem is to include ALT Text which describes the function. In addition, it is often helpful to add an external text label in square brackets.
Image maps should have a text listing of all the options available in the image map. This text listing should be located either above or below the map or on a linked page. It may, in fact, be best to construct a text-only alternate page parallel to the main image mapped page.
There are serious problems for people with visual disabilities.
1. Image map elements are not supported by many text based browsers. Lynx, for instance, does not support the image map element so the information is unavailable.
2. Often the information showing where to click an image map is contained within the image. People using screen readers and other access devices that are designed for graphical user interfaces are presented with problem since what matters is where the image is selected, not simply that it is selected.
3. The image often contains words or graphical instructions within the image that the screen reader does not have access to.
4. The clickable surface must be navigated by a mouse making selections on the basis of what the image looks like.
It is important when designing sites that each hot spot on an image map element should have an alternate text field added. Browsers could be modified to Tab through the image map hot spots reading out the Alternate text and making image maps completely accessible.
This curriculum attempts to provide teachers and students guidance in their attempts to understand the problems blind and visually impaired individuals must overcome. In addition, the information and the sources cited will aid HTML authors as they attempt to increase the accessibility of their sites.
Low vision and blind students partner with sighted peers to write reviews of selected Web sites.
Objectives
Students will research, write and edit
Students will learn about the resources available on the Web
Students will be introduced to computer technology as a tool to create, compose, communicate and publish
Procedures
l. In small groups at the computer, work with students to teach the basics of navigating the Web. As an example, do a basic search of several Web sites.
2. Together with small groups, visit a few sites you have preselected. Explain the basics of using your browser to navigate the Web.
3. Hold a brief discussion. What makes a Web site good or bad? As a class, develop a list of criteria to use in judging the Web sites.
4. Schedule children in 30-minute intervals at the computer with your supervision to visit sites for review. Discuss the contents of the sites with the children as they navigate.
5. Assign children to write reviews of 3 selected sites each. The reviews must include:
6. Exchange reviews with other teams
- A. A brief description of the contents of the site
- B. An evaluation of the site
7. With your supervision, have the children visit interesting-sound sites reviewed by other teams in the classroom. Do they agree with the reviews ?
8. Collect all of the reviews and create a directory for your school of interesting Web sites that are handicapped accessible: Distribute your directory to all teachers.
9. Publish the results on the school Web site.
10. Have the students create an assessment tool for reviewing the sites.
Discuss:Is the site easy to use? Is it interesting? Easy to navigate? Does it follow the guidelines for accessibility set by the National Federation of the Blind?
Subject: Computer technology, language arts
Grade level: Grades 7 -12
Time frame:
Week 1-2-- Teach about the Web
Week 3-4-- Develop assessment tools
Week 4-5-- Research sites and write reviews
Week 5-6-- Create directory and Web site
How students will benefit:
Students will learn to analyze a web site to determine how user-friendly the site is for blind and visually impaired users.
Requirements:
All participants must: Critically examine a web site and write a discussion of the site.
Materials Needed: Computers with Web access
Children's Resources:
Online Kids A Young Surfer's Guide To Cyberspace, Preston Gralla, John Wiley & Sons, Inc., New York, l996.
Homepage An Introduction to Web Page Design, Christopher Lampton, Grolier Publishing, New York, l997.
Dave's Quick 'n' Easy Web Pages, Dave Lindsay, Bruce Lindsay, Erin Publications, Calgary, Canada, l999
Teacher Resources: Net Lessons: Web-Based Projects for Your Classroom, Laura Parker Roerden
Objectives:
Students learn to conduct correspondence via email
Students develop reflective writing skills
- Students learn email etiquette
Procedures:
l. Post a Call for Collaborators soliciting keypals partners for the project
2. Based on responses, match each student with a keypal from another school
3.Each student writes an initial brief biography including: first name, age, pets, school interests, and hobbies.
4. Teacher consolidates information into one message and emails information participating school. Call the participating school to verify the information you receive.
5. Students begin journals in which they describe their experience with email correspondence.
6. Organize students into teams. Once a week, students read their journals to each other and discuss what they are learning
7. Continue to exchange messages and journal writings for at least 4 weeks
8. To conclude project, students write a goodbye message and a final journal entry about the project.
Timeline:
Week 1: Post Call for Collaborators soliciting partner schools
Week 2: Email procedures to all registered schools
Week 3: Exchange keypal messages. Write journal entries and discuss.
Week 4: Write goodbye message and final journal entry. Discuss final journal entry.
Subject: Language Arts
Grade level: Grades 7-12
Activity types: Keypals
Activity level: Beginner
Time frame: Ongoing
Materials Needed: Computer with email access
Objectives:
Students become more invested in their homework assignments
Parents become active members in their school assignments
Blind and visually impaired students will have access to Homework page
Procedures
1. Explain the project. Students and teachers together will create a place on the school's Web site where students and parents can find out the night's homework assignment. The center will be updated by students on a daily basis.
2. Teach students the basic of HTML. (See The Macintosh Internet Server Cookbook at http://web66.coled.umn.edu/Cookbook/MacContents.html) for tools and complete instructions for creating your site.
3. Create a schedule and process for a team to update the homework center daily with the class assignment. They will collect homework and tips to include on the site.
4. Supervise students updating the Homework Home Page site.
5. Check web assessability guidelines to determine if site is user friendly to disabled
6. Submit page to The Center for Applied Special Technology (CAST), to determine if the page is accessible.
Subject: Computer technology
Grade level: Grades 7-12
Time frame: Ongoing
- Activity types: Web Publishing/ Community Connection
Materials Needed: Computer with e/mail Web access
2. "Guideline for Accessibility," National Federation for Blind, 1998, p.1
3. "Accessibility Guideline" Center for Applied Special Technology, l994, p.1
4. "The Workforce Investment Partnership Act," P.L. 105-220, August 7, 1998.
5. "Web Content Accessibility Guidelines": World Wide Web Consortium (W3C), 1999. www.w3.org/TR/WAI-WEBCONTENT/.
6. APH.org
7. TWA.com
l. "Web Content Accessibility Guidelines": World Wide Web Consortium (W3C), 1999. www.w3.org/TR/WAI-WEBCONTENT/.
Net Lessons: Web-Based Projects For Your Classroom, Laura Parker Roerden, 1997, Songline Studios, Inc. and O'Reilly & Associates, Inc., Sebastopol, CA
Online Kids A Young Surfer's Guide To Cyberspace, Preston Gralla, John Wiley & Sons, Inc., New York, l996.
Essential Net Novice Websites : Bright Starts for Bright Minds, a Webpointers Guide Kitty Williams and Robin Lind,1999
This is a full-color guide for aspiring Web designers. The authors first explain how to browse and search the Web and then discuss how to plan and post a Web site. Basic design principles are introduced in this beginner's guide to creating appealing webpages.
--designed by the HTML Writers Guild provides six principle of Web design.
This site for Web authors is an introduction to web design that provides describes each principle as well as provides technical information.
IBM's talking Web browser for blind and visually impaired users.
www.w3.org/TR/WD-WAI-USERAGENT/.
Provides excellent information on adapting web browsers for accessibility.
Contents of 1999 Volume VII | Directory of Volumes | Index | Yale-New Haven Teachers Institute
| ||||||