"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.
10. 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!!!
11. 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
12. Code Order vs Tab Order
Element Element Element Element
This…
Element Element Element Element
NOT This…
33
13. 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
14. 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
15. 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
16. 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
17. 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
19. Alternative Text
The “alt” attribute contains text that describes an image
alt=“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.”
20. “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
22. (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
Introduce myself Ask if everyone can hear me Apologize in advance if I mumble
HOWEVER, In my spare time... I am a recovering rap metal singer I have two awesome daughters that like to dress up as zombies I have been to the future... and I look amazing
Everyone uses features that were put in place to make things more accessible we ’ ve all see this picture This was taken in the NYC subway last winter we use closed captioning i ’ ve listened to books on tape in the car
Imagine how hard it would be to go back and add chocolate chips to that cookie once it ’ s baked …
This helps screen readers interpret the main language of the page We live Canada, this is especially important
Keep it clean. The core of any well coded site, accessible or not, is well structured HTML. HTML5 has provided us with new elements to make our code more semantic <header>, <nav>, <footer>, <main> all provide semantic meaning over more generic elements such as <divs> Make sure you use headings! h1, h2, h3, h4, h5, h6 Help organize and structure content of a web page This helps everyone quickly scan a page for items of interest. Anything that looks like a heading, probably is Important Navigational tool for screen reader users If it looks like a button, and acts like a button… make it a button
Users expect the order the code appears on the screen to match the order the elements receive focus. Screen readers read the code from left to right, top to bottom.
Common issues: CSS tab-index
When testing keyboard focus, an easy method is to open your template and without looking, hit the Tab key several times (NO counting!!!) then look at the screen. You should be able to tell within seconds where the focus is.
Test that your work can be navigated by keyboard alone This includes any widgets or plugins you may be using Many disabilities, permanent or temporary, make using a mouse difficult
If the image is static and aesthetic in nature, move it to the CSS If the image is something the client needs control over but aesthetic in nature, null out the alt attribute. <img src= “ images/background-seasonal/halloween-background-image.jpg ” alt= “ ” /> If the image serves a purpose and supports the content, use text that adequately describes the image. Pay it back! If a picture is worth a 1000 words, don ’ t use 4 to describe the image.
This allows us to share additional information to the screen reader user that may obvious to those who are able to visually see the site Hidden headers for navigation Labels for some form fields Additional advisory information for screen reader users Say you are working with legacy code that you don ’ t have much control over Telephone field with 3 input boxes, “ hidden ” text could help them understand the auto-advancement of the focus. “ hidden ” text could also replace tool tips or can be used to “ fake ” the title attribute with some simple CSS
There are many testing tools available. find a few of them that work the best for you and use them. Keep in mind that they are not fool proof and only catch ~ 30% of the errors