Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Designing for accessibility
Search
Laura Kalbag
August 29, 2013
Design
3
430
Designing for accessibility
From a talk at Front-end London in August 2013
Laura Kalbag
August 29, 2013
Tweet
Share
More Decks by Laura Kalbag
See All by Laura Kalbag
Ethical Design
laurakalbag
1
99
Intro to UX
laurakalbag
1
160
Ethical Design
laurakalbag
1
2.8k
Accessibility By Design
laurakalbag
1
91
Designing For Accessibility
laurakalbag
2
120
Indie Design
laurakalbag
4
1.7k
WAI-ARIA in 10
laurakalbag
1
210
Designing for Accessibility
laurakalbag
0
65
Designing for Accessibility
laurakalbag
1
480
Other Decks in Design
See All in Design
3D空間を扱うUI表現とユーザビリティ
akinen
0
450
リリース1ヶ月後で機能をなくした話
hinofu
1
700
コラボレーションを小さくはじめ、大きく広める - 相互理解のためのデザイン&開発交流会, Friends of Figma Tokyo by Yasuhiro Yokota
yasuhiroyokota
2
1.2k
ダークテーマとアクセシビリティ の融合したカラートークンの設計
degudegu2510
0
280
SUKEDACHI DESIGN NIGHT発表スライド
sugiyama_sukedachi
0
230
共創のための地域基盤としての非公式組織の形成 / Informal community as an infrastructure for co-creation
fumiyaakasaka
2
220
もち的デザイナーのキャリアデザイン新提言:副業起業家のすゝめ
mochitaro
0
1.3k
231129_FOSS4G-ASIA-2023_kato
hjmkth
1
300
Ride or Die Animatics
warwatkar
0
140
Designing UIs without a UI designer
strongeron
0
120
デザイナー向け会社紹介資料/company-profile-designer
nextbeat
1
860
root Design Partnership Policy
root_recruit
0
4.1k
Featured
See All Featured
How to name files
jennybc
65
93k
Creatively Recalculating Your Daily Design Routine
revolveconf
210
11k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
78
42k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
2
1.3k
The Pragmatic Product Professional
lauravandoore
25
5.8k
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
How to Ace a Technical Interview
jacobian
272
22k
Automating Front-end Workflow
addyosmani
1356
200k
No one is an island. Learnings from fostering a developers community.
thoeni
16
2.1k
What’s in a name? Adding method to the madness
productmarketing
PRO
16
2.6k
In The Pink: A Labor of Love
frogandcode
138
21k
Rebuilding a faster, lazier Slack
samanthasiow
73
8.2k
Transcript
Designing for accessibility Laura Kalbag @laurakalbag laurakalbag.com
Are you are developer or a designer?
None
= =
designing for accessibility isn’t just for “designers”
What is accessibility?
Accessibility is the degree to which a website is available
to as many people as possible.
accessibility isn’t just about screen readers
None
None
Shiny Shiny
Is it because we don’t understand who we’re trying to
help?
Is it because we just don’t know what to do?
Is it because it’s too hard, and there’s too much
to think about?
I’ve not got the answers
None
None
Design decisions made in the name of accessibility will largely
benefit everyone.
The four (main) types of disability that affect use of
the web
Visual
Hearing
Motor
Cognitive
None of these disabilities are completely black and white
mild moderate moderately severe severe profound astigmatism sensitivity colour blindness
akinetopsia blindness hearing eyesight
Visual make it easy to read Hearing make it easy
to hear make it easy to understand and focus Cognitive Motor make it easy to interact
Good accessibility is good usability
Examples
Disclaimer
Text
None
None
None
Squinting does not make an enjoyable reading experience
1. Make text content easy to read. 2. Ensure sensible
font sizes. 3. Don’t prevent the user from resizing the fonts themselves in the browser.
None
None
What’s that supposed to mean?
1. Good copy is a part of good accessibility. Keep
your text simple and your meaning clear.
Colour
None
None
Your screen isn’t the same as everybody else’s screens
1. Use colour contrast tools to ensure your text is
high-contrast enough. 2. Beware of super-high contrast too.
Content hierarchy
Randomly enlarging and colouring text does not make a hierarchy.
1. Use semantic headings, lists and other relevant HTML elements.
2. Make the content structure clear and consistent.
Links
Finding links should not be a game.
1. Make links easy to recognise by using an underline.
None
Why should I click there?
1. Use link text that makes sense out of context.
Don’t use “click here”. 2. Remember that not all your users are clicking.
Alt text
None
None
Unhelpful alt text has its place on XKCD
None
1. Provide text alternatives for images that helps a user
understand the context of the image.
Media
No, I don’t want to listen to your podcast or
watch your video tutorial. Give me text!
1. Provide text transcripts for audio. 2. Provide subtitles for
video.
JavaScript
I don’t want to wait forever for your page to
load because you want to show me how many Likes it has on Facebook
1. Use JavaScript with care and load it in a
sensible place. 2. If your web app needs JavaScript, ensure you use WAI ARIA to guide assistive technologies.
Navigation and way-finding
The days of flash are over, stop punishing me with
your artsy navigation.
1. Provide consistent ways to help users navigate, find content,
and determine where they are.
Forms
Don’t make me guess what and where the error is.
1. Help users correct and avoid mistakes in their input.
Animations
Wait for me!
1. Give users enough time to read and use content
Resources
None
None
None
None
None
None
None
None
None
None
None
None
Consider accessibility at every point of planning. It is content
hierarchy, copy, visual design and code.
Accessibility as default
Accessibility is easy to consider once you start caring about
it.
Laura Kalbag @laurakalbag laurakalbag.com