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
Fem tips om ux-text • WSA-dagen 29 jan 2025
jonas_blind_hen
PRO
0
180
業務効率化だけじゃ物足りない AIと一緒にプロトタイプ開発
shingo2000
1
1.5k
Building foundations 堅牢なデザイントークンの設計
hilokifigma
2
3.5k
デザイナーとPMの両ロール_3つのポイント
toy1618
1
320
児童相談所における養育里親委託時の親権者同意に向けたコミュニケーションの実態
trivia
0
460
Cards | Storyboards
giofortuna_story
0
280
portfolio_YumiYasuda
yum0418
0
280
エンジニアでも捗る デザイナー的思考入門
tinykitten
PRO
1
1.1k
The Golden Whitney
ohtristanart
PRO
0
510
札幌の雪を観光資源に変える:デザインプログラムSESSAの挑戦
ittyann
0
240
オープンデータを利用して色々なものを作った話
hjmkth
1
110
オルタナUX | AIで高速化するのもいいけど品質も大事なんじゃない?というお話
iflection
3
540
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
Code Review Best Practice
trishagee
68
18k
The Cult of Friendly URLs
andyhume
79
6.5k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
The World Runs on Bad Software
bkeepers
PRO
69
11k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
RailsConf 2023
tenderlove
30
1.1k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
790
Stop Working from a Prison Cell
hatefulcrawdad
270
20k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
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