Web Accessibility25-26 September, 2009

-Srinivasu

- 2 -

Agenda

• What’s Disability?• World Wide Web Consortium (W3C)• W3Cs Web Accessibility Initiative (WAI)• Web Content Accessibility Guidelines (WCAG) 2.0

Introduction• Assistive Technologies• Building Accessible Websites• Guideline 1 – Perceivable• Guideline 2 – Operable• Guideline 3 – Understandable• Guideline 4 – Robust• Accessibility Testing

- 3 -

What’s Disability

• Situational Disability– Reaching late to venue… Traffic in

city– Oops! My mouse stopped working,

what do I do?– Text is too small on this webpage,

how do I read this?• Functional Disability

– Visually impaired– Mobility impaired– Hard of hearing– Learning disability– Autism, Cerebral Palsy

- 4 -

World Wide Web Consortium (W3C)

• Develops interoperable technologies– Specifications– Guidelines– Software– Tools

• Why would they do it?– To lead web to its potential and for consistency on web…

- 5 -

W3C’s WAI (Web Accessibility Initiative)

WAI develops...• Guidelines widely considered as the international standard

for Web accessibility • Support materials to help understand and implement Web

accessibility

WAI welcomes...• Participation from around the world • Volunteers to review, implement, and promote guidelines • Dedicated participants in working groups

- 6 -

Web Content Accessibility Guidelines (WCAG) 2.0

• WCAG 2.0 has evolved over years based on feedback and recommendation.

• It defines how to make web content more accessible.

• Currently WCAG 2.0 is official recommendation http://www.w3.org/tr/wcag20

- 7 -

Assistive Technologies

• Screen Magnifier • Screen Reader• Speech Recognition• Refreshable Braille• Text Browsers• Large keyboard• Mouse substitute such as a joystick, a

trackball, on-screen keyboard.• Scanning Software• Speech Synthesis• Some Pictures

- 8 -

Building Accessible Websites

• Laying Accessibility Foundation– Table-less layouts – easy to manage, avoid problems for

screen readers– Structured mark-up – Need for Search Engines, better access

to assistive technologies– Valid code – Assistive Technologies completely rely on your

code, if you mess-up, those users will hate you

- 9 -

Guideline 1: Perception

• Non-text content– Images – provide alt / long desc attribute– CAPTCHA – provide alternate in audio CAPTCHA or use

CAPTCHA based on logical questions

- 10 -

Guideline 1: Perceivable – contd.,

• Audio / Visual Content – provide closed captions• Adaptability – should be fleixible. User should be able to use

their own style sheets• Contrast – ensure that foreground and background will have

sufficient contrast

- 11 -

Guideline 2: Operable

• Keyboard access – all information and functionality should be available to access via keyboard including:– Links– Headings– Form fields– Lists– Tables

- 12 -

Guideline 2: Operable – contd.,

• Enough time – User should have sufficient time to read and interact with content. If content is time-based, same should be notified prior to the session and user should be given an option to extend time limit unless time limit is mandatory.

• Seizures – seizures should generally be avoided as far as possible

• Navigable – Web page should be easily navigable by any input device including assistive technologies

- 13 -

Accessible Rich Internet Applications (ARIA)

• ARIA is WAI Recommendation http://www.w3.org/WAI/intro/aria.php

• WAI-ARIA, the Accessible Rich Internet Applications Suite, defines a way to make Web content and Web applications more accessible to people with disabilities. It especially helps with dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies.

- 14 -

Guideline 3: Understandable

• Use of Natural Language – unless a specific terminology is required

• Predictable – User should be able to predict the result upon his action

• Input assistance – provide adequate help for user to interact with forms etc.

- 15 -

Guideline 4: Robust

• Compatibility with latest technologies and support for assistive technologies

• Add Accessible Rich Internet Applications (ARIA) support for RIA such as AJAX based applications– Alert– Landmark etc…

- 16 -

Accessibility Testing

+Automated Tools (Eg: Wave/ FAE)

Manual Testing(Eg: Screen Reader)

Accessibility Testing

=

- 17 -

Accessibility Testing - Automated

• WAVE – http://wave.webaim.org/toolbar• Firefox Accessibility extension• Add-ons of Mozilla Firefox

https://addons.mozilla.org/en-US/firefox/search?q=accessibility&cat=all

- 18 -

Accessibility Testing – Manual

• Screen Readers– NVDA – http://www.nvda-project.org– JAWS for Windows – http://www.freedomscientific.com

• Screen Magnifiers– ZoomText Xtra – http://www.aisquared.com– Dolphin Supernova – http://www.yourdolphin.com

• Alternate Input devices – – Track ball and switch – http://www.ablenetinc.com

• Dragon Naturally Speaking – http://www.nuance.com

• Talks – a screen reader for mobile S60 phones – http://www.nuance.com/talks/

Thank You