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
Accessible design and development
Search
James Coleman
April 18, 2014
Design
1
68
Accessible design and development
I talk I gave about Supercool's approach to accessible design
James Coleman
April 18, 2014
Tweet
Share
More Decks by James Coleman
See All by James Coleman
Spektrix Conference 2018
supercooljames
0
53
Preparing for your next big on-sale
supercooljames
1
130
Preparing for Print
supercooljames
2
150
Other Decks in Design
See All in Design
Fleet Gas Station
joshtang
0
130
美しいUIを作るために デザイナーが意識している ちょっとした考え方
yuichi_hara7
49
31k
Design System for training program
mct
0
270
Night Shift concept 9/15/2024
cpineda57
0
730
🇫🇷 Design Leadership en eaux troubles
morganepeng
2
420
SpectrumTokyoMeetup12_自動貯金アプリ『finbee』での取り組みについて
shihorishimazu
2
370
デザインスプリントを活かすチームの在り方
mixi_design
PRO
1
740
アクセシビリティって何だろう? -アクセシビリティの概念、そして向き合い方まで-
securecat
6
1.5k
Commune_Brand_Guideline_JA
commune
1
130
What Was UX Design All About?
ykazu
3
720
圧縮デザインスプリントによるオンボーディングの体験設計事例
hassy_pixiv
0
120
3 Reasons Why I Got into Design
harukausui
1
150
Featured
See All Featured
Web development in the modern age
philhawksworth
205
10k
No one is an island. Learnings from fostering a developers community.
thoeni
19
2.9k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
355
29k
The World Runs on Bad Software
bkeepers
PRO
65
11k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
22k
Facilitating Awesome Meetings
lara
49
6k
Designing on Purpose - Digital PM Summit 2013
jponch
114
6.9k
Fashionably flexible responsive web design (full day workshop)
malarkey
404
65k
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
Infographics Made Easy
chrislema
239
18k
Being A Developer After 40
akosma
84
590k
Transcript
None
Accessibility
Who cares?
Who cares? visually impaired
Who cares? colour blind
Who cares? epilepsy
Who cares? deaf
Who cares? motor issues
Stats
23% of UK population is over 60
Approx. 1/3 of over 65s are affected by disabling hearing
loss.
2 million people in the UK are living with sight
loss
10% of the UK population suffer from colour blindness
3/4 of UK population require some form of vision correction
8% of the UK population suffer from Dyslexia
Not just about disability
More than disability technology
More than disability environment
More than disability language
More than disability connection speed
More than disability unusual devices
Not just about frontend
Not just about frontend •Structure & planning •Content •Design and
interaction • Functionality • Control panels • And, yes … frontend
Our responsibility
Features
alt="Supercool logo"
WAI-ARIA landmarks and roles
Common ARIA roles <header role="banner"> <nav role="navigation"> <form role="search"> <main
role="main"> <aside role="complementary"> <footer role="contentinfo">
Common ARIA roles <header role="banner"> <nav role="navigation"> <form role="search"> <main
role="main"> <aside role="complementary"> <footer role="contentinfo">
Common ARIA roles <header role="banner"> <nav role="navigation"> <form role="search"> <main
role="main"> <aside role="complementary"> <footer role="contentinfo">
Common ARIA roles <header role="banner"> <nav role="navigation"> <form role="search"> <main
role="main"> <aside role="complementary"> <footer role="contentinfo">
Common ARIA roles <header role="banner"> <nav role="navigation"> <form role="search"> <main
role="main"> <aside role="complementary"> <footer role="contentinfo">
Common ARIA roles <header role="banner"> <nav role="navigation"> <form role="search"> <main
role="main"> <aside role="complementary"> <footer role="contentinfo">
Common ARIA roles <header role="banner"> <nav role="navigation"> <form role="search"> <main
role="main"> <aside role="complementary"> <footer role="contentinfo">
Common ARIA roles <header role="banner"> <nav role="navigation"> <form role="search"> <main
role="main"> <aside role="complementary"> <footer role="contentinfo"> https://dev.opera.com/articles/introduction-to-wai-aria/#landmarks
Fallbacks
Fallbacks <noscript> <h2>Become a member</h2> <p>Download our application form</p> </noscript>
Styling a:focus { outline: none }
Keyboard controls Cancel modals
Keyboard controls Sliders
Maximise link targets Submit
Clear interactive elements Submit
Avoid vague copy See image on the right for more
information about the project.
Avoid vague copy See fig.3 for more information about
the project.
Avoid vague copy Download our brochure Click here
Avoid vague copy Download our brochure
Testing tools
Colour contrast https://snook.ca/technical/colour_contrast/colour.html
Colour contrast
Mac VoiceOver
WAVE Evaluation Tool
Compliance Disability Discrimination Act 2005 Equality Act 2010 W3 WCAG
Guidelines
WCAG Get familiar with techniques https://www.wuhcag.com/wcag-checklist/
Not just about compliance
Build better software • Better UX • Better SEO •
Increase conversions • Functionality • Control panels • And, yes … frontend
We benefit •Standard-based = maintainability •Be a better class of
dev
Accessibility = Everybody wins
Keep it simple •Consider the problem •Think about the user
•Use common sense
Toot!
supercool.co