The Online Experience:

Accessibility & Usabilityfor Everyone

Richard W. Smith

What is Accessibility?

Refers to providing access for ALL people to the computer environment, including those people with disabilities. (Source: http://www.csus.edu/uccs/training/online/glossary.htm)

Designing sites and systems for the way that screen readers, text browsers, and other adaptive technologies interact with the Web. Choosing contrasting colors for readability, and providing alternative tags for graphics are examples of making Web sites more accessible. (Source: http://www.csus.edu/uccs/training/online/glossary.htm)

Accessibility can be tested for.

What is Usability?

Concerns how easy it is for a user to find the information they require from a given Web site. (Source: http://www.bized.ac.uk/educators/16-19/business/marketing/lesson/sup_glossary.htm)

Usability cannot be tested for. Studied, but not tested.

Usability vs. Accessibility

A site that is usable is not necessarily accessible.

A site that is accessible is not necessarily usable.

Why should we make web pages Accessible?

Ethical reasons.

Accessible design makes your design and the code behind the design better.

Legal reasons.

Legal Reasons

Section 508 of the Rehabilitation Act. Americans with Disabilities Act. Office of Civil Rights. Their mission is to

ensure equal access to education and to promote educational excellence throughout the nation through vigorous enforcement of civil rights.

State laws.

Section 508 of the Rehabilitation Act

In 1998, Congress amended the Rehabilitation Act of 1973 to require Federal agencies to make their electronic and information technology accessible to people with disabilities. Law went in effect in 2001.

Legality in relation to State and Local organizations are unclear.

Many colleges and non-federal agencies are adopting 508 standards “just in case”.

ADA & Atlanta MARTA

In 2002, three physically disabled individuals filed a lawsuit against Atlanta's mass transit system (MARTA) for alleged violations of Title II of the ADA. One portion of their lawsuit focused on the lack of availability of information about bus routes on their website.

On October 15, 2002, U.S. District Judge Thomas W. Thrash, Jr. ruled that MARTA had 30 days to address their violations of the ADA.

Accessibility Standards

Section 508.

Web Accessibility Initiative (WAI) of the The World Wide Web Consortium (W3C)http://www.w3.org/WAI/ . International standard for Web accessibility.

WAI is much more strict than Section 508.

Potential Accessibility Problems

Blind users. Users of screen readers. Deaf users. Need for text equivalents for

audio/video. Non-Mouse users. Some people cannot use a

mouse to navigate the web. Screen color issues. Color blindness. Other vision issues. “Blinking” web pages. May cause seizures to certain

individuals.

How to check for Accessibility

Validation websites

Jaws

Mozilla Firefox Extensions

Validation Websites

http://webxact.watchfire.com/ . Successor to the Bobby analyzer tool.

http://www.contentquality.com/mynewtester/cynthia.exe . Cynthia Says!

WAVE from WebAIM.http://dev.wave.webaim.org/index.jsp

Jaws

Screen Reader software from Freedom Scientific.

Available in HCC Assistive Technology Lab. Using Screen Reader allows a designer to

“experience” the web in a whole different way.

http://www.webaim.org/simulations/screenreader-sim.htm

Mozilla Firefox Extensions

Mozilla Firefox has extensions, or extra tools that can be added to enhance browsing and development.

Web Developer. http://chrispederick.com/work/webdeveloper/

Fangs Screen Emulator.http://www.standards-schmandards.com/fangs

Web Developer extension

http://chrispederick.com/work/webdeveloper/ Adds a menu and a toolbar to the browser

with various web developer tools, including automatic links to a Section 508 and WAI validation tool.

Also has links to check IMG/ALT tags and other various image viewing options.

Fangs Screen Emulator extension

Creates a text version of a web page similar to how the page would be read by a screen reader.

Works well in situations where access to a Jaws equipped machine is not possible.

Image Tags

Most problematic parts of a web page, in regards to Accessibility.

But proper use of image tags on a web page are the quickest fix to accessibility problems.

IMG tag without an ALT attribute

<img src=“image1.jpg”>

A screen reader will read this out loud as:

“image1.jpg”

IMG tag with an improper ALT attribute

<img src=“image1.jpg” alt=“spacing bar graphic”>

A screen reader will read this out loud as:

“spacing bar graphic”

IMG tag with a proper ALT attribute. Image provides a user function

If the image on a web page is linkable or provides valuable information, then an appropriate ALT tag must be used.

<img src=“image1.jpg” alt=“click here to proceed to the catalog”>

IMG tag with a proper ALT attribute. Image provides no user function

If the image on a web page offers no value to a non-graphical user, a null or empty ALT tag must be used. A space holding graphic is an example of this.

<img src=“image1.jpg” alt=“”>

Other Fixes

Tables need to be defined as to whether they are used for data or just for layout.

PDF files can be accessible with a lots of work.

Alternatives to multimedia. Powerpoint conversions.

Retrofitting the Web

Retrofitting the web is time consuming, but it is needed to make the web accessible and usable.

Numerous resources are available for web testing.

Proper use of image tags will fix most accessible issues.

The Future:Universal Design and Web Standards

Universal Design is a method of design, where the user experience is the same for any user, on any platform.

The use of Web Standards will help in this regard.

Unfortunately, Web Standards are not yet standard………….