The Online Experience: Accessibility & Usability for Everyone

1. The Online Experience:Accessibility & Usabilityfor Everyone Richard W. Smith

2. 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.

3. 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.

4. Usability vs. Accessibility • A site that is usable is not necessarily accessible. • A site that is accessible is not necessarily usable.

5. Why should we make web pages Accessible? • Ethical reasons. • Accessible design makes your design and the code behind the design better. • Legal reasons.

6. 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.

7. 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”.

8. 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.

9. 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.

10. 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.

11. How to check for Accessibility • Validation websites • Jaws • Mozilla Firefox Extensions

12. 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

13. 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

14. 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

15. 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.

18. 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.

22. 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.

23. IMG tag without an ALT attribute • <img src=“image1.jpg”> • A screen reader will read this out loud as:“image1.jpg”

24. 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”

25. 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”>

26. 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=“”>

27. 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.

28. 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.

29. 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………….