Accessibility Lightning Talk
?
3 likes?2,368 views
Practical tips to make a website more accessible to different devices, technologies, and interactions. Presented April 12, 2011 for the WordPress DC Meetup.
![Removing Type=”search” Default Styles
input[type=”search”] {
-moz-appearance: textfield;
-webkit-appearance: textfield;
}
input[type=”search”]::-webkit-search-cancel-
button {
/* Remove default */
-webkit-appearance: none;
}
Sunday, April 10, 2011](https://image.slidesharecdn.com/accessibility-lightning-talk-110410212910-phpapp01/85/Accessibility-Lightning-Talk-22-320.jpg)
Accessibility Lightning Talk
- 1. Accessibility Lightning Talk Sunday, April 10, 2011
- 2. When you hear ‘accessibility’ what comes to mind? Sunday, April 10, 2011
- 3. Do you think of this? Sunday, April 10, 2011
- 4. ...or this? Sunday, April 10, 2011
- 5. Have you thought about this? Sunday, April 10, 2011
- 6. or this? Sunday, April 10, 2011
- 7. or even this? Sunday, April 10, 2011
- 8. Accessibility is not about people with disabilities. Sunday, April 10, 2011
- 9. Accessibility is about people! Sunday, April 10, 2011
- 10. Accessibility encompasses... Sunday, April 10, 2011
- 11. Different Devices ★ Desktop Computer ★ Mobile ★ In Between (iPad, Netbooks) ★ TV’s Sunday, April 10, 2011
- 12. Different Interactions ★ Mouse ★ Keyboard ★ Touchscreen ★ Screenreader Sunday, April 10, 2011
- 13. Different Technologies ★ JavaScript ★ CSS ★ Images display: none; Sunday, April 10, 2011
- 14. Tips For Better Accessibility Sunday, April 10, 2011
- 15. Use The Right Element For The Job <p> = paragraph <h1>-<h6> = Heading 1 through 6 <div class=”paragraph”> Using Tables for Layout Sunday, April 10, 2011
- 16. Think About Source Order ★ Markup content the way it should be read NOT the way it should be displayed. Header Header Aside Content Content Aside Sunday, April 10, 2011
- 17. Use Alt Attributes on <img> ★ Include text to display as a backup ★ Provide context to what the user is missing ★ If the image is purely decoration use alt=”” Sunday, April 10, 2011
- 18. Associate Inputs with Labels ★ Link descriptive text with an input field ★ Provides context about what is expected ★ Clicking label puts cursor in input field Sunday, April 10, 2011
- 19. Implicit vs. Explicit Labels <label for=”name”>Name</label> <input type=”text” id=”name”> <label> Name <input type=”text”> </label> label { curser: pointer; } Sunday, April 10, 2011
- 20. Use HTML5 Input Types ★ type=”search” ★ type=”tel” ★ type=”url” ★ type=”email” ★ type=”number” ★ Old browsers fallback to type=”text” Sunday, April 10, 2011
- 21. Type=“search” Has Slight Benefits Sunday, April 10, 2011
- 22. Removing Type=”search” Default Styles input[type=”search”] { -moz-appearance: textfield; -webkit-appearance: textfield; } input[type=”search”]::-webkit-search-cancel- button { /* Remove default */ -webkit-appearance: none; } Sunday, April 10, 2011
- 23. <input type=”number”> Sunday, April 10, 2011
- 24. <input type=”url”> Sunday, April 10, 2011
- 25. <input type=”email”> Sunday, April 10, 2011
- 26. Turn On Keyboard Navigation In OS X System Preferences -> Keyboard -> All Controls Sunday, April 10, 2011
- 27. Tab Index ★ Use tabindex attribute to specify tab order ★ Tab index goes from lowest to highest ★ tabindex=”-1” will be skipped ★ If you use proper HTML source order, you’re done! Sunday, April 10, 2011
- 28. :focus = :hover ★ Anywhere :hover is used, add :focus as well a:hover, a:focus { text-decoration:underline; color:red; } Sunday, April 10, 2011
- 29. Example of Bad Keyboard Accessibility ★ http://www.hd-live.co.uk/ Sunday, April 10, 2011
- 30. Hiding Content the Accessible Way /* Hides from keyboard users */ display:none; /* Hidden but still accessible */ .hidden { left:-999em; position:absolute; top:auto; } Sunday, April 10, 2011
- 31. Revealing Hidden Content /* Reveal on Focus */ .hidden:focus { position:static; } Sunday, April 10, 2011
- 32. Skip Navigation Link ★ Lets a visitor skip straight to the content ★ Without it, keyboard visitors suffer ★ Should be the first element after <body> ★ Can be visible or hidden based on the desgin ★ If hidden, should stand out on focus Sunday, April 10, 2011
- 33. Skip Navigation Link <body> <a id="top" href="#content"> Skip to Content</a> Sunday, April 10, 2011
- 34. Skip Navigation Link #top:focus { position:static; font-size:1.5em; background-color:#FFFFD5; display:block; font-weight:bold; color:#000; padding:2px 15px 5px; } Sunday, April 10, 2011
- 35. ARIA Landmark Roles ★ Help define the structure of a document ★ Screenreaders can jump around to different sections ★ Just add role attribute to an element <div id=”header” 谤辞濒别=”产补苍苍别谤”> Sunday, April 10, 2011
- 36. 谤辞濒别=”补谤迟颈肠濒别” ★ Content that makes sense in its own right, such as a complete blog post, a comment on a blog, a post in a forum, and so on. Sunday, April 10, 2011
- 37. 谤辞濒别=”产补苍苍别谤” ★ Site-orientated content, such as the title of the page and the logo. ★ Header Sunday, April 10, 2011
- 38. 谤辞濒别=”肠辞尘辫濒别尘别苍迟补谤测” ★ Supporting content for the main content, but meaningful in its own right when separated from the main content. ★ Aside or sidebar Sunday, April 10, 2011
- 39. 谤辞濒别=”肠辞苍迟别苍迟颈苍蹿辞” ★ Child content, such as footnotes, copyrights, links to privacy statement, links to preferences, and so on. ★ Footer Sunday, April 10, 2011
- 40. 谤辞濒别=”尘补颈苍” ★ Content that is directly related to or expands on the central content of the document. ★ Main content container, #content Sunday, April 10, 2011
- 41. 谤辞濒别=”苍补惫颈驳补迟颈辞苍” ★ Content that contains the links to navigate this document and/or related documents. Sunday, April 10, 2011
- 42. 谤辞濒别=”蝉别补谤肠丑” ★ This section contains a search form to search the site. Sunday, April 10, 2011
- 43. Mobile Stylesheet ★ Smartphones handle websites OK ★ Dumb phones need a slimmed down stylesheet ★ http://perishablepress.com/press/2009/08/02/ the-5-minute-css-mobile-makeover/ Sunday, April 10, 2011
- 44. Mobile Stylesheet Sunday, April 10, 2011
- 45. Accessibility isn’t something you can tack on at the end! Sunday, April 10, 2011
- 46. Think about it from the start. Sunday, April 10, 2011
- 47. Accessibility Resources ★ http://webaim.org ★ http://diveintoaccessibility.org/ ★ http://juicystudio.com/article/examining-wai- aria-document-andmark-roles.php ★ http://www.w3.org/standards/webdesign/ accessibility ★ http://jfciii.com/ Sunday, April 10, 2011
- 48. Russell Heimlich ★ @kingkool68 ★ http://www.russellheimlich.com/blog/ Sunday, April 10, 2011
- 49. The End http://slidesha.re/kingkool68 Sunday, April 10, 2011