Transcript Powerpoint Version ()

HTML5 Toronto Web Developers Meetup
Accessibility & Web Technologies
@georgezamfir
[email protected]
#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
- Tim Berners-Lee
W3C Director
Inventor of the World Wide Web
@georgezamfir
[email protected]
#a11y = accessibility
What is #a11y ?
What is accessibility ?
Accessibility is about disabilities…
It’s making things accessible for people with disabilities, riiiiight?
What is accessibility ?
"We are only as (dis)abled
as the environment around us!"
What is accessibility ?
"We are only as (dis)abled
as the environment around us!"
- Oscar Pistorius
What is accessibility ?
"We are only as (dis)abled
as the environment around us!"
Gillian Lynne – “She’s not sick, she’s a dancer!”
What is accessibility ?
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 ?
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 ?
It’s not about them, it’s about all of us!
What is accessibility ?
Need for web accessibility is ever greater!
Mobile Web
Great 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 & functionality
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.
Assistive Technologies (AT)
Assistive Technologies Demo
Screen Magnifiers:
Screen Readers:
NVDA, Jaws, VoiceOver
Voice Recognition:
iPhone / iPad:
ZoomText, iOS native
Dragon Naturally Speaking, Siri
youtube.com/watch?v=t60voPIY5xY
Assistive Technologies (AT)
ATs, How Do They Work ?
Assistive Technologies (AT)
ATs – Accessibility APIs – Code
(Accessibility Stack)
Assistive Technologies (ATs)
Accessibility APIs
FRONT-END CODE
Assistive Technologies (AT)
Accessibility Stack
AT - Accessibility APIs – FRONT-END CODE
WCAG 2
Web Content Accessibility Guidelines 2
AODA
Accessibility for Ontarians with Disabilities Act
Accessibility Stack
Assistive Technologies (ATs)
JAWS, NVDA, Dragon, ZoomText, VoiceOver, etc.
Accessibility APIs
MSAA, UIA, IA2, AX/uiA, AT-SPI, UAAG, ARIA
FRONT-END CODE
HTML, CSS, JavaScript
Accessibility Stack: ATs – Accessibility APIs - CODE
Accessibility Stack – Text-to-Speech Example
text-to-speech: “search engine link”
iPhone / iPad VoiceOver
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
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
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
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
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
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
Information & Communication Standard
Timelines
ON Government
All public & private > 50
Level AA - 2012
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
It’s Your
Responsibility!
Practical Accessibility
1. Semantic Content
2. Keyboard Access
3. Forms Fields & More
4. UI Visual Design & Code Order
5. Progressive Enhancement & ARIA
Practical #A11Y
Yo dawg, I heard you like
<div>
so I put a <div> in your <div>’s <div>
Practical #A11Y – Semantic Content
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
Semantic Content
Practical #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 indicator
(be the :focus to my :hover)
Practical #A11Y – Keyboard Access
Forms Fields & More
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
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
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
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
UI Visual Design & Code Order
UI Visual Design & Code Order
UI Visual Design & Code Order
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
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
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
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" ariavaluetext="5 transactions">5</a>
Practical #A11Y – ARIA - dev.w3.org/html5/markup/aria/Overview.html
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
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
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
?