swq_mistral_blue.gif
http://susanwquinn.wikispaces.com


Accessible Web Design


Accessibility means many things. This list currently focuses on making electronic materials, including web-based items, accessible and usable to as many users as possible. Accessible and usable are two terms that are related. A fairly simple definition of the difference between usability and accessibility that I like is “The goal of usability is a better experience for the user; better in terms of efficiency, effectiveness, and satisfaction. In contrast, the goal of accessible design is the removal of barriers to access based on disability, technical or environmental limitations.” (1)

"Accessibility ... is the degree to which that Web site is usable by people with disabilities. Web pages often have access issues for the following groups of people:
- Visually impaired people using screen readers
- Hearing impaired people using browsers with no sound
- Physically impaired people
- Color blind people" (2)*

Another related concept is Universal Design for Learning (UDL) which also goes by other terms such as human-centered or user-centered design. The idea is that you design materials for all users. - SWQ

Also see Computer Accessibility, CSS (Cascading Style Sheets), Section 508, Accessibility Basics, Assistive Technology, Captioning

General Information
Guidelines and Standards
Alt (Alternative) Text
Accessible Multimedia
Web Access for Specific Populations
Toolbars for Users and Developers
- General Toolbars
- Toolbars for Internet Explorer
- Toolbars for Mozilla Firefox


GENERAL INFORMATION


The Family Center on Technology and Disability www.fctd.info/resources?on=category&tag=Web+Accessibility
We found 129 resources in category Web Accessibility

People with Disabilities on the Web
http://www.webaim.org/intro/#people

Scenarios of People with Disabilities Using the Web
http://www.w3.org/WAI/EO/Drafts/PWD-Use-Web/#usage

World Wide Web Consortium (W3C)
http://www.w3.org/WAI/
“The W3C's commitment to lead the Web to its full potential includes promoting a high degree of usability for people with disabilities. The Web Accessibility Initiative (WAI), in coordination with organizations around the world, is pursuing accessibility of the Web through five primary areas of work: technology, guidelines, tools, education & outreach, and research & development”

Web Content Accessibility Guidelines
http://www.w3.org/TR/WAI-WEBCONTENT/

WebAIM
http://www.webaim.org/
This organization – Web Accessibility In Mind - conducts hands-on training workshops, provides an e-mail discussion group, and a website with a great deal of information, articles, and simulations. This site is a great source of “how to” articles for web developers, and it includes a series of Tutorials on many related topics.

Simulation: Screen Reader
http://www.webaim.org/simulations/screenreader
This is a simulation of a screen reader. Shockwave Player is required. (There is a link to download this free player from this page.)

Dive Into Accessibiltiy: 30 days to a more accessible web site
http://diveintoaccessibility.org/
"This [online] book answers two questions. The first question is "Why should I make my web site more accessible?" ... The second question is "How can I make my web site more accessible?" If you are not convinced by the first answer, you will not be interested in the second."

Watchfire – Accessibility Module: Enabling Web Accessibility Compliance
http://www.watchfire.com/products/webxm/accessibilityxm.aspx
This site contains good information about compliance with accessibility standards from the online business perspective. Watchfire is the distributor of Bobby, which is a tool for analyzing accessibility of web pages. (CAST developed Bobby.) See more information about Bobby in the Tools area below.

WebABLE http://www.webable.com/
“The WebABLE site goal is to stimulate education, research, and development of technologies that will ensure accessibility for people with disabilities to advanced information systems and emerging technologies.”

Trace Center – Designing More Useable Web Sites

http://www.trace.wisc.edu/world/web/index.html
This is part of the Trace Center’s Designing a More Useable World – for All site (http://trace.wisc.edu/world) “The Trace Research & Development Center is a part of the College of Engineering, University of Wisconsin-Madison. Founded in 1971, Trace has been a pioneer in the field of technology and disability.”

The Web Accessibility Tutorial by Jim Thatcher
http://jimthatcher.com/webcourse1.htm
This online course covers a wide range of topics related to accessibility of web-based materials. Excellent!

Accessibility of the Internet in Postsecondary Education: Meeting the Challenge
http://www.webaim.org/articles/meetchallenge/

Introduction to Web Accessibility
http://www.w3.org/WAI/intro/accessibility.php

Accessibility and Usability
http://www.freedomscientific.com/Training/accessibility.asp

Quick Tips to Make Accessible Web Sites
http://www.w3.org/WAI/quicktips/

How does accessible web design benefit all web users?
http://www.washington.edu/accessit/articles?197

Usability.gov
http://usability.gov/
“Your guide for developing usable & useful Web Sites”

Usability and Accessibility: Best Friends or Worst Enemies by Dey Alexander (pdf)
http://www.valaconf.org.au/vala2006/papers2006/99_Alexander_Final.pdf

Webcredible
http://www.webcredible.co.uk/

Trying to Define Web Accessibility
http://www.joedolson.com/articles/2006/10/trying-to-define-web-accessibility/

Another–ability: Accessibility Primer for Usability Specialists
http://www.uiaccess.com/upa2002a.html

Tip Sheets: Accessibility
http://www.chin.gc.ca/English/Digital_Content/Tip_Sheets/Accessibility_CHIN/definition.html

Web Page Design and Layout > Accessibility - links
http://dir.yahoo.com/Arts/Design_Arts/Graphic_Design/Web_Page_Design_and_Layout/Accessibility/

Web Accessibility
http://webdesign.about.com/od/accessibility/Web_Accessibility_Web_Usability.htm

Web Design & Development I
http://www.washington.edu/accessit/webdesign/index.htm
This course curriculum, by AccessIT, is a "project-based introduction to web design developed for use in secondary schools, grades 9-12. The curriculum emphasizes standards-based and accessible design, is cross-platform and vendor-neutral, and is freely available for teachers to use in their own classrooms."

Web Design & Development I
http://www.washington.edu/accessit/webdesign/index.htm
This course curriculum, by AccessIT, is a "project-based introduction to web design developed for use in secondary schools, grades 9-12. The curriculum emphasizes standards-based and accessible design, is cross-platform and vendor-neutral, and is freely available for teachers to use in their own classrooms."

Creating Accessible Online Documents and Web Pages
http://hightech.redwoods.edu/accessibility/

General Information on Web Page Setup
http://help-csli.stanford.edu/pagesetup/
This is from The Center for the Study of Language and Information (CSLI) at Stanford University. It includes a large subset of Accessibility topics and links.

Making the Web Accessible for All
http://www.stanford.edu/%7Ecquinn/webcreators/
A presentation by Christine A. Quinn, Stanford University

Distance Education Clearinghouse: Accessibility
http://www.uwex.edu/disted/access.html

A Review of Free, Online Accessibility Tools
http://www.webaim.org/articles/freetools/

Accessibility Evaluation Tools
http://www.webaim.org/articles/tools/

Web Captioning
http://www.webaim.org/techniques/captions/

8-Step Implementation Model
http://www.webaim.org/articles/implementation/

SC Access Database
https://scaccess.communityos.org/cms/
A directory for finding aging and disability resources.

SC State Library - Web Accessibility
http://www.state.sc.us/scsl/access

Web Site Accessibility
http://www.clemson.edu/accessibility/
This is from Clemson University.

Making Educational Software and Web Sites Accessible: Design Guidelines including Math and Science Solutions
http://ncam.wgbh.org/cdrom/guideline/

Java Accessibility
http://hermitage.stanford.edu/docs/jdk/1.2/docs/guide/access/index.html
This is specific to designing web sites with Java. It includes links to the Java Accessibility Overview, a guide developed at Stanford, and to Java Accessibility Utilities Version 1.2.2 (which is at the java.sun.com site).

Accessible Web (University of Arizona)
http://uaweb.arizona.edu/ua_accessible/
“It is the policy of the University of Arizona to ensure that University Web pages will be usable by people with disabilities. The UA Accessible Icon can be displayed on web sites that meet the current standards for accessibility according to the UA Web Accessibility Implementation Plan.”

Web Accessibility: Why Make a Web Site Accessible?
http://uaweb.arizona.edu/resources/why.shtml

Accessible Web Site Requirements
http://uaweb.arizona.edu/ua_accessible/requirements.shtml

Web Resources
http://uaweb.arizona.edu/resources/webmaster-resources.shtml

Web Accessibility
http://uaweb.arizona.edu/resources/accessibility.shtml

Creating Accessible Web Pages: Overview
http://www.colorado.edu/webcom/access/

Resources and Training
http://www.colorado.edu/webcom/access/resources.html
This area includes links to both local and national resources.

Tools and Resources for Accessible Web Design
http://www.colorado.edu/sacs/ATconference/Tools_and_resources.html
Compiled by John M. Slatin a the University of Texas – Austin

Accessible Web Design: What, Why, How?
http://www.its.uiowa.edu/cs/at/webdesign.html
A very nice list.

Web Accessibility 101: Text Only Version of a Graphical Web Page
http://www.doit.wisc.edu/accessibility/online-course/standards/textonly.htm

Accessible Documents and Web Pages
http://accessibledocs.wikispaces.com/

Designing for Accessibility – Overview [NC State]
http://ncsu.edu/it/access/webaccess/index.php
Great site! If you click on the Tutorials in the menu on the left, you will see links to accessibility tutorials about web sites, Word documents, PDFs, presentations, and forms. (Don’t forget to explore the options in the menu on the right side of the page, too!)

Designing for Screen Reader Compatibility
http://www.webaim.org/techniques/screenreader/

Testing with Screen Readers: Questions and Answers
http://www.webaim.org/articles/screenreader_testing/

Creating Accessible Documents – Overview [NC State]
http://ncsu.edu/it/access/tutorials/

Aquatic Arts - Learn by Example [Wisconsin-Madison]
http://www.cew.wisc.edu/accessibility/examples/goodbad/goodbadintro.htm
“In order to illustrate the best practices for accessible web page design, we have created a website that contains both Inaccessible & Accessible pages. These examples should provide solutions to the most common accessibility issues currently facing web content managers.”

Accessible IT @ NC State
http://ncsu.edu/it/access/

A Conceptual Framework for Accessibility Tools to Benefit Users with Cognitive Disabilities
http://www.webaim.org/articles/framework/

100 Killer Web Accessibility Resources: Blogs, Forums and Tutorials
http://whdb.com/2008/100-killer-web-accessibility-resources-blogs-forums-and-tutorials/

Follow the Rainbow: 101 Color Resources for Web Designers
http://whdb.com/2008/follow-the-rainbow-101-color-resources-for-web-designers/
Includes information about colorblindness.

Developer guidelines
http://www-03.ibm.com/able/guidelines/index.html
This site, by the Human Ability and Accessibility Center at IBM , has ‘checklists and techniques’ for software, web, Java, Lotus Notes, hardware (2) and documentation accessibility.

Design Guidelines for Electronic Publications, Multimedia and the Web
http://ncam.wgbh.org/publications/adm/index.html

Making Educational Software Accessible: Design Guidelines Including Math and Science Solutions
http://ncam.wgbh.org/cdrom/guideline2000/

Voluntary Product Accessibility Template (VPAT)
http://www.itic.org/archives/articles/20040506/faq_voluntary_product_accessibility_template_vpat.php

Creating Semantic Structure
http://www.webaim.org/techniques/semanticstructure/

GUIDELINES AND STANDARDS


Research-Based Web Design & Usability Guidelines
http://www.usability.gov/pdfs/guidelines.html

IMS Guidelines for Developing Accessible Learning Applications (index)
http://ncam.wgbh.org/salt/guidelines/index.html

Guidelines for Developing Accessible Interfaces and Interactive Environments
http://ncam.wgbh.org/salt/guidelines/sec8.html

Guidelines for Accessible Delivery of Text, Audio, Images, and Multimedia
http://ncam.wgbh.org/salt/guidelines/sec5.html

ALT (ALTERNATIVE) TEXT


Alt Text for Images
http://jimthatcher.com/webcourse2.htm

Appropriate Use of Alternative Text
http://www.webaim.org/techniques/alttext/

Alternative Text Quality
http://www.cynthiasays.com/About%20Reports/Alt%20Quality.htm

Creating Alt Text
http://www.cew.wisc.edu/accessibility/tutorials/altTextTutorial.htm

How to Create Descriptive Text for Graphs, Charts & other Diagrams
http://www.cew.wisc.edu/accessibility/tutorials/descriptionTutorial.htm

ACCESSIBLE MULTIMEDIA

Also see Captioning and Accessible Images in Graphic Images


Media Player Accessiblity
http://www.webaim.org/techniques/captions/mediaplayers/#conclusion
Creating Accessible Images
http://www.webaim.org/techniques/images/

Web Accessibility 101: Creating Accessible Images
http://www.doit.wisc.edu/accessibility/online-course/standards/images.htm

Accessible Images, Image Format Converter, and More
http://msdn.microsoft.com/en-us/magazine/cc164119.aspx

Creating Accessible Flash Content
http://www.webaim.org/techniques/flash/

WEB ACCESS FOR SPECIFIC POPULATIONS


Cognitive Disabilities Part 1: We Still Know Too Little, and We Do Even Less
http://www.webaim.org/articles/cognitive/cognitive_too_little/

Cognitive Disabilities Part 2: Conceptualizing Design Considerations
http://www.webaim.org/articles/cognitive/conceptualize/

Visual vs Cognitive Disabilities
http://www.webaim.org/articles/vis_vs_cog/

Playing by Ear: Creating Blind-Accessible Games
http://www.gamasutra.com/resource_guide/20020520/andersen_pfv.htm

(Accessibility) Guides by Impairment
http://www.microsoft.com/enable/guides/default.aspx

TOOLBARS FOR USERS AND DEVELOPERS


- GENERAL TOOLBARS

WAVE
http://wave.webaim.org/
“WAVE is a free web accessibility evaluation tool provided by WebAIM. … Rather than providing a complex technical report, WAVE shows the original web page with embedded icons and indicators that reveal the accessibility of that page.” You can enter a URL, upload a file, or copy HTML code and Wave it. You can also make a WAVE button or install a WAVE Firefox add-in.

WebAnywhere: A Screen reader on the go
http://webanywhere.cs.washington.edu/
“WebAnywhere is a web-based screen reader for the web. It requires no special software to be installed on the client machine and, therefore, enables blind people to access the web from any computer they happen to have access to that has a sound card.”

WebAnywhere: A Screen Reader On-the-Go [YouTube] 6:48
http://www.youtube.com/watch?v=wfjD06aOxts
(This movie is also on the Washington web page.)


- TOOLBARS FOR INTERNET EXPLORER

AIS (Accessible Information Solutions) Web Accessibility Toolbar
http://www.visionaustralia.org.au/info.aspx?page=614
Download it here.

Using the AIS Web Accessibility Toolbar
http://www.webaim.org/articles/ais/

AIS Accessibility Toolbar [WebAIM]
http://www.webaim.org/resources/ais/


- TOOLBARS FOR MOZILLA FIREFOX
(also see WAVE above)

Firefox Accessibility Extension
http://firefox.cita.uiuc.edu/
“The Firefox Accessibility Extension makes it easier for people with disabilities to view and navigate web content. Developers can use the extension to check their use of structural and styling markup that support functional web accessibility.”

Add-ons for Firefox
https://addons.mozilla.org/en-US/firefox/addon/5809

Accessibar (Firefox) [Currently not available for 3.5 or higher]
http://accessibar.mozdev.org/index.html
“Accessibar is a toolbar extension for Firefox which aims at providing various accessibility features for users who could benefit from them. These features primarily focus on the dynamic manipulation of the visual display of the web page in addition to the integration of a text to speech reader which can read out loud the browser's user interface as well as web page content.”

Evaluating Web Sites for Accessibility with the Firefox Web Developer Toolbar
http://www.webaim.org/articles/evaluatingwithfirefox/

Chris Pederick (Developer of the Web Developer Toolbar)
http://chrispederick.com/work/web-developer/
You can download the latest version here.





* Sources:
(1) from http://www.valaconf.org.au/vala2006/papers2006/99_Alexander_Final.pdf
(2) from http://webdesign.about.com/od/usability/g/usability.htm and http://webdesign.about.com/od/accessibility/g/bldefaccessibil.htm