Accessibility and Web Technologies @HTML5_Toronto


Published on

Accessibility questions? Get in contact:

George Zamfir's presentation on disabilities & web accessibility at the HTML5 Toronto Web App Developers Meetup in Toronto on Jan 19, 2012.

"We are only as (dis)abled as the environment around us!"

Powerpoint & PDF Versions at

Published in: Technology, Design
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Accessibility and Web Technologies @HTML5_Toronto

  1. 1. HTML5 Toronto Web Developers MeetupAccessibility & Web Technologies @georgezamfir #a11y = accessibility
  2. 2. HTML5 Toronto Web Developers MeetupThe power of the Web is in its universalityAccess by everyone regardless of disability is an essential aspect - Tim Berners-Lee W3C Director Inventor of the World Wide Web @georgezamfir #a11y = accessibility
  3. 3. What is #a11y ?
  4. 4. What is accessibility ?
  5. 5. Accessibility is about disabilities…It’s making things accessible for people with disabilities, riiiiight? What is accessibility ?
  6. 6. "We are only as (dis)abledas the environment around us!" What is accessibility ?
  7. 7. "We are only as (dis)abledas the environment around us!" - Oscar Pistorius What is accessibility ?
  8. 8. "We are only as (dis)abledas the environment around us!" Gillian Lynne – “She’s not sick, she’s a dancer!” What is accessibility ?
  9. 9. 4 Basic Types of NeedsVisual low vision, colorblindness, blindnessScreen magnifiers, text-to-speech, refreshable braille, good mark-upAuditory hearing loss, deafnessCaptions & transcripts, haptic feedback, good mark-upMobility dexterity, strength, loss of limbSpeech-to-text, alternative input hardware, good mark-upCognitive & Speech dyslexia, ADD, lack of skillsWord prediction, augmentative devices (hear & see), good mark-up What is accessibility ?
  10. 10. Accessibility is not just about disabilities! Disabilities Aging population Non-native language speakers Low (computer?) literacy What is accessibility ?
  11. 11. It’s not about them, it’s about all of us! What is accessibility ?
  12. 12. Need for web accessibility is ever greater!
  13. 13. Mobile WebGreat promoter for accessibility What is accessibility ?
  14. 14. Need for web accessibility is ever greater! But what do we do? What is accessibility ?
  15. 15. What is accessibility ? Allowing people of all abilities &disabilities to have equal access to information & functionality
  16. 16. Why care about accessibility ?It’s the right thing to doRegulations say you must (AODA)Leaving out some of the audience is bad business.
  17. 17. Assistive Technologies (AT)
  18. 18. Assistive Technologies DemoScreen Magnifiers: ZoomText, iOS nativeScreen Readers: NVDA, Jaws, VoiceOverVoice Recognition: Dragon Naturally Speaking, SiriiPhone / iPad: Assistive Technologies (AT)
  19. 19. ATs, How Do They Work ? Assistive Technologies (AT)
  20. 20. ATs – Accessibility APIs – Code (Accessibility Stack) Assistive Technologies (ATs) Assistive Technologies (ATs) Accessibility APIs FRONT‐END CODE FRONT‐END CODE Assistive Technologies (AT)
  21. 21. Accessibility Stack AT - Accessibility APIs – FRONT-END CODE WCAG 2 Web Content Accessibility Guidelines 2 AODAAccessibility for Ontarians with Disabilities Act
  22. 22. Accessibility Stack Assistive Technologies (ATs) Assistive Technologies (ATs) JAWS, NVDA, Dragon, ZoomText, VoiceOver, etc. JAWS, NVDA, Dragon, ZoomText, VoiceOver, etc. Accessibility APIs MSAA, UIA, IA2, AX/uiA, AT‐SPI, UAAG, ARIA MSAA, UIA, IA2, AX/uiA, AT‐SPI, UAAG, ARIA FRONT‐END CODE FRONT‐END CODE HTML, CSS, JavaScriptAccessibility Stack: ATs – Accessibility APIs - CODE
  23. 23. Accessibility Stack – Text-to-Speech Example text‐to‐speech: “search engine link” text‐to‐speech: “search engine link” / iPad iPhone / iPad VoiceOverAXTextLink AXURL=“” AXTitle=“search engine” AXURL=“” AXTitle=“search engine” Mac OSx / iOS Mac OSx / iOS Accessibility Protocols <a href=“”>search engine</a> <a href=“”>search engine</a> HTML CODE Accessibility Stack: ATs – Accessibility APIs - CODE
  24. 24. WCAG 2So, how in the world do I know how to build for all these types of needs? It would be nice to have one standard thataddresses all needs / disabilities / ATs, right? Web Content Accessibility Guidelines (WCAG 2) -
  25. 25. WCAG 2W3C set of 12 guidelinesTechnology agnostic – not just for HTMLCovers a wide range of needs / disabilitiesDeveloped by W3C & numerous expertsWidely adopted as THE standard for compliance3 levels of compliance: A, AA, AAA Web Content Accessibility Guidelines (WCAG 2) -
  26. 26. How to Use WCAG 2 ?Set of 12 Guidelines divided into 4 PrinciplesPerceivable Information and UI can’t be invisible to all sensesOperable Users must be able to operate UI & navigationUnderstandable Info & operation of UI must be understandableRobust Content must be interpreted reliably by all user agents Web Content Accessibility Guidelines (WCAG 2) -
  27. 27. Web Standards & WCAG 2Use web standards for greater interoperability &functionality to people using AT, alternativebrowsers, mobile devicesDoesn’t necessarily provide an engaging UX butusing standards at least people can have anexperience in the first place. Web Content Accessibility Guidelines (WCAG 2) -
  28. 28. Accessibility for Ontarians with Disabilities Act (AODA)• ON legislation for accessible products & services• Information & Communication standard (IC) – 1/5• IC standard – requirement to conform with WCAG 2• For businesses in both the private & public sectors Accessibility for Ontarians with Disabilities Act – AODA 2005
  29. 29. Information & Communication Standard Timelines ON Government Level AA - 2012All public & private > 50 Level A – 2014, AA – 2021 It’s your responsibility to deliver accessible products & services to your clients who may not necessarily be the users. Information & Communication (IC) Standard – AODA
  30. 30. It’s YourResponsibility!
  31. 31. Practical Accessibility1. Semantic Content2. Keyboard Access3. Forms Fields & More4. UI Visual Design & Code Order5. Progressive Enhancement & ARIA Practical #A11Y
  32. 32. Yo dawg, I heard you like <div>so I put a <div> in your <div>’s <div> Practical #A11Y – Semantic Content
  33. 33. Gmail<div class="T-I J-J5-Ji T-I-KE L3" role="button" tabindex="0"style="-webkit-user-select: none; " gsdh="cm">COMPOSE</div><div id=":rj" class="T-I J-J5-Ji T-I-atl L3" role="button"tabindex="0" style="-webkit-user-select: none; "><spanclass="w-nIgmKf T-I-J3 J-J5-Ji"></span></div> Practical #A11Y – Semantic Content
  34. 34. Semantic ContentPractical #A11Y – Semantic Content
  35. 35. Keyboard Access
  36. 36. This website is best viewed at 1024x768 and only works with a mouse Practical #A11Y – Keyboard Access
  37. 37. 2 BIG concepts:Everything is functional by keyboard (including highly interactive UI elements) Visual focus indicator (be the :focus to my :hover) Practical #A11Y – Keyboard Access
  38. 38. Forms Fields & More
  39. 39. Forms Fields & MoreAssociate <label> with form <input> using for / idUse <fieldset> & <legend> for logical groups of fields(then hide off-screen what you don’t / can’t style appropriately)Deal with input errors & error messages(beware of browsers’ support for required=)How to do accessible tooltips / hover effects Practical #A11Y – Forms Fields & More
  40. 40. Associate <label> with form <input> using for / idUse <fieldset> & <legend> for logical groups of fields(then hide off-screen what you don’t / can’t style appropriately) <h3 class="section">Are you applying with a co-applicant?</h3> <fieldset> <legend>Are you applying with a co-applicant?</legend> <label for="COAPP“> Yes, I am applying with a co-applicant </label> <input id="COAPP" type="radio" value="Yes“ title="Yes, I am applying with a co-applicant" required="required“> <label for="COAPPNO“ > No, I am not applying with a co-applicant </label> <input id="COAPPNO" type="radio" value="No“ title="No, I am not applying with a co-applicant" required="required"> </fieldset> Practical #A11Y – Forms Fields & More
  41. 41. Deal with input errors & error messages (be aware of browsers’ support for required=)• Visual & non-visual indicator that there’s an error on the field• Keyboard / visual focus moves to errors area• A way to move back from the error to the field Practical #A11Y – Forms Fields & More
  42. 42. How to do accessible tooltips / hover effects• Not just :hover anymore (look at mobile)• Open / close by keyboard• Manage focus• Enhance with ARIA Practical #A11Y – Forms Fields & More
  43. 43. UI Visual Design & Code Order
  44. 44. UI Visual Design & Code Order
  45. 45. UI Visual Design & Code Order
  46. 46. UI Visual Design & Code OrderMost often the design flow should match thesource code orderMarkup content in the order it should be readNOT in the order it should be displayedIt makes it much worse for AT users (try tabbingthrough every page just to get to your product specs) Practical #A11Y – UI Visual Design & Code Order
  47. 47. Progressive Enhancement & ARIAText Content & proseHTML Semantic & some behaviourCSS PresentationJavaScript Advanced behaviourARIA Extend semantics (insight into roles & states) Practical #A11Y – Progressive Enhancement & ARIA
  48. 48. ARIA integrated into HTML5 but predates itSet of attributes that specify meaning - role, properties, stateReally good for widgets that we don’t have in HTML / HTML5ARIA-specific mark-up doesn’t affect functionalityDoesn’t mean we can get away with <div> <div> <div> <div> <div> Practical #A11Y – ARIA -
  49. 49. It’s a plane… It’s a bird… It’s a… …slider? Wait a minute, there’s no such thing in HTML!<a href="#" aria-valuemin="0" aria-valuemax="10"role="slider" aria-labelledby="question-transactions"title="Transactions per week?" aria-valuenow="5" aria-valuetext="5 transactions">5</a> Practical #A11Y – ARIA -
  50. 50. Practical Accessibility TestingDesign stage: Colour contrast & general layoutPrototype stage: Keyboard & automated testing Semantic content Some AT testingDevelopment stage: Functional & AT testing Usability testing with real people Practical #A11Y Testing
  51. 51. Testing Techniques & ToolsKeyboard: Test for keyboard functionality & visual focusAutomated Testing: Deque FireEyes Webaim WaveTools & Plugins: Firebug, Web Developer, Color Checker (FF) AIS Web Toolbar (IE)Your Brain: No tools can replace it! Practical #A11Y Testing
  52. 52. A Few Thing to RememberWrite semantic content & markup, presentation matters not Accessibility is not a feature, it’s a subset of usability Remember: not everyone is using a mouse Start small, do 1 thing but do it well ASK FOR HELP! Practical #A11Y Testing