WebAccessable Web Design
BCN Home Page |
Search |
Publish on BCN
Last Update: March 14th, 2000
BCN Home Page |
Search |
Publish on BCN
Last Update: March 14th, 2000
Overview Accessible Website Design
General Accessible Website Design Steps
10 Quick Tips to Make Accessible Web Sites
Usability Testing Goals & Techniques
argument is web sites are ‘public’services
National Federation of the Blind (NFB) lawsuit against America On-Line (AOL)
Mandates Accessible Services & Products
Law by Aug 2000,
NFB plans to sue based on this act if it is not successful with ADA
FEDERAL GOVERNMENT PURCHASING GUIDELINES
will require all federal purchases to be accessible
Compaq and Adobe federal contracts are at risk
FEDERAL GRANT RECIPIENTS
status in these guidelines unclear
• Add 25% more time and effort for an accessible web site design
Accessible design can be transparent in the code . The marketability of the site can be just as strong as any other.
Good web page design and information architecture takes upfront time.
• Multiple authors and tools used to build a site creates additional problems
special concern for BCN site design
1. Designers build template
2. Validate accessibility
3. Designers rebuild template.
3. People with disabilities usability testing
4. Designers re-build template again
5. Re validate site.
6. Go public with site
• Create rough draft files for pages in production
• Develop a good navigation system in the template
• Work with a template that has been or will be tested as accessible
minimize the skill & ability needed to interact with the site
create multiple/redundant ways to complete a task
make it graphical and text based
FYI- some screen readers read it twice which is an irritant to users
decrease the cognitive and visual load of a site
No more than 3 clicks to get to information
Avoid busy sites like ESPN
use predictable layout and site behavior
keep the design consistent
keep navigation bar in same place
use layered design approach & degradable design
layer one text
layer two graphics
layer three video/audio
• Follow the Web Accessible Initiative (WAI) standards
For Complete Guidelines & Checklist: www.w3.org/WAI
/UL>• All web designers should have the WAI quick tip card
1. Images & animation’s.
Use the alt attribute to describe the function of each visual.
2. Image maps.
Use client-side MAP and text for hotspots.
3. Multimedia..
Provide captioning and transcripts of audio,
descriptions of video.
4. Hypertext links.
Use text that makes sense when read out of context.
For example, avoid "click here."
5. Page organization.
Use headings, lists, and consistent structure.
Use CSS for layout and Graphs & charts.
6. Graphs & Charts
Summarize or use the longdesc attribute.
7. Scripts, applets, & plug-ins.
Provide alternative content in case active features are inaccessible or unsupported.
8. Frames.
Use NOFRAMES and meaningful titles.
Label with title or name attribute
9. Tables.
Make line by line reading sensible.
Summarize.
Avoid using tables for column layout
10. Check your work.
Validate.
Use tools, checklist, and guidelines at http://www.w3.org/TR/WAI-WEBCONTENT.
Validate all the web pages
• Bobby- an initial validation tool
• Source Code Review
• choose 3-5 crucial sections and go 2-3 deep
Are there text descriptions of all visual and audio information?
Has color been used to relay information? (Color blindness)
Has the code been structured to force presentation? Example includes tables in tables. They are hard for screen readers to interpret.
Are there keyboard shortcuts?
Are the tables, frames, forms ect accessibly coded
• Alternative User testing
turn images off
java off
use different browsers
don’t design just for high end power users
change default typefaces
• People with disabilities review & Usability Testing
USABILITY TESTING GOALS
1. Usefulness- does the site enable users to achieve THEIR goals
2. Effectiveness- ease of use,
-performance factors
- rate of errors
3. Learnability - intuitive design
- is the user quickly comfortable with the site?
4. Satisfaction -user likes & uses the site
USABILITY TESTING TECHNIQUES
1. Contextual Inquiry
interview people with disabilities about how they are or will use the site
2. Participatory Design
People with disabilities involved with the design team over time
3. Usability Testing
formal
interactive cycle testing beg/middle/end
exploratory - early stage
assessment- midway
validation- certify usability
comparison - 2 or more site reviews
remote evaluation
monitor mock tests /Web cams?
have people attempt to do control tasks
track what they do
Test procedures
2 rooms
participants in one / designers in other
separate two. Designers need to be there to watch or they won’t believe these are the accessible problems. If they interact with the people with disabilities they will try to help them rather than observe the difficulties they are havi ng
have equipment read and confirm network reliable
if video taping need to have signed permission of participants
accessible accommodations
hardware/software
develop controlled tasks for users
have good test monitors / human factor specialists don’t assist user during training
play dumb
be a good listener / communicator
develop good rapport with participant
know when to be flexible
have long attention span
don’t forget to observe when collecting data
Test Data
Compile & Summarize
performance
task accuracy
preference data
Analyze data
id tasks
track keystrokes
4. Focus groups
5. Surveys
6. Walk throughs
mock up of web site
rapid prototypes on paper, what would you do?
Descriptive media for video is permitting blind people and deaf people to go to the movies
Closed Captioning
Video Descriptions
Synchronized Access Multimedia Interchangeable (SAMI) is an accessibility tools used with microsofts media player. microsofts media player.
time pulse
captioning
add descriptions
Synchronized Media Interchangeable Language (SMIL)
To enable simple authoring of TV-like multimedia presentations such as training courses on the Web, W3C has designed the Synchronized Multimedia
Integration Language (SMIL, pronounced "smile"). The SMIL language is an easy-to-learn HTML-like language. Thus, SMIL presentations can be
written using a text-editor. A SMIL presentation can be composed of streaming audio, streaming video, images, text or any other media type.
Accessibility Features of SMIL
at point x show alternated media now
at point y show description now
Don’t redo original media. Add tracks to existing media.
www3 consortium approved
it basically opens other windows
ability to stop what is playing and let audio descriptions catch up to the action
Based on the research, the Adapted Interactive Media (AIM) Project developed a set of accessibility guidelines designed to help multimedia producers to develop products that are accessible to deaf and hard-of-hearing students. There are nine guidelines, organized according to the needs of this population.
The Guidelines are:
1. Provide captions for all audio in a product.
2. Provide a sign language version of spoken and written material.
3. Provide a comprehensive, pictorial glossary or dictionary.
4. Provide text at multiple reading levels.
5. Offer pathways or branches to additional information.
6 .Include supplemental print materials or a way to generate them.
7. Provide a teacher's guide or handbook with information on use with deaf students.
8. Provide tools and utilities for customizing your product.
9. Incorporate advance video organizers.
Multiple primary sense access
users in cars & telephones where temporally abled people will be using the web without one of their senses
multiple ways to render information to multiple user levels and abilities
will attract the greatest number of abled and disabled people
Subscribe to ISP f/ software bundle
dumb terminals
Six Principles of Accessible Web Design:
An Introduction to the WAI Page Author GuidelinesWeb Accessibility Initiative (WAI)
Web Content Accessibility Guidelines 1.0
Techniques for Web Content Accessibility Guidelines 1.0
Checklist of Checkpoints for Web Content Accessibility Guidelines 1.0
WAI Quick Tips Reference Card
The Access Board- Architectural and Transportation Barriers Compliance Board
WebAble
Colour Blind Design Hints and Tips
Accessible Web design - a definition
Accessible HTML
HTML Writers Guild's AWARE Center.
AWARE stands for Accessible Web Authoring Resources and Education, and our mission is to serve as a central resource for web authors for learning about web accessibility.Handicapped access' hits the Web
Feds to unveil proposed standards for federal sites to be accessible to the disabled. Commercial sites may feel impact too.Yahoo: Web Page Design & Layout
Accessibility: more than the right thing to do
Knowbility
provides educational and employment opportunities in Information Technology for youth and adults with disabilities and other disadvantaging conditions.We MediaA for profit site incorporating accessible web page design including code for vibrating mouse. Site is not however Bobby approved.
Training Manual for Working With Youth Volunteers Who Have Disabilities produced by Youth Volunteer Corps. Includes practical guidelines, worksheets and evaluation tips, as well as a terrific appendix of resources from other organizations. Order by visiting Energize.com or by calling Youth Volunteer Corps at 913-432-9822
Myths and Courtesy Tips for Working with Disabled Volunteers by Nan Hawthorne, CyberVPM A list of common myths about disability and helpful tips on courtesy and use of courteous language. Most of these were gathered via the Internet by finding forums devoted to specific disabilities and asking for feedback from disabled people themselves, their families and friends. There is also a list of myths about and courtesy tips for the treatment of non-disabled people by disabled people.
Disability Etiquette Handbook The City of San Antonio produced this excellent guide that includes Reception Etiquette, Conversational Etiquette, Interview Scheduling Etiquette, Interviewing Technique Etiquette, Interviewing Courtesies for Effective Communication, Do and Don'ts, and a Glossary of Acceptable Terms.
Diversity and Volunteerism: Deriving Advantage from Difference By Santiago Rodriguez, from his presentation at the 1996 International Conference on Volunteer Administration, and appearing in the Journal of Volunteer Administration
Mitsubishi Electric America Foundation funds projects that help youth with disabilities. They funded the VV Project for more than two years to help accommodate people with disabilities, particularly youth, in online volunteering activities. All of their funded projects focus on empowering youth with disabilities, and these projects have resulted in a lot of helpful materials and activities for anyone looking to involve people with disabilities in any capacity. Have a look at their web site for more info:
Course Designing for Universal Accessibility with HTML 4.0 - The HTML Writers Guild
Disability Inclusion (ADA) & AmeriCorps An extensive set of online resources designed specifically to help leaders involve people with disabilities in AmeriCorps programs, including details on the legal obligations of AmeriCorps programs to people with disabilities, a checklist to help determine accessibility in your AmeriCorps programs and facilities, tips on making your program inclusive and accessible, and other tools for AmeriCorps programs. Also includes ADA-related material.
Involving People with Disabilities in Virtual Volunteering Program Tips for outreach, accommodations, conversation, volunteer orientation and matching, evaluation and staff training. Information includes: working via the Internet with volunteers who have learning disabilities or other nonapparent disabilities, experiences involving youth with disabilities, feedback from online volunteers with disabilities, and tips for making an agency virtually accessible to people with disabilities.
On Wednesday, 9 February, the US Congressional Judiciary Committee (Sub-Committee on the Constitution) held a Hearing to investigate whether the Americans with Disabilities Act should be applied to commercial Internet service providers and websites. Nine witnesses were called to give testimony, representing the various interests at stake.
Access and AccessibilityThe digital divide is better represented as a continuum of divides. This continuum recognizes that access to technology does not and should not automatically imply accessibility. "Accessible" and "accessibility" is distinguished from "access" in this way: access is being able to get to a computer for its use. Access focuses on the availability of hardware, software, infrastructure and -- in the case of libraries and community technology centers -- service hours and trained staff. "Accessibility" refers to whether or not the technology allows end-users to make use of the technology. Just as technology skills and relevant content are integral components to bridging the digital divide, accessible design for people with disabilities is essential to making the Internet truly universal.