550 likes | 741 Views
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
E N D
HTML5Toronto Web Developers Meetup Accessibility & Web Technologies @georgezamfir a11y@georgezamfir.com #a11y = accessibility
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
Accessibility is about disabilities… It’s making things accessible for people with disabilities, riiiiight? What is accessibility ?
"We are only as (dis)abledas the environment around us!" What is accessibility ?
- Oscar Pistorius "We are only as (dis)abledas the environment around us!" What is accessibility ?
"We are only as (dis)abledas 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 ?
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.
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)
ATs, How Do They Work ? Assistive Technologies (AT)
Assistive Technologies (ATs) ATs – Accessibility APIs – Code(Accessibility Stack) Accessibility APIs FRONT-END CODE Assistive Technologies (AT)
Accessibility Stack AT - Accessibility APIs – FRONT-END CODEWCAG 2Web Content Accessibility Guidelines 2AODAAccessibility for Ontarians with Disabilities Act
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
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
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
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
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
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
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
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
Practical Accessibility 1. Semantic Content 2. Keyboard Access 3. Forms Fields & More4. UI Visual Design & Code Order5. 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
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 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
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
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 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! <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