Accessibility & Web Technologies

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 The power of the Web is in its universalityuniversality

Access by everyone regardless of disability is an essential Access by everyone regardless of disability is an essential aspectaspect

- Tim Berners-Lee - Tim Berners-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)abled as 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!


DID YOU KNOW? 4.4 million Canadians reported having a disability (14.3% )

> 1 billion people worldwide (15% )

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 CODEFRONT-END CODEFRONT-END CODEFRONT-END CODE

Accessibility APIsAccessibility APIsAccessibility APIsAccessibility APIs

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

Accessibility Stack AT - 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 CODEFRONT-END CODEHTML, CSS, JavaScriptHTML, CSS, JavaScript

FRONT-END CODEFRONT-END CODEHTML, CSS, JavaScriptHTML, CSS, JavaScript

Accessibility APIsAccessibility APIsMSAA, UIA, IA2, AX/uiA, AT-SPI, UAAG, ARIAMSAA, UIA, IA2, AX/uiA, AT-SPI, UAAG, ARIA

Accessibility APIsAccessibility APIsMSAA, UIA, IA2, AX/uiA, AT-SPI, UAAG, ARIAMSAA, UIA, IA2, AX/uiA, AT-SPI, UAAG, ARIA

Assistive Technologies (ATs)Assistive Technologies (ATs)

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

Assistive Technologies (ATs)Assistive Technologies (ATs)

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

Accessibility Stack – Text-to-Speech Example

Accessibility Stack: ATs – Accessibility APIs - CODE

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

HTML CODEHTML CODE

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

HTML CODEHTML CODE

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

Mac OSx / iOS Accessibility ProtocolsMac OSx / iOS Accessibility Protocols

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

Mac OSx / iOS Accessibility ProtocolsMac OSx / iOS Accessibility Protocols

text-to-speech: “search engine link”text-to-speech: “search engine link”

iPhone / iPad VoiceOveriPhone / iPad VoiceOver

text-to-speech: “search engine link”text-to-speech: “search engine link”

iPhone / iPad VoiceOveriPhone / iPad VoiceOver

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 responsibility

to 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


<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


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




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 TestingDesign stage: Colour contrast & general

layout

Prototype stage: Keyboard & automated testing

Semantic content

Some AT testing

Development stage: Functional & AT testing

Usability testing with real

peoplePractical #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)

Practical #A11Y Testing

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!

Practical #A11Y Testing

?

Accessibility & Web Technologies

Documents

web accessibility

accessibility stack

good markupaccessibility

mobile web great promoter

good markupmobility

abilities disabilities

end codehtml

blindnessscreen magnifiers