Accessibility & Web Technologies

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

47. 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

48. 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

49. 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

50. 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