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

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

- 3 - Yahoo! Confidential

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

- 4 - Yahoo! Confidential

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

- 5 - Yahoo! Confidential

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!

- 6 - Yahoo! Confidential

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

- 7 - Yahoo! Confidential

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

- 8 - Yahoo! Confidential

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

- 9 - Yahoo! Confidential

Principle 1: Perception

• Non-text content

– Images – Provide appropriate alt attribute

– CAPTCHA – Provide alternative

– Audio / Video – Closed captioning / text transcript

- 10 - Yahoo! Confidential

Principle 1: Perceivable – contd.,

• Adaptability – not mouse click alone!

• Sufficient Color Contrast – use CCA to test for contrast before choosing the colors!

- 11 - Yahoo! Confidential

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

- 12 - Yahoo! Confidential

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

- 13 - Yahoo! Confidential

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.

- 14 - Yahoo! Confidential

Principle 4: Robust

• Maximize Compatibility with current and future user agents including assistive technologies

• Provide name, role and value to all the elements

- 15 - Yahoo! Confidential

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.

- 16 - Yahoo! Confidential

Accessibility Testing

+Automated Tools (Eg: Wave/ FAE)

Manual Testing(Eg: Screen Reader)

Accessibility Testing

=

- 17 - Yahoo! Confidential

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

- 18 - Yahoo! Confidential

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

- 19 - Yahoo! Confidential

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

- 20 - Yahoo! Confidential

Questions?

Thank you!Telephone: 91 80 3077 4444

Email: srinivu@yahoo-inc.comTwitter: @VasuTweets

Our blog: http://accessibility.yahoo.com

Twitter: @yahooaccess

Fcebook: http://facebook.com/yahooaccessibility