10 tips in 10 minutes - DevTO Sept 30, 2013
•Download as PPT, PDF•
3 likes•919 views
"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.
Recommended
Recommended
More Related Content
Similar to 10 tips in 10 minutes - DevTO Sept 30, 2013
Similar to 10 tips in 10 minutes - DevTO Sept 30, 2013 (20)
Recently uploaded
Recently uploaded (20)
10 tips in 10 minutes - DevTO Sept 30, 2013
- 1. 1 10 tips in 10 minutes Billy Gregory @thebillygregory bgregory@paciellogroup.com
- 2. In my spare time...
- 3. 3 Types of Disabilities Mobility / Agility Deaf / Hearing Impaired Cognitive Seizure Disorders Colour Blind Low Vision Blind
- 4. If you build it...
- 5. Try to assume at least SOME level of Accessibility
- 8. Watch Your Language! <html lang="en"> <html lang="fr"> 11
- 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
- 18. Form labels and fieldsets 77
- 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
Editor's Notes
- 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