View
426
Download
1
Category
Tags:
Preview:
DESCRIPTION
"But what can we do right NOW?" Every developer new to accessibility asks this question at some point. Billy Gregory will offer developers new to accessibility 10 "Day 1" tips they can use immediately to improve the accessibility of their work. An abridged version of my developer talk, given to an amazing crowd at DevTO in Toronto, Canada.
Citation preview
1
10 tips in 10 minutes
Billy Gregory@thebillygregorybgregory@paciellogroup.com
In my spare time...
3
Types of Disabilities
Mobility / Agility
Deaf / Hearing Impaired
Cognitive
Seizure Disorders
Colour Blind
Low Vision
Blind
If you build it...
Try to assume at least SOME level of Accessibility
Day One Day One AccessibilityAccessibilityTips!Tips!
Watch Your Language!
<html lang="en">
<html lang="fr">
11
Semantic Mark-up
22
Semantic Mark-up
Use elements for their intended purpose.•Use buttons as buttons, lists as lists, tables as tables, etc.
Make sure your pages are titled appropriately and meaningfully. •it’s the first thing a screen reader will read
22
USE HEADINGS!!!
Code Order vs Tab Order
Code Order: The order the elements are marked-up on the page
Tab Order:The order in which the elements on the page receive focus.
33
Code Order vs Tab Order
Element Element Element Element
This…
Element Element Element Element
NOT This…
33
Focus
In your CSS, for every :hover pseudo element, use the :focus pseudo element•:hover is bound to the mouse. •keyboards don’t hover•Don’t override the outline•Use more than color alone to show the focus. text-decoration:underline; is best.
5544
Focus
Make sure that when new elements are opened, the focus shifts accordingly. For instance, when a user opens•Modals•Tool tips
Be careful when forcing focus on an element. •The user might not be expecting this.
• Error messages • Search form on a new page
44
Keyboard Control
POP QUIZ!… or trick question
Question:Who among your desktop users might not be using a mouse?
Answer: Anyone! …It’s not up to us to decide that ;)
Example: Have you ever tabbed through a form when you’re filling it out?
55
Keyboard Control
Test that your work can be navigated by keyboard alone.
Look out for “keyboard traps” – make sure you don’t open something that would result in your cursor / focus being behind an element like a modal window.
*I totally stole the Akbar thing from George Zamfir - @good_wally
55
Skip Links
<main id=“main” role=“main” tabindex=”-1” … <div id=“right-col” role=“complementary”…
<footer id=“footer” role=“contentinfo” …
<a href="#main">skip to main content</a>
<ul> <!– this is a repeated block of content --> …
66
Form labels and fieldsets
77
Alternative Text
The “alt” attribute contains text that describes an imagealt=“Descriptive text would go in here”
88
TSA To Introduce New Security Measures.BAD alt text:alt=“TSA officer”
GOOD alt text:alt=“A TSA Agent looking into the camera while snapping on a rubber glove.”
“Hidden” Text
One of the best practices for “hiding” text off screen is to use css to visually remove text from the code order while still keeping it visible to screen readers.
99
2121
TEST!!TEST!!
1010
(Don’t be this guy.)
Test.
Firebug
Web Accessibility Toolbar
Wave Toolbar
Developer Tools
and many, MANY more...
JAWS demo mode
NVDA - FREE!!
VoiceOver - built into OSX
Thank you!
Billy Gregory@thebillygregory
bgregory@paciellogroup.com
Recommended