Embed Size (px)
DESCRIPTION
What Accessible Design Can Teach You About Responsive Design with George Zamfir Presented at SCREENS 2013 in Toronto. Details at fitc.ca/screens In 2010 Ethan Marcotte coined responsive design for all of us to consume content on small (at first) devices without losing our eye-sight. He did not quite phrase it like that, even though he definitely addressed that. In 1808 Italian Pellegrino Turri designed a typewriter for Countess Carolina Fantoni da Fivizzano, his blind lover, to write him letters when he was away. That is accessible design, and it paved the way for responsive design in more than one way. We are now bashing mouse-only interactions because they don’t have a place in our responsive, touch-friendly new world. Except it never had a place in any world, accessibility guidelines have advocated for keyboard accessibility (the cornerstone to any accessible interface) long before responsive design – keyboard accessible = no mouse-only interactions = touch accessible. In this presentation, George Zamfir will show you how you can literally change your users’ lives with responsive design. He will discuss why accessible design is important and draw some surprising parallels between responsive and accessible design.
Citation preview
goodwally.ca !� @good_wally
WhatAccessible Design
can teach you aboutResponsive Design
with George Zamfir
goodwally.ca !� @good_wally
RWD & A11Y = ♥
SCREENS
A different SCREEN: VoiceOver onMac
A different SCREEN: ZoomText10
A different SCREEN: Dragon Naturally Speaking
A different SCREEN: SIRI - Dragon - Nuance
goodwally.ca !� @good_wally
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
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
WhatAccessible Design
can teach you aboutResponsive Design
Design matters not, content does ✓Users’ context is important
Keyboard accessibility = touch-friendly
Design for the edge cases (mobile-first derivation)
1.
2.
3.
4.
Accessibility (A11Y)
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)
Accessibility (A11Y)
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!
Accessibility (A11Y)
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 (A11Y)
Accessibility is highly contextual
Accessibility (A11Y)
Web Accessibility
Accessibility (A11Y)
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
••••
Accessibility (A11Y)
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 (A11Y)
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
Accessibility (A11Y)
Web Accessibility
“Web accessibility is building websites thatanybody can access, regardless of the device,ability or assistive technologies - user context”
— George Zamfir
A11Y -> RWD
WhatAccessible Design
can teach you aboutResponsive Design
Design matters not, content does ✓Catering to users’ context
Keyboard accessibility = touch-friendly
Design for the edge cases (mobile-first derivation)
1.
2.
3.
4.
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
Catering to users’ context (RWD)
uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php?
A11Y -> RWD
Catering to users’ context (RWD)
A11Y -> RWD
WhatAccessible Design
can teach you aboutResponsive Design
Design matters not, content does ✓Catering to users’ context ✓Keyboard accessibility = touch-friendly
Design for the edge cases (mobile-first derivation)
1.
2.
3.
4.
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
Keyboard Accessibility = Touch-Friendly
A11Y -> RWD
Keyboard Accessibility = Touch-Friendly
<div> <select>
A11Y -> RWD
WhatAccessible Design
can teach you aboutResponsive Design
Design matters not, content does ✓Catering to users’ context ✓Keyboard accessibility = touch-friendly ✓Design for the edge cases (mobile-first
derivation)
1.
2.
3.
4.
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)
320px
1920px
“4#part(series:(Design(for(the(Edges”(by(LukeW:(http://www.lukew.com/ff/entry.asp?554
accessibility
goodwally.ca !� @good_wally
A11Y was a champion for RWDwe have common goals for our users
WhatAccessible Design
can teach you aboutResponsive Design
goodwally.ca !� @good_wally
Use your RWD knowledge toget into A11Y!
WhatAccessible Design
can teach you aboutResponsive Design
goodwally.ca !� @good_wally
WhatAccessible Design
can teach you aboutResponsive Design
Thank You!
goodwally.ca !� @good_wally
Q & Aor
Demos
![Responsive Design Fundamentals [Read-Only] - … Design Fundame… · Responsive Design Fundamentals Carolyn Yon, PMI-ACP Development Manager ... Responsive Design • web design](https://img.pdfslide.net/doc/110x75/5b7c060b7f8b9adb4c8df8c4/responsive-design-fundamentals-read-only-design-fundame-responsive-design.jpg)
