1 / 54

Accessibility & Web Technologies

HTML5 Toronto Web Developers Meetup. Accessibility & Web Technologies. @ georgezamfir a11y@georgezamfir.com #a11y = accessibility. HTML5 Toronto Web Developers Meetup. The power of the Web is in its universality Access by everyone regardless of disability is an essential aspect

caine
Download Presentation

Accessibility & Web Technologies

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. HTML5Toronto Web Developers Meetup Accessibility & Web Technologies @georgezamfir a11y@georgezamfir.com #a11y = accessibility

  2. HTML5Toronto Web Developers Meetup The power of the Web is in its universality Access 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. What is #a11y ?

  4. What is accessibility ?

  5. Accessibility is about disabilities… It’s making things accessible for people with disabilities, riiiiight? What is accessibility ?

  6. "We are only as (dis)abledas the environment around us!" What is accessibility ?

  7. - Oscar Pistorius "We are only as (dis)abledas the environment around us!" What is accessibility ?

  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. 4 Basic Types of Needs Visual low vision, colorblindness, blindness Screen magnifiers, text-to-speech, refreshable braille, good mark-up Auditory hearing loss, deafness Captions & transcripts, haptic feedback, good mark-up Mobility dexterity, strength, loss of limb Speech-to-text, alternative input hardware, good mark-up Cognitive & Speech dyslexia, ADD, lack of skills Word prediction, augmentative devices (hear & see), good mark-up What is accessibility ?

  10. Accessibility is not just about disabilities! Disabilities Aging population Non-native language speakers Low (computer?) literacy DID YOU KNOW? 4.4 million Canadians reported having a disability (14.3% ) > 1 billion people worldwide (15% ) What is accessibility ?

  11. It’s not about them, it’s about all of us! What is accessibility ?

  12. Need for web accessibility is ever greater!

  13. Mobile Web Great promoter for accessibility What is accessibility ?

  14. Need for web accessibility is ever greater! But what do we do? What is accessibility ?

  15. What is accessibility ? Allowing people of all abilities & disabilities to have equal access to information & functionality

  16. Why care about accessibility ? It’s the right thing to do Regulations say you must (AODA) Leaving out some of the audience is bad business.

  17. Assistive Technologies (AT)

  18. Screen Magnifiers: ZoomText, iOS native Screen Readers: NVDA, Jaws, VoiceOver Voice Recognition: Dragon Naturally Speaking, Siri iPhone / iPad: youtube.com/watch?v=t60voPIY5xY Assistive Technologies Demo Assistive Technologies (AT)

  19. ATs, How Do They Work ? Assistive Technologies (AT)

  20. Assistive Technologies (ATs) ATs – Accessibility APIs – Code(Accessibility Stack) Accessibility APIs FRONT-END CODE Assistive Technologies (AT)

  21. Accessibility Stack AT - Accessibility APIs – FRONT-END CODEWCAG 2Web Content Accessibility Guidelines 2AODAAccessibility for Ontarians with Disabilities Act

  22. Assistive Technologies (ATs) JAWS, NVDA, Dragon, ZoomText, VoiceOver, etc. Accessibility Stack Accessibility APIs MSAA, UIA, IA2, AX/uiA, AT-SPI, UAAG, ARIA FRONT-END CODE HTML, CSS, JavaScript Accessibility Stack: ATs – Accessibility APIs - CODE

  23. text-to-speech: “search engine link” iPhone / iPadVoiceOver Accessibility Stack – Text-to-Speech Example AXTextLink AXURL=“http://google.com” AXTitle=“search engine” Mac OSx / iOS Accessibility Protocols <a href=“http://google.com”>search engine</a> HTML CODE Accessibility Stack: ATs – Accessibility APIs - CODE

  24. So, how in the world do I know how to build for all these types of needs? WCAG 2 It would be nice to have one standard that addresses all needs / disabilities / ATs, right? Web Content Accessibility Guidelines (WCAG 2) - w3.org/TR/WCAG

  25. W3C set of 12 guidelines Technology agnostic – not just for HTML Covers a wide range of needs / disabilities Developed by W3C & numerous experts Widely adopted as THE standard for compliance 3 levels of compliance: A, AA, AAA WCAG 2 Web Content Accessibility Guidelines (WCAG 2) - w3.org/TR/WCAG

  26. Set of 12 Guidelines divided into 4 Principles Perceivable Information and UI can’t be invisible to all senses OperableUsers must be able to operate UI & navigation Understandable Info & operation of UI must be understandable RobustContent must be interpreted reliably by all user agents How to Use WCAG 2 ? Web Content Accessibility Guidelines (WCAG 2) - w3.org/TR/WCAG

  27. Use web standards for greater interoperability & functionality to people using AT, alternative browsers, mobile devices Doesn’t necessarily provide an engaging UX but using standards at least people can have an experience in the first place. Web Standards & WCAG 2 Web Content Accessibility Guidelines (WCAG 2) - w3.org/TR/WCAG

  28. 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) Accessibility for Ontarians with Disabilities Act – AODA 2005

  29. ON Government All public & private > 50 Level AA - 2012 Level A – 2014, AA – 2021 Information & Communication StandardTimelines 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. It’s Your Responsibility!

  31. Practical Accessibility 1. Semantic Content 2. Keyboard Access 3. Forms Fields & More4. UI Visual Design & Code Order5. Progressive Enhancement & ARIA Practical #A11Y

  32. Yo dawg, I heard you like<div>so I put a <div> in your <div>’s <div> Practical #A11Y – Semantic Content

  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; "><span class="w-nIgmKf T-I-J3 J-J5-Ji"></span></div> Practical #A11Y – Semantic Content

  34. Semantic Content Practical #A11Y – Semantic Content

  35. Keyboard Access

  36. This website is best viewed at 1024x768 and only works with a mouse Practical #A11Y – Keyboard Access

  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. Forms Fields & More

  39. Forms Fields & More 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)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. Associate <label> with form <input> using for / id Use <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> • <inputid="COAPP" type="radio" value="Yes“ title="Yes, I am applying with a co-applicant" required="required“> <labelfor="COAPPNO“ > No, I am not applying with a co-applicant </label> <inputid="COAPPNO" type="radio" value="No“ title="No, I am not applying with a co-applicant" required="required"> </fieldset> Practical #A11Y – Forms Fields & More

  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. 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. UI Visual Design & Code Order

  44. UI Visual Design & Code Order

  45. UI Visual Design & Code Order

  46. UI Visual Design & Code Order Most often the design flow should match the source code order Markup content in the order it should be read NOT in the order it should be displayed It makes it much worse for AT users (try tabbing through every amazon.com page just to get to your product specs) Practical #A11Y – UI Visual Design & Code Order

  47. Progressive Enhancement & ARIA Text Content & prose HTML Semantic & some behaviour CSS Presentation JavaScript Advanced behaviour ARIA Extend semantics (insight into roles & states) Practical #A11Y – Progressive Enhancement & ARIA

  48. ARIA integrated into HTML5 but predates it Set of attributes that specify meaning - role, properties, state Really good for widgets that we don’t have in HTML / HTML5 ARIA-specific mark-up doesn’t affect functionality Doesn’t mean we can get away with <div> <div> <div> <div> <div> Practical #A11Y – ARIA - dev.w3.org/html5/markup/aria/Overview.html

  49. It’s a plane… It’s a bird… It’s a… …slider? Wait a minute, there’s no such thing in HTML! <ahref="#" 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

More Related