Accessible design with html5 JS Everywhere 2012 Oct 26 Fairmont Hotel San Jose @iRajLal

  • 2,404 views
Uploaded on

How to design an HTML5 website which supports people with disabilities, and know why its a good business decision. …

How to design an HTML5 website which supports people with disabilities, and know why its a good business decision.
The four major disabilities which will be covered, that effect user capabilities are visual, hearing, mobility (difficulty in using the mouse), and cognitive disabilities, which are related to learning abilities. Know how to use the latest technologies to accommodate these users in the user interface. An accessible web application gives maximum reach to your application’s information, functionalities and benefits, by allowing multiple input methods, different interaction models, and customization based on special needs and limited device supports.
What People Will Learn
- Understand the problem around designing interfaces for people with, disabilities
- Know concrete steps to design and develop web applications to, accommodate the four kinds of major disabilities in HTML5
- Know the business case for Accessibility, 4; Learn the standard practices and design guidelines for accessible, design in HTML5

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
2,404
On Slideshare
0
From Embeds
0
Number of Embeds
20

Actions

Shares
Downloads
18
Comments
4
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • Multiple Browsers: Old & NewMultiple Devices: Mobile, Tablet, TV, PCAssistive Technologies: Audio Browsers, Text only Browsers, Screen Readers, MagnifiersSearch Engines spiders
  • Boomer and Senior population 117 Million with annual spending power of more than 2 trillion
  • Boomer and Senior population 117 Million with annual spending power of more than 2 trillion
  • Boomer and Senior population 117 Million with annual spending power of more than 2 trillion

Transcript

  • 1. Accessible Design with HTML5 Developing Web for Accessibility Raj Lal Senior Engineer
  • 2. GOAL: Accessibility with HTML5 1. What 2. Why 3. How
  • 3. 1. What is Web Accessibility ? Making Content & Feature of your Web page Easily available to Everyone1
  • 4. Content & Feature Communication Interaction Text Login Link Contact Images Search Media Registration Animation1
  • 5. Easily Available Easy to Find, Understand and Use by: Browsers Assistive Search Devices Technologies Engines1
  • 6. By Everyone • Disabled, Temporary disabled • Not so tech savvy users • Senior Citizens, Parents • Advanced Users, Mobile Users • Low literacy level • Users in extenuating circumstances1
  • 7. By Everyone1
  • 8. Why Accessibility ? 1. What 2. Why 3. How 1. WHAT2
  • 9. The Business Case Seniors Section 508 SEO = Traffic2
  • 10. Seniors • Seniors folks Population is 117 Million with annual spending power of 2 Trillion dollars • 1/4 consumer is baby boomer (born 1946-1964) • 57% working-age adults benefit Assistive Tech 1. WHAT2 • Book: Marketing to leading edge boomers and seniors , * Recent study: http://msdn.microsoft.com/en-us/library/windows/desktop/gg712257.aspx
  • 11. Section 508 Support Disabled Users2
  • 12. Section 508 Hearing MobilityCognitive Visual2
  • 13. SEO • Legal & General Group (L&G) Doubled number of visitors http://www.legalandgeneral.com • Within 24 hours search engine traffic saw a 25% increase, eventually growing to 50%. • Significant improvement in Google rankings for all target keywords • Site visitors receiving quotations doubled within 3 months • CNET - 30% increase in traffic from Google • after CNET started providing transcripts 1. WHAT2 http://www.w3.org/WAI/bcase/resources.html
  • 14. How to HTML5 for Accessibility 1. What 2. Why 3. How 1. WHAT
  • 15. How to HTML5 for AccessibilityProgressive ARIA Pour HTML5 Enhance Accessibility Principle Semantics 1. WHAT3
  • 16. Progressive Enhancement HTML CSS JavaScript HTML CSS HTML 1. WHAT3
  • 17. Progressive Enhancement• Design in a Progressive enhancement way• All content available by HTML alone• Use semantically structured HTML• All presentation elements in the style sheet• Load JavaScript after the page is loaded 1. WHAT3
  • 18. ARIA Accessibility APIs ARIA = Accessible Rich Internet Applications Part of HTML5 Specification 1. WHAT3
  • 19. ARIA Accessibility APIs • ARIA helps Assistive Technology(AT) • ARIA Make Web content Accessible to AT • ARIA uses HTML and CSS Tags • Most of ARIA is embedded in JS libraries 1. WHAT3
  • 20. How ARIA Works VoiceOver Windows Eye Roles States Properties Assistive Technology ARIA Platform HTML Accessibility APIs 1. WHATOSX Accessibility Protocol Mac Linux IAccessible23 Windows MSAA
  • 21. ARIA Accessibility APIs • Uses a set of - Roles - States and - Properties 1. WHAT3
  • 22. ARIA Roles • Landmark Roles – Where Am I • Structural Roles – What’s This • Interface Widget Roles 1. WHAT3
  • 23. ARIA Roles Role type Role name Role name Landmark application form roles banner main complementary navigation contentinfo search 1. WHAT3
  • 24. ARIA Roles Role type Role name Role name Structural article listitem roles columnheader math definition note directory presentation document region group row heading rowheader 1. WHAT img separator3 list toolbar
  • 25. ARIA Roles Role type Role name Role name Interface standalone widget spinbutton Widget Roles alert status alertdialog tab button tabpanel checkbox textbox dialog timer gridcell tooltip 1. WHAT link treeitem log composite3
  • 26. ARIA Roles Role type Role name Role name Interface marquee widget Widget Roles menuitem combobox menuitemcheckbox grid menuitemradio listbox option menu progressbar menubar radio radiogroup 1. WHAT scrollbar tablist slider Tree / treegrid3
  • 27. ARIA States • Dynamic Properties • Global States • Widget States 1. WHAT3
  • 28. ARIA States Attribute type Global Widget ARIA states aria-busy listitem aria-disabled math aria-grabbed note aria-hidden presentation aria-invalid region row rowheader 1. WHAT separator3 toolbar
  • 29. ARIA Properties Attribute Global Widget ARIA aria-atomic aria-autocomplete Properties aria-controls aria-haspopup aria- aria-label describedby aria-level aria-dropeffect aria-multiline aria-flowto aria-multiselectable aria-haspopup 1. WHAT aria-label3 aria-labelledby
  • 30. ARIA Properties Attribute type Global Widget ARIA Properties aria-live aria-orientation aria-owns aria-readonly aria-relevant aria-required aria-sort aria-valuemax aria-valuemin aria-valuenow 1. WHAT aria-valuetext3
  • 31. W3C POUR PrinciplePerceivable Operable Understand Robust able 1. WHAT3
  • 32. Perceivable • Text alternative to all non-text content • Alternative for media using subtitles • Transcribed text and Sign language 1. WHAT3
  • 33. Operable• Function accessible from keyboard alone• No auto refresh, allow time based contents• Proper use of Headings & Anchors• Joysticks, Voice recognition or audio feedback 1. WHAT3
  • 34. Understandable • High color contrast 4.5:1 • Use Sans serif fonts & allow resize • Avoid auto-play of media, animation • Avoid auto refresh, or flashy graphics • Multiple visual cues, icons, audio for feedback 1. WHAT3
  • 35. Robust • Broken HTML tag can cause difficulty with AT • Follow HTML standard specifications • Syntactically correct HTML & validate page • Proper “lang” attributes in the markup • Use “abbr” tag with proper usage 1. WHAT3
  • 36. HTML5 Semantics Semantics are 30 new HTML elements which describe the content of the page 1. WHAT3
  • 37. Accessible HTML5 Website Home Form Content 1. WHAT3
  • 38. Accessible Home Page <header role="banner"> <nav role="navigation"> <section role=“main”> <footer role=“contentinfo”> … Accessible HTML5 1. WHAT HTML53
  • 39. Accessible Form 1. WHAT3
  • 40. Accessible Form HTML5• Use label tag for describing form elements• Associate labels with controls using for attribute• Create a logical tab order with tabindex• Use placeholder, type=email, url, text• Use fieldset and legend to group form elements 1. WHAT3
  • 41. Accessible Form ARIA • Use role=main and keep one form in one page • Use aria-required for required fields • Use aria-live=assertive in the form for validation • Use aria-describedby for adding help to fields 1. WHAT3
  • 42. Accessible Content • Accessible Image • Accessible Text and Links 1. WHAT3
  • 43. Accessible Image Use alt attribute for alternative text for the image Use title attribute for tooltip Use role=presentation to ignore the image Use blank alt for decorative images Use meaningful name for src=meaningful.png 1. WHAT3
  • 44. Accessible Text and Links• Font size should always be relative , never fixed• Links should be underlined and of different color• Use Anchor links, easily navigable by screen readers• Meaningful link text , avoid using “click here” or “more”• Color in CSS with foreground & background color• Simple and Machine readable words like “Home page” 1. WHAT 3
  • 45. Reference WAI ARIA: http://www.w3.org/WAI/intro/aria WCAG: http://www.w3.org/TR/WCAG/ POUR PRINCIPLE: http://webaim.org/articles/pour/ 1. WHAT3
  • 46. Thank You Raj LalTwitter @ iRajLal