This document discusses a meetup about accessibility and web technologies. The meetup will cover: - What accessibility is and why it's important to care about it. Accessibility allows people of all abilities to have equal access to information and functionality. - Different types of disabilities and needs that accessibility aims to support, including visual, auditory, mobility and cognitive needs. - Standards and guidelines for accessibility, including the Web Content Accessibility Guidelines (WCAG 2.0) and the Accessibility for Ontarians with Disabilities Act (AODA). - Practical tips for implementing accessibility, such as using semantic HTML, keyboard support, forms, visual design, progressive enhancement, and testing techniques.

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

2. HTML5 Toronto 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)abled
as the environment around us!"
What is accessibility ?

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

8. "We are only as (dis)abled
as 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
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. Assistive Technologies Demo
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 (AT)

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

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. Accessibility Stack
AT - Accessibility APIs – FRONT-END CODE
WCAG 2
Web Content Accessibility Guidelines 2
AODA
Accessibility for Ontarians with Disabilities Act

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, JavaScript
Accessibility Stack: ATs – Accessibility APIs - CODE

23. Accessibility Stack – Text-to-Speech Example
text‐to‐speech: “search engine link”
text‐to‐speech: “search engine link”
/ iPad
iPhone / iPad VoiceOver
AXTextLink 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. WCAG 2
So, how in the world do I know how to build for
all these types of needs?
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. WCAG 2
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
Web Content Accessibility Guidelines (WCAG 2) - w3.org/TR/WCAG

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

27. Web Standards & WCAG 2
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 Content Accessibility Guidelines (WCAG 2) - w3.org/TR/WCAG

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. Information & Communication Standard
Timelines
ON Government Level AA - 2012
All 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. It’s Your
Responsibility!

31. Practical Accessibility
1. Semantic Content
2. Keyboard Access
3. Forms Fields & More
4. UI Visual Design & Code Order
5. 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 / id
Use <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>
<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. 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!
<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

51. Practical Accessibility Testing
Design stage: Colour contrast & general layout
Prototype stage: Keyboard & automated testing
Semantic content
Some AT testing
Development stage: Functional & AT testing
Usability testing with real people
Practical #A11Y Testing

52. Testing Techniques & Tools
Keyboard: Test for keyboard functionality & visual focus
Automated Testing: Deque FireEyes
Webaim Wave
Tools & Plugins: Firebug, Web Developer, Color Checker (FF)
AIS Web Toolbar (IE)
Your Brain: No tools can replace it!
Practical #A11Y Testing

53. A Few Thing to Remember
Write 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