FUD-Free Accessibility for Web Developers - Also, Cake.
•Download as KEY, PDF•
2 likes•3,177 views
Recommended
More Related Content
Viewers also liked
More from Brian Hogan
More from Brian Hogan (15)
Recently uploaded
Recently uploaded (20)
FUD-Free Accessibility for Web Developers - Also, Cake.
- 1. FUD-free Accessibility for Web Developers Also, cake. Brian P. Hogan twitter: @bphogan www.bphogan.com
- 2. about me I write books I build things I teach people Brian P. Hogan twitter: @bphogan www.bphogan.com
- 3. What is Accessibility? Brian P. Hogan twitter: @bphogan www.bphogan.com
- 4. We often think of Blind people Low vision or colorblind people Deaf people Physically impaired people Cognitively impaired people Brian P. Hogan twitter: @bphogan www.bphogan.com
- 5. We often think of Blind people Low vision or colorblind people Deaf people Physically impaired people Cognitively impaired people Brian P. Hogan twitter: @bphogan www.bphogan.com
- 6. But that's too narrow People on small screens People without Flash People without JavaScript People on slow connections People on limited connections Brian P. Hogan twitter: @bphogan www.bphogan.com
- 7. Making things available to Brian P. Hogan twitter: @bphogan www.bphogan.com
- 8. Accessibility isn’t expensive... Brian P. Hogan twitter: @bphogan www.bphogan.com
- 9. as long as you plan from the start. Brian P. Hogan twitter: @bphogan www.bphogan.com
- 10. We need to understand people's accessibility issues Brian P. Hogan twitter: @bphogan www.bphogan.com
- 11. Don't underestimate people's abilities Brian P. Hogan twitter: @bphogan www.bphogan.com
- 12. Empathize, not sympathize Brian P. Hogan twitter: @bphogan www.bphogan.com
- 13. Blindness Brian P. Hogan twitter: @bphogan www.bphogan.com
- 14. Screen Readers http://webanywhere.cs.washington.edu/ beta/ Brian P. Hogan twitter: @bphogan www.bphogan.com
- 15. They rely on annotated videos or alternative content Brian P. Hogan twitter: @bphogan www.bphogan.com
- 16. Supporting Blind People Ensure you have no spelling errors Ensure your popup windows don't result in dead-ends for screenreaders Remove dependencies on JavaScript Provide keyboard navigation Brian P. Hogan twitter: @bphogan www.bphogan.com
- 17. Low Vision Brian P. Hogan twitter: @bphogan www.bphogan.com
- 18. Screen magnification Brian P. Hogan twitter: @bphogan www.bphogan.com
- 19. High contrast mode Brian P. Hogan twitter: @bphogan www.bphogan.com
- 20. Supporting Low Vision Be aware of issues with contrast Don't use fonts that are terribly small Place important information close to main content as possible Ensure spelling is correct and elements have enough space to be clicked Brian P. Hogan twitter: @bphogan www.bphogan.com
- 21. Colorblindness Brian P. Hogan twitter: @bphogan www.bphogan.com
- 22. Protanopia Brian P. Hogan twitter: @bphogan www.bphogan.com
- 23. Deuteranopia Brian P. Hogan twitter: @bphogan www.bphogan.com
- 24. Tritanopia Brian P. Hogan twitter: @bphogan www.bphogan.com
- 25. Supporting Colorblindness Don't use color as the only method to draw attention to elements Be aware of contrast issues Don't instruct users to identify things by color Brian P. Hogan twitter: @bphogan www.bphogan.com
- 26. Hearing Impairments Brian P. Hogan twitter: @bphogan www.bphogan.com
- 27. Videos need good transcripts Brian P. Hogan twitter: @bphogan www.bphogan.com
- 28. Supporting the Hearing Impaired Provide useful accurate transcripts for audio content Ensure that audio tracks are normalized or have appropriate volume "Duck" background music or background sounds during voiceovers. Brian P. Hogan twitter: @bphogan www.bphogan.com
- 29. People with physical impairments Brian P. Hogan twitter: @bphogan www.bphogan.com
- 30. Brian P. Hogan twitter: @bphogan www.bphogan.com
- 31. They navigate with head wands and tubes Brian P. Hogan twitter: @bphogan www.bphogan.com
- 32. They need to easily identify and click interface elements Brian P. Hogan twitter: @bphogan www.bphogan.com
- 33. Just like someone on a tablet! Brian P. Hogan twitter: @bphogan www.bphogan.com
- 34. Supporting the Physically Impaired Ensure click targets are large enough to be easily accessed Ensure click targets are easily identified. Brian P. Hogan twitter: @bphogan www.bphogan.com
- 35. Cognitive Impairments and Learning Disabilities Brian P. Hogan twitter: @bphogan www.bphogan.com
- 36. Brian P. Hogan twitter: @bphogan www.bphogan.com
- 37. Dyslexia Brian P. Hogan twitter: @bphogan www.bphogan.com
- 38. Supporting Cognitive Impairments Avoid font confusion ( 0 vs O, I vs l Target a 6th grade reading level Keep copy short - say more with less Ensure proper spelling and grammar Brian P. Hogan twitter: @bphogan www.bphogan.com
- 39. Coding For Accessibility is Coding For Usability Brian P. Hogan twitter: @bphogan www.bphogan.com
- 40. Progressive Enhancement Brian P. Hogan twitter: @bphogan www.bphogan.com
- 41. Cake Brian P. Hogan twitter: @bphogan www.bphogan.com
- 42. You should progressively enhance Brian P. Hogan twitter: @bphogan www.bphogan.com
- 43. Your applications should degrade gracefully Brian P. Hogan twitter: @bphogan www.bphogan.com
- 44. Crafting Accessible Forms Brian P. Hogan twitter: @bphogan www.bphogan.com
- 45. Use labels Especially for radio buttons Brian P. Hogan twitter: @bphogan www.bphogan.com
- 46. Wrap with label, or use the “for” attribute! <label> <input type="radio" value="smal"> Small </label> <label for="name">Name</label> <input id="name"> Brian P. Hogan twitter: @bphogan www.bphogan.com
- 47. Avoid Tabindex unless absolutely necessary Brian P. Hogan twitter: @bphogan www.bphogan.com
- 48. AJAX Forms Brian P. Hogan twitter: @bphogan www.bphogan.com
- 49. Accessible JavaScript solutions Build your app without JS first Use your own API! Don't add content with JavaScript use JS to show and hide it Separate Behavior from content Brian P. Hogan twitter: @bphogan www.bphogan.com
- 50. Apply jQuery to forms unobtrusively $(function(){ $("form[data-remote=true]").submit(function(e){ e.preventDefault(); // prevent normal submit $.ajax({ type: "POST", url: ($(this).attr("action") + ".js"), dataType: 'json', data: $(this).serialize(), success: function(data){ $('#results').html(data["render"]); } }); }); }); Brian P. Hogan twitter: @bphogan www.bphogan.com
- 51. Apply jQuery to forms unobtrusively $(function(){ $("form[data-remote=true]").submit(function(e){ e.preventDefault(); // prevent normal submit $.ajax({ type: "POST", url: ($(this).attr("action") + ".js"), dataType: 'json', data: $(this).serialize(), success: function(data){ $('#results').html(data["render"]); } }); }); }); Brian P. Hogan twitter: @bphogan www.bphogan.com
- 52. Tables Brian P. Hogan twitter: @bphogan www.bphogan.com
- 53. Good tables Have table headers defined Have captions that explain their purpose Brian P. Hogan twitter: @bphogan www.bphogan.com
- 54. Use <th> tags. Brian P. Hogan twitter: @bphogan www.bphogan.com
- 55. Use header attributes when it's ambiguous Brian P. Hogan twitter: @bphogan www.bphogan.com
- 56. Tables can be OK for forms Brian P. Hogan twitter: @bphogan www.bphogan.com
- 57. Popups and Overlays Brian P. Hogan twitter: @bphogan www.bphogan.com
- 58. Make them regular links <a href="http://google.com/" class="popup" data-height="400" data-width="400">Search Google</a> Brian P. Hogan twitter: @bphogan www.bphogan.com
- 59. Add behavior with JavaScript $(".popup").click(function(e){ e.preventDefault(); var url = $(this).attr("href"); var title = $(this).html(); var w = $(this).attr("data-width"); var h = $(this).attr("data-height"); window.open(url, title, "width="+ + w + ",height=" + h); }); Brian P. Hogan twitter: @bphogan www.bphogan.com
- 60. Add JS-only behavior with JS! var closer = $("<button>Close</button>"); closer.click(function(e){ mywindow.dialog("close"); }); $("#window").append(closer); var mywindow = $("#window").dialog(); Brian P. Hogan twitter: @bphogan www.bphogan.com
- 61. ARIA Accessible Rich Internet Applications Brian P. Hogan twitter: @bphogan www.bphogan.com
- 62. ARIA-Live <h3>Tasks</h3> <form id="task_form"> <label>Task <input type="text" id="task" name="task" value=""> </label> <input type="submit" value="Add"> </form> <ul aria-live="polite" id="tasks"> </ul> Brian P. Hogan twitter: @bphogan www.bphogan.com
- 63. ARIA-Roles banner navigation main document application complementary contentinfo search ... lots more Brian P. Hogan twitter: @bphogan www.bphogan.com
- 64. Use display:none with care! Brian P. Hogan twitter: @bphogan www.bphogan.com
- 65. Static Content Brian P. Hogan twitter: @bphogan www.bphogan.com
- 66. Avoiding Flash of Unstyled Content <script> document.write(' <style type="text/css" media="screen"> .hiddenWhileLoading {display:none;} </style> '); document.documentElement.className = 'hiddenWhileLoading'; </script> Brian P. Hogan twitter: @bphogan www.bphogan.com
- 67. Avoiding Flash of Unstyled Content <script> document.write(' <style type="text/css" media="screen"> .hiddenWhileLoading {display:none;} </style> '); document.documentElement.className = 'hiddenWhileLoading'; </script> Brian P. Hogan twitter: @bphogan www.bphogan.com
- 68. Avoiding Flash of Unstyled Content <!-- load jquery from CDN or whatever --> <script src=”jquery.js”></script> <script> $(function(){} // your stuff $(document.documentElement) .removeClass("hiddenWhileLoading"); ); </script> Brian P. Hogan twitter: @bphogan www.bphogan.com
- 69. Testing Accessibility Brian P. Hogan twitter: @bphogan www.bphogan.com
- 70. First, does it validate? Brian P. Hogan twitter: @bphogan www.bphogan.com
- 71. WCAG 2.0 http://www.w3.org/TR/WCAG/ Brian P. Hogan twitter: @bphogan www.bphogan.com
- 72. wave.webaim.org Brian P. Hogan twitter: @bphogan www.bphogan.com
- 73. Manual testing Jaws http:// www.freedomscientific.com/products/ fs/jaws-product-page.asp WindowEyes http://www.gwmicro.com/ Window-Eyes/ NVDA http://www.nvda-project.org/ OSX VoiceOver (built-in) Brian P. Hogan twitter: @bphogan www.bphogan.com
- 74. Color Oracle http://colororacle.cartography.ch/ Brian P. Hogan twitter: @bphogan www.bphogan.com
- 75. Content will be easy to read Things will be easy to see Elements will be easier to interact with on portable devices Transcripts for promotional material can be read where the video can’t be played Brian P. Hogan twitter: @bphogan www.bphogan.com
- 76. Perfect is the Enemy of Good. - Commonly attributed to Voltaire Brian P. Hogan twitter: @bphogan www.bphogan.com
- 77. The world will be a better place. Brian P. Hogan twitter: @bphogan www.bphogan.com
- 78. Thank you! http://spkr8.com/t/14841 Brian P. Hogan twitter: @bphogan www.bphogan.com
Editor's Notes
- \n
- I'm a web developer, author, book editor, and I teach programming at Chippewa Valley Technical College. I've written a few books on web development and I'm very passionate about accessibility. I was actually born with bilateral cataracts and as a result, I have low vision.\n
- What does accessibility mean to you?\n
- When the topic of accessibility comes up, we usually think of disabilities. Specifically, these kind. Blind and low vision users are the ones who are obviously affected, and the hearing impaired have trouble with videos without captions. The physically impaired may have trouble working mice, and cognitive impairments can be anything from reading comprehension to dyslexia, which means you need to make wise choices about your fonts and spacing.\n
- I want to point out here that these are not &#x201C;users&#x201D; or &#x201C;customers&#x201D;. These are people, and I think it&#x2019;s really important that we keep that in the back of our minds.\n
- But here&#x2019;s another group of people to think about. Accessibility isn&#x2019;t just about disabled users. \n
- It's about making our products, services, and information available to anyone who wants it.\n
- I hear people telling me all the time that they can&#x2019;t afford to make their solutions accessible because it&#x2019;s too expensive. I&#x2019;ve heard product owners flat out tell me &#x201C;we&#x2019;re not concerned about the disabled users.&#x201D; The thing is, accessibility isn&#x2019;t that expensive to implement...\n
- as long as you build it in from the beginning.\n
- In order to plan ahead, you need to think about people's needs. You already do that with your target audience anyway.\n
- I often hear the argument "We don't have to worry about making our mobile site accessible - a blind person won't use an iPad or an iPhone" The iPad has some great accessibility features, and so do Android phones. And there are kits that make it perfectly possible to use both of these devices. Plus I know blind people who program.\n
- Once you understand the accessibility issues your customers face, you can start planning how you'll support them. So let&#x2019;s talk about how people with traditional disabilities use computers.\n
- Blind users typically use either a Braille display or a screen reader.\n
- Screen readers read the text on the page, including alternate text and captions.\n
- Captions are useful for the blind in cases where they don't have the ability to load the video.\n
- \n
- Low vision users present another challenge. These uses also use screenreading software, but use other technologies as well\n
- OSX and Compiz offer amazing full screen zooming. Windows is very far behind so people use third-party products like ZoomText instead. Unfortunately this creates "tunnel vision" - a zoomed in user might miss something outside.\n
- www.paciellogroup.com&#x2014;google-chrome-accessibility <http://www.paciellogroup.com/blog/2008/09/google-chrome-accessibility/>\n
- \n
- \n
- a difficulty in distinguishing differences between red, yellow, and green, as they can often appear all to be yellow or brow\n
- Difficulty in distinguishing differences between red and green.\n
- \n
- \n
- We all-too-often forget about the hearing-impaired users because we view the web as a visual medium\n
- Especially if there's a lot of audio. If you're putting videos of a talk or presentation online, having a transcript is very helpful.\n
- \n
- These people may not have enough motor skills to operate a keyboard or mouse and will use other input devices.\n
- What if that was you? Have you taken good care of your hands, those tools you use to build the things you build? How would you write code if you couldn&#x2019;t use your hands?\n
- Head wands let them touch a screen with a wand that extends from the forehead or jaw. Sip and blow tubes can control a mouse pointer with pressure/ Both are very difficult to operate.\n
- We need to be mindful of these users and how they navigate when we place interface elements\n
- \n
- This will also help users of touchscreen devices.\n
- A lot of this comes down to reading comprehension.\n
- With any kind of writing, we want to say more with less.\n
- Dyslexic users often have trouble interpreting words, and you can help that by using fonts that are easier for them to read.\n
- \n
- By addressing the issues these groups have, we can make our sites better for all our users. If we use good colors and icon placement, and we keep our text simple and easy to follow, we'll gain some points there. But let's take it farther.\n
- We want to make it work first, then make it better.\n
- Web apps without js are still cake. They may not be as awesome as cake without frosting, but they can still be quite tasty if done right\n
- \n
- \n
- Forms are pretty much everywhere. We want to make forms easy to use.\n
- Labels help screen reading software associate form fields with the text that identifies them. In the case of radio buttons, they do even more.\n
- Especially important for helping screen readers find fields, but it also lets people click the label to activate the checkbox or the radio button.\n\n
- A browser will, by default, will let you tab through the forms. If you structure the form in a linear fashion and use CSS to style it, you can avoid tabindex most of the time.\n
- Today's applications need to use AJAX to provide decent user interfaces. When you build on a good foundation, this isn't a problem\n
- \n
- Build solid forms that work with regular posts. Use jQuery to unobtrusively submit the form. Look for a data attribute and then intercept the submit.\n
- Then change the URL - maybe append a .js on it and handle it on the server side.\n
- Use tables where they make sense\n
- \n
- \n
- That&#x2019;s pretty much all there is to it. Modern browsers and screen reading software have figured this out.\n
- If the forms are actually tabular, and the table is properly structured.\n
- In the past, popups and overlays were dangerous. And they still can be if we don&#x2019;t implement them properly.\n
- We can use custom data attributes to embed properties. No need to override the rel attribute. We also don&#x2019;t include the onclick on the element.\n
- We can grab everything we need from the markup to make the popup work, and this can be global. When no JavaScript is enabled, the popup is displayed on a new page.\n
- When the content doesn't load in a popup, you don't want to show that control. Instead, add it with JavaScript. \n
- It&#x2019;s not enough to have static pages anymore. We need to interact with users, and that makes it harder or us to be accessible. ARIA gives us a hand.\n
- Screenreaders see the polite region and know that not only does it update, but that updates shouldn&#x2019;t interrupt the reader when it&#x2019;s reading other areas.\n
- Really handy way to help screenreader users find elements. &#x201C;Documents&#x201D; are static documents we read. Screenreaders have shortcut keys for navigating. &#x201C;Application&#x201D; role tells screenreaders to turn off the shortcut keys so that the apps can use those shortcut keys instead.\n
- Use JavaScript to hide the content. This way if JS is disabled, but CSS is enabled, the content can still be read by the screenreader.\n
- There are lots of cases where you want to improve the user experience by loading content with JavaScript. However, if that content is simply static content, loading with JS, we need to figure out of that&#x2019;s really the best solution.\n
- We&#x2019;ll create a &#x201C;hiddenWhileLoading&#x201D; selector in CSS that hides the element with display:block.\n
- Then we&#x2019;ll apply this to the main element on our page, the HTML tag. This will hide everything on the page.\n
- Then we&#x2019;ll load jQuery. Then in Document Ready we&#x2019;ll kick off our code. At the end of it all we&#x2019;ll remove the class from the page and everything shows up.\n
- \n
- You want valid markup. Invalid markup can cause all sorts of trouble.\n
- \n
- \n
- Automated testing can only go so far. We have to test things manually, and thankfully there are many free options.\n
- Color Oracle is a free cross-platform app that will let you see your screen as a person with various types of colorblindness.\n
- \n
- One huge mistake people make when talking about accessibility is assuming that it has to be an all-or-nothing approach. THe tiniest little things help, and just by going out and taking one thing from this talk and incorporating it into what you do, you&#x2019;ll already do more good.\n
- When you do it right, people won&#x2019;t think you&#x2019;ve done anything at all.\n
- \n