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
共通認識のためのユーザビリティテスト by AIエージェント - Accelerating Value Delivery
gakuoya
1
690
#Dubois Challenge 2025: Economics
ajstarks
0
140
誰もがAIエージェントを"操作"したがる〜AIエージェントに求められるUX〜
ikeyatsu
2
1.8k
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
350
freee + Product Design FY25Q4
freee
4
15k
新しいデザインの難しさ(公開版) / Difficulties in the New Design (public ver.)
usagimaru
1
680
The Spectacular Lies of Maps
axbom
PRO
1
120
BPStudy#213〜ビジネスアナリシスとDDD(ドメイン駆動設計)パネルディスカッション資料 / BPStudy213-panel
haru860
0
440
mento Design Team Portfolio
mento0fficial
0
190
株式会社Muture_ソーシャル推進事業
muture
PRO
0
100
企画を動かすデザイナーの思考!「広げて絞る」アプローチ。
hikidakan
0
110
生成AIを活用した組み込みSW設計書検索システム開発
licux
7
1.2k
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
524
40k
A Tale of Four Properties
chriscoyier
160
23k
Building Applications with DynamoDB
mza
95
6.5k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Thoughts on Productivity
jonyablonski
69
4.7k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Practical Orchestrator
shlominoach
189
11k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.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