HTML5 Toronto Web Developers MeetupAccessibility & Web Technologies                 @georgezamfir             a11y@georgez...
HTML5 Toronto Web Developers MeetupThe power of the Web is in its universalityAccess by everyone regardless of disability ...
What is #a11y ?
What is accessibility ?
Accessibility is about disabilities…It’s making things accessible for people with disabilities, riiiiight?                ...
"We are only as (dis)abledas the environment around us!"         What is accessibility ?
"We are only as (dis)abledas the environment around us!"                                   - Oscar Pistorius         What ...
"We are only as (dis)abledas the environment around us!"   Gillian Lynne – “She’s not sick, she’s a dancer!”              ...
4 Basic Types of NeedsVisual low vision, colorblindness, blindnessScreen magnifiers, text-to-speech, refreshable braille, ...
Accessibility is not just about disabilities!                 Disabilities             Aging population      Non-native la...
It’s not about them, it’s about all of us!              What is accessibility ?
Need for web accessibility is ever greater!
Mobile WebGreat promoter for accessibility          What is accessibility ?
Need for web accessibility is ever greater!           But what do we do?               What is accessibility ?
What is accessibility ? Allowing people of all abilities &disabilities to have equal access to    information & functional...
Why care about accessibility ?It’s the right thing to doRegulations say you must (AODA)Leaving out some of the audience is...
Assistive Technologies (AT)
Assistive Technologies DemoScreen Magnifiers:     ZoomText, iOS nativeScreen Readers:    NVDA, Jaws, VoiceOverVoice Recogn...
ATs, How Do They Work ?    Assistive Technologies (AT)
ATs – Accessibility APIs – Code        (Accessibility Stack)      Assistive Technologies (ATs)      Assistive Technologies...
Accessibility Stack  AT - Accessibility APIs – FRONT-END CODE                WCAG 2    Web Content Accessibility Guideline...
Accessibility Stack        Assistive Technologies (ATs)        Assistive Technologies (ATs)     JAWS, NVDA, Dragon, ZoomTe...
Accessibility Stack – Text-to-Speech Example             text‐to‐speech: “search engine link”             text‐to‐speech: ...
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 s...
WCAG 2W3C set of 12 guidelinesTechnology agnostic – not just for HTMLCovers a wide range of needs / disabilitiesDeveloped ...
How to Use WCAG 2 ?Set of 12 Guidelines divided into 4 PrinciplesPerceivable Information and UI can’t be invisible to all ...
Web Standards & WCAG 2Use web standards for greater interoperability &functionality to people using AT, alternativebrowser...
Accessibility for Ontarians with        Disabilities Act (AODA)• ON legislation for accessible products & services• Inform...
Information & Communication Standard                 Timelines        ON Government              Level AA - 2012All public...
It’s YourResponsibility!
Practical Accessibility1. Semantic Content2. Keyboard Access3. Forms Fields & More4. UI Visual Design & Code Order5. Progr...
Yo dawg, I heard you like                 <div>so I put a <div> in your <div>’s <div>      Practical #A11Y – Semantic Cont...
Gmail<div class="T-I J-J5-Ji T-I-KE L3" role="button" tabindex="0"style="-webkit-user-select: none; " gsdh="cm">COMPOSE</d...
Semantic ContentPractical #A11Y – Semantic Content
Keyboard Access
This website is best viewed at 1024x768     and only works with a mouse        Practical #A11Y – Keyboard Access
2 BIG concepts:Everything is functional by keyboard    (including highly interactive UI elements)       Visual focus indic...
Forms Fields & More
Forms Fields & MoreAssociate <label> with form <input> using for / idUse <fieldset> & <legend> for logical groups of field...
Associate <label> with form <input> using for / idUse <fieldset> & <legend> for logical groups of fields(then hide off-scr...
Deal with input errors & error messages         (be aware of browsers’ support for required=)•   Visual & non-visual indic...
How to do accessible tooltips / hover effects• Not just :hover anymore (look at mobile)• Open / close by keyboard• Manage ...
UI Visual Design & Code Order
UI Visual Design & Code Order
UI Visual Design & Code Order
UI Visual Design & Code OrderMost often the design flow should match thesource code orderMarkup content in the order it sh...
Progressive Enhancement & ARIAText                     Content & proseHTML                     Semantic & some behaviourCS...
ARIA integrated into HTML5 but predates itSet of attributes that specify meaning - role, properties, stateReally good for ...
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" ar...
Practical Accessibility TestingDesign stage:              Colour contrast & general layoutPrototype stage:           Keybo...
Testing Techniques & ToolsKeyboard:            Test for keyboard functionality & visual focusAutomated Testing:   Deque Fi...
A Few Thing to RememberWrite semantic content & markup, presentation matters not  Accessibility is not a feature, it’s a s...
Accessibility and Web Technologies @HTML5_Toronto
Accessibility and Web Technologies @HTML5_Toronto
Upcoming SlideShare
Loading in …5
×

Accessibility and Web Technologies @HTML5_Toronto

1,513 views

Published on

Accessibility questions? Get in contact: george@goodwally.ca.

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
http://bit.ly/preso_a11y_html5

Published in: Technology, Design
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,513
On SlideShare
0
From Embeds
0
Number of Embeds
18
Actions
Shares
0
Downloads
14
Comments
0
Likes
4
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@georgezamfir.com #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@georgezamfir.com #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: youtube.com/watch?v=t60voPIY5xY 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=“http://google.com” AXTitle=“search engine” AXURL=“http://google.com” AXTitle=“search engine” Mac OSx / iOS Mac OSx / iOS Accessibility Protocols <a href=“http://google.com”>search engine</a> <a href=“http://google.com”>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) - w3.org/TR/WCAG
  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) - w3.org/TR/WCAG
  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) - w3.org/TR/WCAG
  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) - w3.org/TR/WCAG
  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 amazon.com 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 - dev.w3.org/html5/markup/aria/Overview.html
  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 - dev.w3.org/html5/markup/aria/Overview.html
  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

×