This document discusses web accessibility. It defines web accessibility as ensuring people with disabilities can perceive, understand, navigate and interact with the web. It discusses how people with visual, hearing, cognitive and motor disabilities access the web. Reasons for web accessibility include equal opportunity, laws/regulations, and customer base. It outlines principles of perceivable, operable, understandable and robust content. It provides an overview of manual and automated testing tools and guidelines for accessible coding practices.

1.  Web Accessibility – An Introduction
 What?
 Who?
 Why?
 Principles
 Testing Tools
 Code
- Ramya Sethuraman, 2012

2. What is Web Accessibility?
Web accessibility means that people with
disabilities can use the Web. More
specifically, Web accessibility means that people
with disabilities can
perceive, understand, navigate, and interact with
the Web, and that they can contribute to the Web.

3. Who?
Visual Motor
People with
Disabilities
On the Web
Cognitive
Hearing

4. Visual
 Text size and images
 Settings for fonts, contrast and colors
 Using a screen reader

5. Hearing
 Transcripts
 Captions
 Subtitles

6. Cognitive
 Complex page layouts
 Moving, blinking, flickering content
 Page structure and context

7. Motor
 Keyboard access
 Timed forms
 Consistent Navigation & Structure

8. Why?
Equal opportunity for people with disabilities
Older users/mobile devices in public places
Customer base
Laws & Regulations
Good will.

9. Principles of Web Accessibility
Perceivable Operable
Understandable Robust
POUR!

10. Manual Testing
 Validate HTML
 Large fonts
 Style sheets/High Contrast Modes
 Alt text for images
 Audio/Video presentations
 Table headers
 Forms
 Links
 Keyboard access
 Headings, skip navigation
 Frames

11. Testing tools (among many others)
 W3C markup validation service
 Web Accessibility Toolbar for IE
 Firefox Accessibility Extension
 WAVE toolbar for Firefox
 Screen Readers – Jaws, NVDA, VoiceOver
 Inspect32

12. Accessible Coding
 Alt text for images:
<img src=“..” alt=“More details” />
 Meaningful roles:
<div role=“menu”…>,
<div aria-expanded=“false”
role=“button”
aria-controls=“messageList”>
 Using tab-index (to set focus)– usually unnecessary.
 Real headings:
<div style=“font-weight:bold”>Heading1</div> 
<h3>Heading1</h3> 
 Real lists:
<div>Item1</div><div>Item2</div><div>Item3</div> 
<ul><li>Item1</li><li>Item2</li><li>Item3</li></ul> 

13. “The power of the Web is in its universality. Access by
everyone regardless of disability is an essential aspect.”
-- Tim Berners-Lee, W3C Director and inventor of the
World Wide Web