Accessibility and Web Technologies @HTML5_Toronto

Accessibility & Web Technologies

HTML5 Toronto Web Developers Meetup

@[email protected]

#a11y = accessibility

@[email protected]

#a11y = accessibility

HTML5 Toronto Web Developers Meetup

The power of the Web is in its universalityThe power of the Web is in its universalityAccess by everyone regardless of disability is an essential aspeAccess by everyone regardless of disability is an essential aspectct

-- Tim BernersTim Berners--Lee Lee W3C DirectorW3C Director

Inventor of the World Wide WebInventor of the World Wide Web

What is #a11y ?

What is accessibility ?

Accessibility is about disabilities…


It’s making things accessible for people with disabilities, riiiiight?

"We are only as (dis)abledas the environment around us!"




- Oscar Pistorius



Gillian Lynne – “She’s not sick, she’s a dancer!”

4 Basic Types of Needs


Visual low vision, colorblindness, blindnessScreen magnifiers, text-to-speech, refreshable braille, good mark-up

Auditory hearing loss, deafnessCaptions & transcripts, haptic feedback, good mark-up

Mobility dexterity, strength, loss of limbSpeech-to-text, alternative input hardware, good mark-up

Cognitive & Speech dyslexia, ADD, lack of skillsWord prediction, augmentative devices (hear & see), good mark-up

Accessibility is not just about disabilities!


Disabilities

Aging population

Non-native language speakers

Low (computer?) literacy

It’s not about them, it’s about all of us!


Need for web accessibility is ever greater!

Mobile Web Great promoter for accessibility


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



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: ZoomText, iOS native

Screen Readers: NVDA, Jaws, VoiceOver

Voice Recognition: Dragon Naturally Speaking, Siri

iPhone / iPad: youtube.com/watch?v=t60voPIY5xY


ATs, How Do They Work ?


ATs – Accessibility APIs – Code(Accessibility Stack)(Accessibility Stack)


FRONT‐END CODEFRONTFRONT‐‐END CODEEND CODE

Accessibility APIsAccessibility APIsAccessibility APIs

Assistive Technologies (ATs)Assistive Technologies (Assistive Technologies (ATsATs))

Accessibility StackAT - Accessibility APIs – FRONT-END CODE

WCAG 2Web Content Accessibility Guidelines 2

AODAAccessibility for Ontarians with Disabilities Act

Accessibility Stack

Accessibility Stack: ATs – Accessibility APIs - CODE

FRONT‐END CODEHTML, CSS, JavaScript

FRONTFRONT‐‐END CODEEND CODEHTML, CSS, JavaScriptHTML, CSS, JavaScript

Accessibility APIsMSAA, UIA, IA2, AX/uiA, AT‐SPI, UAAG, ARIA

Accessibility APIsAccessibility APIsMSAA, UIA, IA2, AX/MSAA, UIA, IA2, AX/uiAuiA, AT, AT‐‐SPI, UAAG, ARIASPI, UAAG, ARIA

Assistive Technologies (ATs)

JAWS, NVDA, Dragon, ZoomText, VoiceOver, etc.

Assistive Technologies (Assistive Technologies (ATsATs))

JAWS, NVDA, Dragon, JAWS, NVDA, Dragon, ZoomTextZoomText, , VoiceOverVoiceOver, etc., etc.

Accessibility Stack – Text-to-Speech Example

Accessibility Stack: ATs – Accessibility APIs - CODE

<a href=“http://google.com”>search engine</a>

HTML CODE

<a <a hrefhref==““http://http://google.comgoogle.com””>search engine</a>>search engine</a>

HTML CODEHTML CODE

AXTextLink AXURL=“http://google.com” AXTitle=“search engine”

Mac OSx / iOS Accessibility Protocols

AXTextLinkAXTextLink AXURL=AXURL=““http://http://google.comgoogle.com”” AXTitleAXTitle==““search enginesearch engine””

Mac Mac OSxOSx / / iOSiOS Accessibility ProtocolsAccessibility Protocols

text‐to‐speech: “search engine link”

iPhone / iPad VoiceOver

texttext‐‐toto‐‐speech: speech: ““search engine linksearch engine link””

iPhoneiPhone / / iPadiPad VoiceOverVoiceOver

WCAG 2

Web Content Accessibility Guidelines (WCAG 2) - w3.org/TR/WCAG

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?

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

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

Accessibility for Ontarians with Disabilities Act (AODA)

Accessibility for Ontarians with Disabilities Act – AODA 2005

• 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

Information & Communication StandardTimelines

Information & Communication (IC) Standard – AODA

ON Government

All public & private > 50

Level AA - 2012

Level A – 2014, AA – 2021

It’s your responsibilityto deliver accessible products & services to your clients

who may not necessarily be the users.

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

Practical #A11Y – Semantic Content

<div class="T-I J-J5-Ji T-I-KE L3" role="button" tabindex="0" style="-webkit-user-select: none; " gsdh="cm">COMPOSE</div>

Gmail

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

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

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)

Deal with input errors & error messages(beware of browsers’ support for required=)

How to do accessible tooltips / hover effects

Associate <label> with form <input> using for / id


<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“>

<fieldset><legend>Are you applying with a co-applicant?</legend>

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

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>

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

How to do accessible tooltips / hover effects


• Not just :hover anymore (look at mobile)

• Open / close by keyboard

• Manage focus

• Enhance with ARIA

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 behaviourARIA 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" aria-valuetext="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!

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!


Accessibility and Web Technologies @HTML5_Toronto

Technology

Transcript of Accessibility and Web Technologies @HTML5_Toronto