Role of-engineering-best-practices-to-create-an-inclusive-web final-1
-
Upload
srinivasu-chakravarthula -
Category
Design
-
view
2.314 -
download
0
description
Transcript of Role of-engineering-best-practices-to-create-an-inclusive-web final-1
![Page 1: Role of-engineering-best-practices-to-create-an-inclusive-web final-1](https://reader035.fdocuments.in/reader035/viewer/2022070313/554ab4f3b4c905df668b589c/html5/thumbnails/1.jpg)
Role of Engineering Best Practices to create an inclusive web!
Srinivasu Chakravarthula
YAHOO! CONFIDENTIAL
![Page 2: Role of-engineering-best-practices-to-create-an-inclusive-web final-1](https://reader035.fdocuments.in/reader035/viewer/2022070313/554ab4f3b4c905df668b589c/html5/thumbnails/2.jpg)
- 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
![Page 3: Role of-engineering-best-practices-to-create-an-inclusive-web final-1](https://reader035.fdocuments.in/reader035/viewer/2022070313/554ab4f3b4c905df668b589c/html5/thumbnails/3.jpg)
- 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
![Page 4: Role of-engineering-best-practices-to-create-an-inclusive-web final-1](https://reader035.fdocuments.in/reader035/viewer/2022070313/554ab4f3b4c905df668b589c/html5/thumbnails/4.jpg)
- 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
![Page 5: Role of-engineering-best-practices-to-create-an-inclusive-web final-1](https://reader035.fdocuments.in/reader035/viewer/2022070313/554ab4f3b4c905df668b589c/html5/thumbnails/5.jpg)
- 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!
![Page 6: Role of-engineering-best-practices-to-create-an-inclusive-web final-1](https://reader035.fdocuments.in/reader035/viewer/2022070313/554ab4f3b4c905df668b589c/html5/thumbnails/6.jpg)
- 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
![Page 7: Role of-engineering-best-practices-to-create-an-inclusive-web final-1](https://reader035.fdocuments.in/reader035/viewer/2022070313/554ab4f3b4c905df668b589c/html5/thumbnails/7.jpg)
- 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
![Page 8: Role of-engineering-best-practices-to-create-an-inclusive-web final-1](https://reader035.fdocuments.in/reader035/viewer/2022070313/554ab4f3b4c905df668b589c/html5/thumbnails/8.jpg)
- 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
![Page 9: Role of-engineering-best-practices-to-create-an-inclusive-web final-1](https://reader035.fdocuments.in/reader035/viewer/2022070313/554ab4f3b4c905df668b589c/html5/thumbnails/9.jpg)
- 9 - Yahoo! Confidential
Principle 1: Perception
• Non-text content
– Images – Provide appropriate alt attribute
– CAPTCHA – Provide alternative
– Audio / Video – Closed captioning / text transcript
![Page 10: Role of-engineering-best-practices-to-create-an-inclusive-web final-1](https://reader035.fdocuments.in/reader035/viewer/2022070313/554ab4f3b4c905df668b589c/html5/thumbnails/10.jpg)
- 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!
![Page 11: Role of-engineering-best-practices-to-create-an-inclusive-web final-1](https://reader035.fdocuments.in/reader035/viewer/2022070313/554ab4f3b4c905df668b589c/html5/thumbnails/11.jpg)
- 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
![Page 12: Role of-engineering-best-practices-to-create-an-inclusive-web final-1](https://reader035.fdocuments.in/reader035/viewer/2022070313/554ab4f3b4c905df668b589c/html5/thumbnails/12.jpg)
- 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
![Page 13: Role of-engineering-best-practices-to-create-an-inclusive-web final-1](https://reader035.fdocuments.in/reader035/viewer/2022070313/554ab4f3b4c905df668b589c/html5/thumbnails/13.jpg)
- 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.
![Page 14: Role of-engineering-best-practices-to-create-an-inclusive-web final-1](https://reader035.fdocuments.in/reader035/viewer/2022070313/554ab4f3b4c905df668b589c/html5/thumbnails/14.jpg)
- 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
![Page 15: Role of-engineering-best-practices-to-create-an-inclusive-web final-1](https://reader035.fdocuments.in/reader035/viewer/2022070313/554ab4f3b4c905df668b589c/html5/thumbnails/15.jpg)
- 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.
![Page 16: Role of-engineering-best-practices-to-create-an-inclusive-web final-1](https://reader035.fdocuments.in/reader035/viewer/2022070313/554ab4f3b4c905df668b589c/html5/thumbnails/16.jpg)
- 16 - Yahoo! Confidential
Accessibility Testing
+Automated Tools (Eg: Wave/ FAE)
Manual Testing(Eg: Screen Reader)
Accessibility Testing
=
![Page 17: Role of-engineering-best-practices-to-create-an-inclusive-web final-1](https://reader035.fdocuments.in/reader035/viewer/2022070313/554ab4f3b4c905df668b589c/html5/thumbnails/17.jpg)
- 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
![Page 18: Role of-engineering-best-practices-to-create-an-inclusive-web final-1](https://reader035.fdocuments.in/reader035/viewer/2022070313/554ab4f3b4c905df668b589c/html5/thumbnails/18.jpg)
- 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
![Page 19: Role of-engineering-best-practices-to-create-an-inclusive-web final-1](https://reader035.fdocuments.in/reader035/viewer/2022070313/554ab4f3b4c905df668b589c/html5/thumbnails/19.jpg)
- 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
![Page 20: Role of-engineering-best-practices-to-create-an-inclusive-web final-1](https://reader035.fdocuments.in/reader035/viewer/2022070313/554ab4f3b4c905df668b589c/html5/thumbnails/20.jpg)
- 20 - Yahoo! Confidential
Questions?
![Page 21: Role of-engineering-best-practices-to-create-an-inclusive-web final-1](https://reader035.fdocuments.in/reader035/viewer/2022070313/554ab4f3b4c905df668b589c/html5/thumbnails/21.jpg)
Thank you!Telephone: 91 80 3077 4444
Email: [email protected]: @VasuTweets
Our blog: http://accessibility.yahoo.com
Twitter: @yahooaccess
Fcebook: http://facebook.com/yahooaccessibility