What Accessible Design Can Teach You About Responsive Design

transcript

goodwally.ca !� @good_wally

WhatAccessible Design

can teach you aboutResponsive Design

with George Zamfir

RWD & A11Y = ♥

SCREENS

A different SCREEN: VoiceOver onMac

A different SCREEN: ZoomText10

A different SCREEN: Dragon Naturally Speaking

A different SCREEN: SIRI - Dragon - Nuance

George Zamfir accessibility (A11Y) & responsive web design (RWD)

Toronto Accessibility and Inclusive Design - meetup.com/a11yTOToronto Accessibility Camp - accessibilitycampto.org (Nov 16)

Accessibility solutioneer at Good Wally - goodwally.ca

slideshare.net/georgezamfir

Accessibility consultant at Scotiabank

In my spare time...

SCREENS

Assistive Technologies

They don't care much about design!

OR they care to change it for the user!

Responsive Web Design

Content matters more than design!

Yo, what’s wrong with this guy?

not about the design!

about updating the design to bring out the content.

Responsive Web Design is

A11Y -> RWD

Design matters not, content does ✓Users’ context is important

Keyboard accessibility = touch-friendly

Design for the edge cases (mobile-first derivation)

Accessibility (A11Y)

Accessibility is about disability, riiiight?

Visual low vision, colour-blindness, blindnessScreen magnifiers, text-to-speech, refreshable braille

Auditory hearing loss, deafnessCaptions & transcripts, haptic feedback

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

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

Disability: a new definition

What we should measure is what theperson can do, what their contribution

to society is.

By measuring people through thedisability lens we automatically focus on

what they’re not able to do!

Who is more disabled?

Accessibility is not just about disability

I’ve heard some serious shit said in meetings:

“We don’t care about blind people.” —Shithead McHorrible

Here’s some other things we don’t care about:BlackBerries, Windows Phones, Poor people,Androids, IE8, IE7, Definitely IE6, Colorblindpeople, 7″ tablets, Firefox, Screen readers...

“The power of the Web is inits universality. Accessby everyone regardlessof disability is anessential aspect.”

"The primary design principle underlying the Web’susefulness and growth is universality… It mustwork with any form of information [...] from a silly

Accessibility is highly contextual

Web Accessibility

Semantic markupDoes it work by keyboard alone?Colour contrast & colour-blindness

Can I navigate with Dragon (voice command)

Recommendation: slideshare.net/billygeek/10-tips-in-10-minutes-devto-sept-30-2013

••••

Web Content Accessibility Guidelines (WCAG 2)

Covers a wide range of needs / disabilities

Developed by the W3C & numerous

experts

Set of 12 guidelines, technology agnostic

(not just HTML)

3 levels of conformance: A, AA, AAA

••

Accessibility for Ontarians with Disabilities Act(AODA)

5 standards in the Act

Information & Communication standard

••

ON Government:

All public & private > 50:

Level AA - 2012

Level A – 2014, AA – 2021

Web Accessibility

“Web accessibility is building websites thatanybody can access, regardless of the device,ability or assistive technologies - user context”

— George Zamfir

A11Y -> RWD

Design matters not, content does ✓Catering to users’ context

Keyboard accessibility = touch-friendly

A11Y -> RWD

Catering to users’ context (A11Y)

ability (Can he use a mouse? What if she only only one hand?)

environment (Office environment? Captions for noisy places?)

device (Mobile phone? Reading on glossy screens in the sun?)

assistive technology (Does it work with VoiceOver?)

A11Y -> RWD

Catering to users’ context (RWD)

"… when on their mobile devices, people are often just “oneeyeball and one thumb”. They need clear, focused designs toget things done—not lots of navigation options getting intheir way."

— LukeW, alistapart.com/article/organizing-mobile

A11Y -> RWD

uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php?

A11Y -> RWD

Design matters not, content does ✓Catering to users’ context ✓Keyboard accessibility = touch-friendly

A11Y -> RWD

Keyboard Accessibility = Touch-Friendly

“Oh yes, it's keyboard accessible! To open the menu press Ctrl-Shift-Alt-F2-W-T-F!”

A11Y -> RWD

A11Y -> RWD

Design matters not, content does ✓Catering to users’ context ✓Keyboard accessibility = touch-friendly ✓Design for the edge cases (mobile-first

derivation)

A11Y -> RWD

Design for the edge cases

A11Y -> RWD

RWD Mobile-first

A11Y -> RWD

Design for the edge cases (mobile-first)

320px 1920px

“4#part(series:(Design(for(the(Edges”(by(LukeW:(http://www.lukew.com/ff/entry.asp?554

A11Y -> RWD

Design for the edge cases (A11Y)

1920px

“4#part(series:(Design(for(the(Edges”(by(LukeW:(http://www.lukew.com/ff/entry.asp?554

accessibility

A11Y was a champion for RWDwe have common goals for our users

Use your RWD knowledge toget into A11Y!

Thank You!

Q & Aor

What Accessible Design Can Teach You About Responsive Design

Technology