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


Published on

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

Published in: Technology
  • Get my book on Web User Interface design guidelines and best practices here
    Are you sure you want to  Yes  No
    Your message goes here
  • Check my MSDN magazine article on Accessible HTML5 design. Building HTML5 Applications - Designing Accessibility with HTML5

    thanks go to Web Axe / Dennis Lembrée for reviewing it.
    Are you sure you want to  Yes  No
    Your message goes here
  • Good diagram on HTML5 Structural Elements with ARIA , yes right about tabindex, ,y point there is to Test the tabs for logical order,

    slide 41: my suggestion there is Use one Form in one page with role=main
    Are you sure you want to  Yes  No
    Your message goes here
  • Pretty good deck. A few comments.
    Slide 38: a better visual that I made of structure:
    Slide 40 correction: do NOT use tabindex for logical order, but source order.
    Slide 41: unsure of first bullet point; role=main should be used once per page for the main content; isn't related to forms.
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

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
  • Accessible design with html5 JS Everywhere 2012 Oct 26 Fairmont Hotel San Jose @iRajLal

    1. 1. Accessible Design with HTML5 Developing Web for Accessibility Raj Lal Senior Engineer
    2. 2. GOAL: Accessibility with HTML5 1. What 2. Why 3. How
    3. 3. 1. What is Web Accessibility ? Making Content & Feature of your Web page Easily available to Everyone1
    4. 4. Content & Feature Communication Interaction Text Login Link Contact Images Search Media Registration Animation1
    5. 5. Easily Available Easy to Find, Understand and Use by: Browsers Assistive Search Devices Technologies Engines1
    6. 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. 7. By Everyone1
    8. 8. Why Accessibility ? 1. What 2. Why 3. How 1. WHAT2
    9. 9. The Business Case Seniors Section 508 SEO = Traffic2
    10. 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:
    11. 11. Section 508 Support Disabled Users2
    12. 12. Section 508 Hearing MobilityCognitive Visual2
    13. 13. SEO • Legal & General Group (L&G) Doubled number of visitors • 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
    14. 14. How to HTML5 for Accessibility 1. What 2. Why 3. How 1. WHAT
    15. 15. How to HTML5 for AccessibilityProgressive ARIA Pour HTML5 Enhance Accessibility Principle Semantics 1. WHAT3
    16. 16. Progressive Enhancement HTML CSS JavaScript HTML CSS HTML 1. WHAT3
    17. 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. 18. ARIA Accessibility APIs ARIA = Accessible Rich Internet Applications Part of HTML5 Specification 1. WHAT3
    19. 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. 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. 21. ARIA Accessibility APIs • Uses a set of - Roles - States and - Properties 1. WHAT3
    22. 22. ARIA Roles • Landmark Roles – Where Am I • Structural Roles – What’s This • Interface Widget Roles 1. WHAT3
    23. 23. ARIA Roles Role type Role name Role name Landmark application form roles banner main complementary navigation contentinfo search 1. WHAT3
    24. 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. 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. 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. 27. ARIA States • Dynamic Properties • Global States • Widget States 1. WHAT3
    28. 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. 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. 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. 31. W3C POUR PrinciplePerceivable Operable Understand Robust able 1. WHAT3
    32. 32. Perceivable • Text alternative to all non-text content • Alternative for media using subtitles • Transcribed text and Sign language 1. WHAT3
    33. 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. 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. 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. 36. HTML5 Semantics Semantics are 30 new HTML elements which describe the content of the page 1. WHAT3
    37. 37. Accessible HTML5 Website Home Form Content 1. WHAT3
    38. 38. Accessible Home Page <header role="banner"> <nav role="navigation"> <section role=“main”> <footer role=“contentinfo”> … Accessible HTML5 1. WHAT HTML53
    39. 39. Accessible Form 1. WHAT3
    40. 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. 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. 42. Accessible Content • Accessible Image • Accessible Text and Links 1. WHAT3
    43. 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. 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. 45. Reference WAI ARIA: WCAG: POUR PRINCIPLE: 1. WHAT3
    46. 46. Thank You Raj LalTwitter @ iRajLal