What Accessible Design Can Teach You About Responsive Design
-
Upload
fitc -
Category
Technology
-
view
1.003 -
download
5
description
Transcript of What Accessible Design Can Teach You About Responsive Design
![Page 1: What Accessible Design Can Teach You About Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022051514/548329ceb4af9f5c268b46c8/html5/thumbnails/1.jpg)
goodwally.ca !� @good_wally
WhatAccessible Design
can teach you aboutResponsive Design
with George Zamfir
![Page 2: What Accessible Design Can Teach You About Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022051514/548329ceb4af9f5c268b46c8/html5/thumbnails/2.jpg)
goodwally.ca !� @good_wally
RWD & A11Y = ♥
![Page 3: What Accessible Design Can Teach You About Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022051514/548329ceb4af9f5c268b46c8/html5/thumbnails/3.jpg)
SCREENS
![Page 4: What Accessible Design Can Teach You About Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022051514/548329ceb4af9f5c268b46c8/html5/thumbnails/4.jpg)
A different SCREEN: VoiceOver onMac
![Page 5: What Accessible Design Can Teach You About Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022051514/548329ceb4af9f5c268b46c8/html5/thumbnails/5.jpg)
A different SCREEN: ZoomText10
![Page 6: What Accessible Design Can Teach You About Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022051514/548329ceb4af9f5c268b46c8/html5/thumbnails/6.jpg)
A different SCREEN: Dragon Naturally Speaking
![Page 7: What Accessible Design Can Teach You About Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022051514/548329ceb4af9f5c268b46c8/html5/thumbnails/7.jpg)
A different SCREEN: SIRI - Dragon - Nuance
![Page 8: What Accessible Design Can Teach You About Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022051514/548329ceb4af9f5c268b46c8/html5/thumbnails/8.jpg)
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
![Page 9: What Accessible Design Can Teach You About Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022051514/548329ceb4af9f5c268b46c8/html5/thumbnails/9.jpg)
![Page 10: What Accessible Design Can Teach You About Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022051514/548329ceb4af9f5c268b46c8/html5/thumbnails/10.jpg)
In my spare time...
![Page 11: What Accessible Design Can Teach You About Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022051514/548329ceb4af9f5c268b46c8/html5/thumbnails/11.jpg)
SCREENS
Assistive Technologies
![Page 12: What Accessible Design Can Teach You About Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022051514/548329ceb4af9f5c268b46c8/html5/thumbnails/12.jpg)
Assistive Technologies
They don't care much about design!
OR they care to change it for the user!
![Page 13: What Accessible Design Can Teach You About Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022051514/548329ceb4af9f5c268b46c8/html5/thumbnails/13.jpg)
Responsive Web Design
![Page 14: What Accessible Design Can Teach You About Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022051514/548329ceb4af9f5c268b46c8/html5/thumbnails/14.jpg)
Content matters more than design!
![Page 15: What Accessible Design Can Teach You About Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022051514/548329ceb4af9f5c268b46c8/html5/thumbnails/15.jpg)
Yo, what’s wrong with this guy?
![Page 16: What Accessible Design Can Teach You About Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022051514/548329ceb4af9f5c268b46c8/html5/thumbnails/16.jpg)
not about the design!
about updating the design to bring out the content.
Responsive Web Design is
![Page 17: What Accessible Design Can Teach You About Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022051514/548329ceb4af9f5c268b46c8/html5/thumbnails/17.jpg)
![Page 18: What Accessible Design Can Teach You About Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022051514/548329ceb4af9f5c268b46c8/html5/thumbnails/18.jpg)
![Page 19: What Accessible Design Can Teach You About Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022051514/548329ceb4af9f5c268b46c8/html5/thumbnails/19.jpg)
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.
![Page 20: What Accessible Design Can Teach You About Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022051514/548329ceb4af9f5c268b46c8/html5/thumbnails/20.jpg)
Accessibility (A11Y)
![Page 21: What Accessible Design Can Teach You About Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022051514/548329ceb4af9f5c268b46c8/html5/thumbnails/21.jpg)
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)
![Page 22: What Accessible Design Can Teach You About Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022051514/548329ceb4af9f5c268b46c8/html5/thumbnails/22.jpg)
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!
![Page 23: What Accessible Design Can Teach You About Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022051514/548329ceb4af9f5c268b46c8/html5/thumbnails/23.jpg)
Accessibility (A11Y)
Who is more disabled?
![Page 24: What Accessible Design Can Teach You About Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022051514/548329ceb4af9f5c268b46c8/html5/thumbnails/24.jpg)
Accessibility is not just about disability
![Page 25: What Accessible Design Can Teach You About Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022051514/548329ceb4af9f5c268b46c8/html5/thumbnails/25.jpg)
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...
![Page 26: What Accessible Design Can Teach You About Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022051514/548329ceb4af9f5c268b46c8/html5/thumbnails/26.jpg)
“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
![Page 27: What Accessible Design Can Teach You About Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022051514/548329ceb4af9f5c268b46c8/html5/thumbnails/27.jpg)
Accessibility (A11Y)
Accessibility is highly contextual
![Page 28: What Accessible Design Can Teach You About Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022051514/548329ceb4af9f5c268b46c8/html5/thumbnails/28.jpg)
Accessibility (A11Y)
Web Accessibility
![Page 29: What Accessible Design Can Teach You About Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022051514/548329ceb4af9f5c268b46c8/html5/thumbnails/29.jpg)
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
••••
![Page 30: What Accessible Design Can Teach You About Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022051514/548329ceb4af9f5c268b46c8/html5/thumbnails/30.jpg)
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
••
•
••
![Page 31: What Accessible Design Can Teach You About Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022051514/548329ceb4af9f5c268b46c8/html5/thumbnails/31.jpg)
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
![Page 32: What Accessible Design Can Teach You About Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022051514/548329ceb4af9f5c268b46c8/html5/thumbnails/32.jpg)
Accessibility (A11Y)
Web Accessibility
“Web accessibility is building websites thatanybody can access, regardless of the device,ability or assistive technologies - user context”
— George Zamfir
![Page 33: What Accessible Design Can Teach You About Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022051514/548329ceb4af9f5c268b46c8/html5/thumbnails/33.jpg)
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.
![Page 34: What Accessible Design Can Teach You About Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022051514/548329ceb4af9f5c268b46c8/html5/thumbnails/34.jpg)
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?)
•
•
•
•
![Page 35: What Accessible Design Can Teach You About Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022051514/548329ceb4af9f5c268b46c8/html5/thumbnails/35.jpg)
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
![Page 36: What Accessible Design Can Teach You About Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022051514/548329ceb4af9f5c268b46c8/html5/thumbnails/36.jpg)
A11Y -> RWD
Catering to users’ context (RWD)
uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php?
![Page 37: What Accessible Design Can Teach You About Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022051514/548329ceb4af9f5c268b46c8/html5/thumbnails/37.jpg)
A11Y -> RWD
Catering to users’ context (RWD)
![Page 38: What Accessible Design Can Teach You About Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022051514/548329ceb4af9f5c268b46c8/html5/thumbnails/38.jpg)
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.
![Page 39: What Accessible Design Can Teach You About Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022051514/548329ceb4af9f5c268b46c8/html5/thumbnails/39.jpg)
A11Y -> RWD
Keyboard Accessibility = Touch-Friendly
“Oh yes, it's keyboard accessible! To open the menu press Ctrl-Shift-Alt-F2-W-T-F!”
![Page 40: What Accessible Design Can Teach You About Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022051514/548329ceb4af9f5c268b46c8/html5/thumbnails/40.jpg)
A11Y -> RWD
Keyboard Accessibility = Touch-Friendly
![Page 41: What Accessible Design Can Teach You About Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022051514/548329ceb4af9f5c268b46c8/html5/thumbnails/41.jpg)
A11Y -> RWD
Keyboard Accessibility = Touch-Friendly
<div> <select>
![Page 42: What Accessible Design Can Teach You About Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022051514/548329ceb4af9f5c268b46c8/html5/thumbnails/42.jpg)
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.
![Page 43: What Accessible Design Can Teach You About Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022051514/548329ceb4af9f5c268b46c8/html5/thumbnails/43.jpg)
A11Y -> RWD
Design for the edge cases
![Page 44: What Accessible Design Can Teach You About Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022051514/548329ceb4af9f5c268b46c8/html5/thumbnails/44.jpg)
A11Y -> RWD
RWD Mobile-first
![Page 45: What Accessible Design Can Teach You About Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022051514/548329ceb4af9f5c268b46c8/html5/thumbnails/45.jpg)
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
![Page 46: What Accessible Design Can Teach You About Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022051514/548329ceb4af9f5c268b46c8/html5/thumbnails/46.jpg)
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
![Page 47: What Accessible Design Can Teach You About Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022051514/548329ceb4af9f5c268b46c8/html5/thumbnails/47.jpg)
goodwally.ca !� @good_wally
A11Y was a champion for RWDwe have common goals for our users
WhatAccessible Design
can teach you aboutResponsive Design
![Page 48: What Accessible Design Can Teach You About Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022051514/548329ceb4af9f5c268b46c8/html5/thumbnails/48.jpg)
goodwally.ca !� @good_wally
Use your RWD knowledge toget into A11Y!
WhatAccessible Design
can teach you aboutResponsive Design
![Page 49: What Accessible Design Can Teach You About Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022051514/548329ceb4af9f5c268b46c8/html5/thumbnails/49.jpg)
goodwally.ca !� @good_wally
WhatAccessible Design
can teach you aboutResponsive Design
Thank You!
![Page 50: What Accessible Design Can Teach You About Responsive Design](https://reader033.fdocuments.us/reader033/viewer/2022051514/548329ceb4af9f5c268b46c8/html5/thumbnails/50.jpg)
goodwally.ca !� @good_wally
Q & Aor
Demos