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
500
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
120
Intro to UX
laurakalbag
1
170
Ethical Design
laurakalbag
1
2.9k
Accessibility By Design
laurakalbag
1
110
Designing For Accessibility
laurakalbag
2
160
Indie Design
laurakalbag
4
2k
WAI-ARIA in 10
laurakalbag
1
250
Designing for Accessibility
laurakalbag
0
77
Designing for Accessibility
laurakalbag
1
520
Other Decks in Design
See All in Design
マンガで分かるサービスデザインガイドライン
senryakuka
1
900
Bulletproof Design System with TypeScript
takanorip
6
3.5k
Cyber Heart Online Book
hjnasby
0
120
Kid Cowboy 103
marilutwin
0
270
実践ゼロから作らないデザインシステム SaaS × デザインシステム × プロダクトデザイン / Efficient Design System for SaaS—no need to start from scratch.
kaminashi
2
1.7k
1920*1080pxに設定したケース / Google Slide Size Test
arthur1
0
2.9k
真・altはつけるだけじゃなくて -alt属性の考察 2025年版-
securecat
5
1.6k
教育分野に強いUIデザイナー / 山口哲弘ポートフォリオ
t2yamaguchi429
0
420
オリジナルのデザイン地図を作ってみた!〜OpenMapTilesとMaputnikを活用した地図スタイル〜
hjmkth
1
570
An Early Spring | Storyboard | Scenes 1-18
giofortuna_story
0
370
私とデザインの10年
iflection
0
150
線で考える画面構成
natsuume
1
880
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Building Adaptive Systems
keathley
43
2.6k
Documentation Writing (for coders)
carmenintech
72
4.9k
Scaling GitHub
holman
459
140k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Visualization
eitanlees
146
16k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Designing for humans not robots
tammielis
253
25k
Raft: Consensus for Rubyists
vanstee
140
7k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
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