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
Accessibility Done Right
Search
Michelle Sanver
February 19, 2015
Programming
1
160
Accessibility Done Right
Accessibility is about unified design.
Michelle Sanver
February 19, 2015
Tweet
Share
More Decks by Michelle Sanver
See All by Michelle Sanver
Messy data != Messy code
michellesanver
1
230
Advanced Serializing in PHP: Speed it up!
michellesanver
0
610
Using the Workflow component for e-commerce
michellesanver
2
510
An introduction to Graph Databases in PHP, using Neo4j
michellesanver
2
340
Graph Databases and PHP
michellesanver
0
340
Starting Open S
michellesanver
0
84
Neo4j is AWESOME!
michellesanver
0
740
Behat + Mink + PhantomJS = TEST ALL THE THINGS!
michellesanver
1
99
Behat+Mink+PhantomJS = Test ALL THE THINGS!
michellesanver
9
1.9k
Other Decks in Programming
See All in Programming
Claude CodeによるAI駆動開発の実践 〜そこから見えてきたこれからのプログラミング〜
iriikeita
0
320
Developer Joy - The New Paradigm
hollycummins
1
360
開発組織の戦略的な役割と 設計スキル向上の効果
masuda220
PRO
8
1.5k
Devvox Belgium - Agentic AI Patterns
kdubois
1
140
AIと人間の共創開発!OSSで試行錯誤した開発スタイル
mae616
2
800
Introduce Hono CLI
yusukebe
6
3.1k
ALL CODE BASE ARE BELONG TO STUDY
uzulla
27
6.7k
alien-signals と自作 OSS で実現する フレームワーク非依存な ロジック共通化の探求 / Exploring Framework-Agnostic Logic Sharing with alien-signals and Custom OSS
aoseyuu
2
520
React Nativeならぬ"Vue Native"が実現するかも?_新世代マルチプラットフォーム開発フレームワークのLynxとLynxのVue.js対応を追ってみよう_Vue Lynx
yut0naga1_fa
2
520
When Dependencies Fail: Building Antifragile Applications in a Fragile World
selcukusta
0
110
マンガアプリViewerの大画面対応を考える
kk__777
0
150
Migration to Signals, Resource API, and NgRx Signal Store
manfredsteyer
PRO
0
110
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.7k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
Thoughts on Productivity
jonyablonski
70
4.9k
Optimizing for Happiness
mojombo
379
70k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.7k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
The Art of Programming - Codeland 2020
erikaheidi
56
14k
A Modern Web Designer's Workflow
chriscoyier
697
190k
Transcript
@michellesanver Accessibility done right #phpuk
@michellesanver
@michellesanver WIIIIIIIE \o/ “Learn the most by sharing your knowledge
with others” - @coderabbi
@michellesanver Michelle Sanver
@michellesanver
@michellesanver Michelle Sanver Co-President of PHPWomen
@michellesanver PHPWomen 15 pounds or 30 dollars
@michellesanver Michelle Sanver Accent(s)!?
@michellesanver Michelle Sanver
@michellesanver I’m a backend developer.
@michellesanver Disclaimer There’s a lot more to accessibility.
@michellesanver After lunch story
@michellesanver Aron Aron is a blind programmer
@michellesanver Aron He really knows how to use a screenreader
@michellesanver Aron I don’t
@michellesanver Disclaimer This talk is not how I planned it
@michellesanver This talk is not about “people with disabilities”
@michellesanver This talk is about people who are using the
web.
@michellesanver Good Code Written with the user in mind
@michellesanver Assistive technology
@michellesanver Assistive technology Screen Readers
@michellesanver Assistive technology Text-To-Speech
@michellesanver Assistive technology Screen Magnifiers
@michellesanver Assistive technology Joysticks
@michellesanver Assistive technology Keyboards
@michellesanver Assistive technology Mobile Devices
@michellesanver Audience participation! What other assistive technology is there?
@michellesanver All technology is assistive technology
@michellesanver What if accessibility online was like accessibility IRL?
@michellesanver A typical ramp
@michellesanver A hotel layout
@michellesanver Hotel Layout: SunshinePHP I lost my glasses…
@michellesanver Hotel Layout: PHPUK I *really* hope I keep my
glasses
@michellesanver Accessibility is about Universal design
@michellesanver Universal Design “Universal design is the design of products
and environments to be usable by all people, to the greatest extent possible, without the need for adaptation or specialized design.” -Ron Mace
@michellesanver Universal Design Keywords equitable, flexible, simple, intuitive, low effort,
approachable, usable
@michellesanver Guidelines, rules and tools Keep your JavaScript ON!!!
@michellesanver Guidelines, rules and tools All functionality for all people
@michellesanver Content Gudelines
@michellesanver General Writing Use Consistent Language
@michellesanver General Writing Write out acronyms (At least the first
time you use them)
@michellesanver General Writing Be clear and concise
@michellesanver Headings Screen reader users can use heading structure to
navigate content.
@michellesanver Headings Keep your headers logical
@michellesanver Headings Don’t skip “h2” for design
@michellesanver Font-Face, Size and colour Easy to use sans-serif font
@michellesanver Font-Face, Size and colour Size: 12pt or more
@michellesanver Font-Face, Size and colour Size headers: Relative in order
@michellesanver Font-Face, Size and colour Heading 3: 14pt Heading 2:
16pt Heading 1: 18pt
@michellesanver Font-Face, Size and colour Keep a high contrast between
background and font colour.
@michellesanver Links Give your links unique and descriptive names
@michellesanver Tables Only for tabular data!
@michellesanver Tables For complex tables, provide a summary
@michellesanver Forms Label form fields!
@michellesanver Forms Should be “tabable”
@michellesanver Forms “Tabable” in visual order
@michellesanver Forms Use fieldsets for related fields
@michellesanver Forms Don’t use only * for required fields
@michellesanver Forms Use ARIA in *addition* to asterix ARIA required="true"
and ARIA required="false"
@michellesanver Forms After submitting Include errors in the page-title
@michellesanver Forms CAPTCHA is bad mmmkay http://webaim.org/blog/ spam_free_accessible_forms/
@michellesanver Colours Colourblindness
@michellesanver Colours Learning disabilities
@michellesanver Colours Satisfy both groups! Use colours *and* visual indicators
@michellesanver Audio & Video Alternative text version
@michellesanver Video Use Captions
@michellesanver Audio Include a text transcript
@michellesanver Audio & Video Also for non-auditory learners
@michellesanver Audio & Video If filling material for an already
descriptive article… No alternative needed
@michellesanver Audio & Video Do *not* autoplay!
@michellesanver Audio & Video Make sure you can pause.
@michellesanver Audio & Video Avoid flashes
@michellesanver Audio & Video 3 flashes in one second can
cause epileptic reactions.
@michellesanver Images Alt Text
@michellesanver Images Alt Text What you’re trying to convey!
@michellesanver Images Alt Text Can be replaced with a caption.
@michellesanver Images Alt Text Leave empty for decorative images
@michellesanver Images High contrast
@michellesanver Images For graphs, include a table if possible
@michellesanver Images Avoid images of text
@michellesanver WAI-Aria
@michellesanver WAI-Aria ARIA = Accessible Rich Internet Applications
@michellesanver Aria Roles
@michellesanver Aria: Roles “button” can be a fancy clickable element
@michellesanver Aria States and Properties
@michellesanver Aria examples Roles of "navigation" and "menu"
@michellesanver Aria examples Landmarks of "banner" and "main content"
@michellesanver Aria examples Alerts of "live" and "atomic"
@michellesanver Aria examples Forms
@michellesanver Dynamic content Accessible slide shows
@michellesanver Dynamic content Keyboard friendly video players NO AUTOPLAY PLZ
@michellesanver Aria: Live Regions Tell the user about dynamic updates!
@michellesanver Aria: Live Regions Polite or assertive
@michellesanver Aria: Live Regions Allows your JavaScript to be ON
@michellesanver Aria: Live Regions Twitter uses live regions NICELY
@michellesanver Aria: Live Regions: Twitter Has a dedicated accessibility team
@michellesanver Aria: Live Regions: Twitter Tweet field has tons of
information
@michellesanver Aria Example Twitter <div aria-labelledby="tweet-box-mini-home-profile-label" id="tweet-box-mini-home-profile" class="tweet-box rich-editor notie"
contenteditable="true" spellcheck="true" role="textbox" aria-multiline="true" dir="ltr" aria-autocomplete="list" aria-expanded="false" aria-owns=“typeahead-dropdown-6” > <div>What's happening?</div></div>
@michellesanver Aria Example Twitter <div aria-labelledby="tweet-box-mini-home-profile-label" id="tweet-box-mini-home-profile" class="tweet-box rich-editor notie"
contenteditable="true" spellcheck="true" role="textbox" aria-multiline="true" dir="ltr" aria-autocomplete="list" aria-expanded="false" aria-owns=“typeahead-dropdown-6” > <div>What's happening?</div></div>
@michellesanver Aria Example Twitter <div aria-labelledby="tweet-box-mini-home-profile-label" id="tweet-box-mini-home-profile" class="tweet-box rich-editor notie"
contenteditable="true" spellcheck="true" role="textbox" aria-multiline="true" dir="ltr" aria-autocomplete="list" aria-expanded="false" aria-owns=“typeahead-dropdown-6” > <div>What's happening?</div></div>
@michellesanver Aria Example Twitter <div aria-labelledby="tweet-box-mini-home-profile-label" id="tweet-box-mini-home-profile" class="tweet-box rich-editor notie"
contenteditable="true" spellcheck="true" role="textbox" aria-multiline="true" dir="ltr" aria-autocomplete="list" aria-expanded="false" aria-owns=“typeahead-dropdown-6” > <div>What's happening?</div></div>
@michellesanver Aria Example Twitter <div aria-labelledby="tweet-box-mini-home-profile-label" id="tweet-box-mini-home-profile" class="tweet-box rich-editor notie"
contenteditable="true" spellcheck="true" role="textbox" aria-multiline="true" dir="ltr" aria-autocomplete="list" aria-expanded="false" aria-owns=“typeahead-dropdown-6” > <div>What's happening?</div></div>
@michellesanver Aria Example Twitter <div aria-labelledby="tweet-box-mini-home-profile-label" id="tweet-box-mini-home-profile" class="tweet-box rich-editor notie"
contenteditable="true" spellcheck="true" role="textbox" aria-multiline="true" dir="ltr" aria-autocomplete="list" aria-expanded="false" aria-owns=“typeahead-dropdown-6” > <div>What's happening?</div></div>
@michellesanver Online Assessment Tools
@michellesanver Online Assessment Tools Wave http://wave.webaim.org/
@michellesanver Online Assessment Tools Color Filter http://colorfilter.wickline.org/
@michellesanver Online Assessment Tools Vischeck http://www.vischeck.com/vischeck/
@michellesanver Online Assessment Tools Color Contrast Checker http://webaim.org/resources/contrastchecker/
@michellesanver Online Assessment Tools For more W3C Web Accessibility Tools
list http://www.w3.org/WAI/ER/tools/
@michellesanver Wrapup
@michellesanver Wrapup Accessibility is *not* about assistive technology.
@michellesanver Wrapup Accessibility is about people.
@michellesanver Wrapup Accessibility is about universal design
@michellesanver Wrapup Accessibility means no workarounds
@michellesanver Wrapup Keep your JavaScript ON
@michellesanver Wrapup Follow guidelines
@michellesanver Wrapup Use WAI-Aria
@michellesanver Ask questions!
@michellesanver Thank you! Please rate my talk! https://joind.in/13371 (OMG, do
you see the 1337? :D)
@michellesanver Accessibility Let’s talk about it.