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
490
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
PF_濵村ひろみ_202503
maru_design78
0
160
今日から意識できるアクセシビリティ
fumiko
0
230
Flow, Not Stock 知識触媒としてのIA
5kaichi
1
280
パンくずリストかわいい(breadcrumb so cute)
ysuda
0
270
私とデザインの10年
iflection
0
120
AIの実践とコミュニケーションデザインの意義 / AI practice and the significance of communication design
bebe
0
450
Hatena Engineer Seminar #33 チームと開発するためのモック
takuwolog
0
230
20250129_DAST28_実空間にデジタル資源の接点をデザインする
majimasachi
0
400
Building foundations 堅牢なデザイントークンの設計
hilokifigma
2
3.3k
新年あけおめWSの実施スキルをみんなで振り返りタイムのススメ
sugiyama_sukedachi
0
120
AI時代に淘汰されないデザインのしごと
akinen
0
110
An Early Spring | Storyboard | Scenes 1-18
giofortuna_story
0
240
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
4 Signs Your Business is Dying
shpigford
183
22k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Side Projects
sachag
454
42k
Why Our Code Smells
bkeepers
PRO
337
57k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
47
2.8k
How GitHub (no longer) Works
holman
314
140k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Gamification - CAS2011
davidbonilla
81
5.3k
Navigating Team Friction
lara
186
15k
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