Role of-engineering-best-practices-to-create-an-inclusive-web final-1

Role of Engineering Best Practices to create an inclusive web! Srinivasu Chakravarthula YAHOO! CONFIDENTIAL

In this…
What is Web Accessibility?
Why Accessibility?
Engineers to understand
Frequent Accessibility errors
Some of the common misconceptions
Solution
WCAG: Principle 1: Perceivable
WCAG: Principle 2: Operable
WCAG: Principle 3: Understandable
WCAG: Principle 4: Robust
ARIA
Accessibility Testing
Automated Testing
Manual Testing
YUI and Accessibility
YU

What’s web accessibility?
To provide equal access to information on the world wide web to everyone, irrespective of people with all abilities or with any limitations
From Wikipedia:
“ Web accessibility refers to the inclusive practice of making websites usable by people of all abilities and disabilities. When sites are correctly designed, developed and edited, all users can have equal access to information and functionality.”
Source: http://en.wikipedia.org/wiki/Web_accessibility

Why Accessibility?
As per World Health Organization (WHO), there are around 650 million people with disabilities around the world
US and India has around 60 million people with disabilities in each country
Increases the SEO ranking; not just for people with disabilities
Works pretty well on a mobile device
Increase the customer base

Engineers need to understand about…
People with Situation Disability
People with Functional Disability
Importance to write semantic mark-up
Apply appropriate techniques no matter what technology they use!

Frequent Accessibility errors…
No text alternative
No headings
No form labels
No keyboard access
Poor color combination
No user control for flash content
No keyboard access to dynamic functions

Some of the common misconceptions…
Accessibility is an additional effort
Accessibility is just for visually impaired users
Accessibility is an expensive task
Need to provide a separate text version of the website

Solution…
Consider accessibility right at the initial stage of the project
Web Content Accessibility Guidelines (WCAG) 2.0 – http://w3.org/tr/wcag20/
Accessible Rich Internet Applications (ARIA) - http://www.w3.org/WAI/intro/aria.php
Authoring Tool Accessibility Guidelines (ATAG) - http://www.w3.org/WAI/intro/atag.php

Principle 1: Perception
Non-text content
Images – Provide appropriate alt attribute
CAPTCHA – Provide alternative
Audio / Video – Closed captioning / text transcript

Principle 1: Perceivable – contd.,
Adaptability – not mouse click alone!
Sufficient Color Contrast – use CCA to test for contrast before choosing the colors!

Principle 2: Operable
Keyboard access – all information and functionality should be available to access via keyboard including:
Links – provide descriptive links; avoid “click here…”
Headings – mark up with Hx attributes
Form fields – provide associated labels and ARIA support for dynamic forms
Lists – define lists and nested lists with correct mark-up
Tables – provide table summary, caption and associated headers

Principle 2: Operable – contd.,
Enough time – provide sufficient time to the users and provide option to increase the time as desired
Seizures – seizures should generally be avoided as far as possible
Navigable – Web page should be easily navigable by any input device including assistive technologies

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

Principle 4: Robust
Maximize Compatibility with current and future user agents including assistive technologies
Provide name, role and value to all the elements

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.

Accessibility Testing
+
Automated Tools (Eg: Wave/ FAE) Manual Testing (Eg: Screen Reader) Accessibility Testing =

Accessibility Testing - Automated
WAVE – http://wave.webaim.org/toolbar
Web Developer Kit - https://addons.mozilla.org/en-US/firefox/addon/60
Color Contrast Analyzer - http://visionaustralia.org/info.aspx?page=628

Accessibility Testing – Manual
Screen Readers
NVDA for Windows– http://www.nvda-project.org
VoiceOver for Mac, iPhone and iPad
Talks or Mobile speak for symbian based mobile phones
Screen magnifiers
Dolphin Supernova
In-built screen magnifier in Windows 7
Alternate input tools
On-screen keyboard
Single switch
Head mounted mouse

YUI and Accessibility
We have a lot of accessible controls in YUI 3 such as TabView, Menu, Calendar and so on…
We have used ARIA to make the widgets accessible.
See the blog with videos at http://yuiblog.com/blog/category/accessibility

Questions?

Thank you! Telephone: 91 80 3077 4444 Email: [email_address] Twitter: @VasuTweets Our blog: http://accessibility.yahoo.com Twitter: @yahooaccess Fcebook: http://facebook.com/yahooaccessibility

Role of-engineering-best-practices-to-create-an-inclusive-web final-1

by Srinivasu Chakravarthula on Mar 20, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 55

Statistics

Role of-engineering-best-practices-to-create-an-inclusive-web final-1 — Presentation Transcript