Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Accessibility               Lightning TalkSunday, April 10, 2011
When you hear ‘accessibility’    what comes to mind?Sunday, April 10, 2011
Do you think of this?Sunday, April 10, 2011
...or this?Sunday, April 10, 2011
Have you thought about this?Sunday, April 10, 2011
or this?Sunday, April 10, 2011
or even this?Sunday, April 10, 2011
Accessibility is not about              people with disabilities.Sunday, April 10, 2011
Accessibility is about                             people!Sunday, April 10, 2011
Accessibility encompasses...Sunday, April 10, 2011
Different Devices          ★ Desktop Computer          ★ Mobile          ★ In Between (iPad, Netbooks)          ★ TV’sSund...
Different Interactions          ★ Mouse          ★ Keyboard          ★ Touchscreen          ★ ScreenreaderSunday, April 10...
Different Technologies          ★ JavaScript          ★ CSS          ★ Images                               display: none;...
Tips For Better AccessibilitySunday, April 10, 2011
Use The Right Element For The Job           <p> = paragraph           <h1>-<h6> = Heading 1 through 6           <div class...
Think About Source Order        ★ Markup content the way it should be read NOT the                way it should be display...
Use Alt Attributes on <img>          ★ Include text to display as a backup          ★ Provide context to what the user is ...
Associate Inputs with Labels          ★ Link descriptive text with an input field          ★ Provides context about what i...
Implicit vs. Explicit Labels           <label for=”name”>Name</label>           <input type=”text” id=”name”>           <l...
Use HTML5 Input Types          ★ type=”search”          ★ type=”tel”          ★ type=”url”          ★ type=”email”        ...
Type=“search” Has Slight BenefitsSunday, April 10, 2011
Removing Type=”search” Default Styles           input[type=”search”] {                 -moz-appearance: textfield;        ...
<input type=”number”>Sunday, April 10, 2011
<input type=”url”>Sunday, April 10, 2011
<input type=”email”>Sunday, April 10, 2011
Turn On Keyboard Navigation In OS X           System Preferences -> Keyboard -> All ControlsSunday, April 10, 2011
Tab Index          ★ Use tabindex attribute to specify tab order          ★ Tab index goes from lowest to highest         ...
:focus = :hover        ★ Anywhere :hover is used, add :focus as well         a:hover,         a:focus {           text-dec...
Example of Bad Keyboard Accessibility          ★ http://www.hd-live.co.uk/Sunday, April 10, 2011
Hiding Content the Accessible Way           /* Hides from keyboard users */           display:none;           /* Hidden bu...
Revealing Hidden Content           /* Reveal on Focus */           .hidden:focus {               position:static;         ...
Skip Navigation Link          ★ Lets a visitor skip straight to the content          ★ Without it, keyboard visitors suffe...
Skip Navigation Link           <body>                     <a id="top" href="#content">                     Skip to Content...
Skip Navigation Link           #top:focus {               position:static;               font-size:1.5em;               ba...
ARIA Landmark Roles          ★ Help define the structure of a document          ★ Screenreaders can jump around           ...
role=”article”          ★ Content that makes sense in its own right, such                   as a complete blog post, a com...
role=”banner”          ★ Site-orientated content, such as the title of the                   page and the logo.          ★...
role=”complementary”          ★ Supporting content for the main content, but                   meaningful in its own right...
role=”contentinfo”          ★ Child content, such as footnotes, copyrights,                   links to privacy statement, ...
role=”main”          ★ Content that is directly related to or expands on                   the central content of the docu...
role=”navigation”          ★ Content that contains the links to navigate this                   document and/or related do...
role=”search”          ★ This section contains a search form to search                   the site.Sunday, April 10, 2011
Mobile Stylesheet          ★ Smartphones handle websites OK          ★ Dumb phones need a slimmed down stylesheet         ...
Mobile StylesheetSunday, April 10, 2011
Accessibility     isn’t something     you can tack on        at the end!Sunday, April 10, 2011
Think about it             from the start.Sunday, April 10, 2011
Accessibility Resources          ★ http://webaim.org          ★ http://diveintoaccessibility.org/          ★ http://juicys...
Russell Heimlich          ★ @kingkool68          ★ http://www.russellheimlich.com/blog/Sunday, April 10, 2011
The End                         http://slidesha.re/kingkool68Sunday, April 10, 2011
Upcoming SlideShare
Loading in …5
×

Accessibility Lightning Talk

Practical tips to make a website more accessible to different devices, technologies, and interactions. Presented April 12, 2011 for the WordPress DC Meetup.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to comment

Accessibility Lightning Talk

  1. 1. Accessibility Lightning TalkSunday, April 10, 2011
  2. 2. When you hear ‘accessibility’ what comes to mind?Sunday, April 10, 2011
  3. 3. Do you think of this?Sunday, April 10, 2011
  4. 4. ...or this?Sunday, April 10, 2011
  5. 5. Have you thought about this?Sunday, April 10, 2011
  6. 6. or this?Sunday, April 10, 2011
  7. 7. or even this?Sunday, April 10, 2011
  8. 8. Accessibility is not about people with disabilities.Sunday, April 10, 2011
  9. 9. Accessibility is about people!Sunday, April 10, 2011
  10. 10. Accessibility encompasses...Sunday, April 10, 2011
  11. 11. Different Devices ★ Desktop Computer ★ Mobile ★ In Between (iPad, Netbooks) ★ TV’sSunday, April 10, 2011
  12. 12. Different Interactions ★ Mouse ★ Keyboard ★ Touchscreen ★ ScreenreaderSunday, April 10, 2011
  13. 13. Different Technologies ★ JavaScript ★ CSS ★ Images display: none;Sunday, April 10, 2011
  14. 14. Tips For Better AccessibilitySunday, April 10, 2011
  15. 15. Use The Right Element For The Job <p> = paragraph <h1>-<h6> = Heading 1 through 6 <div class=”paragraph”> Using Tables for LayoutSunday, April 10, 2011
  16. 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 AsideSunday, April 10, 2011
  17. 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. 18. Associate Inputs with Labels ★ Link descriptive text with an input field ★ Provides context about what is expected ★ Clicking label puts cursor in input fieldSunday, April 10, 2011
  19. 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. 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. 21. Type=“search” Has Slight BenefitsSunday, April 10, 2011
  22. 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. 23. <input type=”number”>Sunday, April 10, 2011
  24. 24. <input type=”url”>Sunday, April 10, 2011
  25. 25. <input type=”email”>Sunday, April 10, 2011
  26. 26. Turn On Keyboard Navigation In OS X System Preferences -> Keyboard -> All ControlsSunday, April 10, 2011
  27. 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. 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. 29. Example of Bad Keyboard Accessibility ★ http://www.hd-live.co.uk/Sunday, April 10, 2011
  30. 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. 31. Revealing Hidden Content /* Reveal on Focus */ .hidden:focus { position:static; }Sunday, April 10, 2011
  32. 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 focusSunday, April 10, 2011
  33. 33. Skip Navigation Link <body> <a id="top" href="#content"> Skip to Content</a>Sunday, April 10, 2011
  34. 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. 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” role=”banner”>Sunday, April 10, 2011
  36. 36. role=”article” ★ 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. 37. role=”banner” ★ Site-orientated content, such as the title of the page and the logo. ★ HeaderSunday, April 10, 2011
  38. 38. role=”complementary” ★ Supporting content for the main content, but meaningful in its own right when separated from the main content. ★ Aside or sidebarSunday, April 10, 2011
  39. 39. role=”contentinfo” ★ Child content, such as footnotes, copyrights, links to privacy statement, links to preferences, and so on. ★ FooterSunday, April 10, 2011
  40. 40. role=”main” ★ Content that is directly related to or expands on the central content of the document. ★ Main content container, #contentSunday, April 10, 2011
  41. 41. role=”navigation” ★ Content that contains the links to navigate this document and/or related documents.Sunday, April 10, 2011
  42. 42. role=”search” ★ This section contains a search form to search the site.Sunday, April 10, 2011
  43. 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. 44. Mobile StylesheetSunday, April 10, 2011
  45. 45. Accessibility isn’t something you can tack on at the end!Sunday, April 10, 2011
  46. 46. Think about it from the start.Sunday, April 10, 2011
  47. 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. 48. Russell Heimlich ★ @kingkool68 ★ http://www.russellheimlich.com/blog/Sunday, April 10, 2011
  49. 49. The End http://slidesha.re/kingkool68Sunday, April 10, 2011

×