Successfully reported this slideshow.
Your SlideShare is downloading. ×

Web Accessibility Gone Wild (Now Even MORE Wilder!)


More Related Content


Web Accessibility Gone Wild (Now Even MORE Wilder!)

  1. Web Accessibility Gone Wilde v e n M!O R E w No wilder jared smith @jared_w_smith #webaccessgonewild SXSWi 2010
  2. mistakes, misconceptions, over- indulgences, minutia, and generally silly aspects of modern web accessibility ...or “how to FAIL at web accessibility”
  3. the mythical “accessible” web site does not exist
  4. accessibility is a continuum ...with many different paths
  5. web accessibility is about more than just blindness
  6. accessible sites don’t need to be ugly ...then why are many of them so hideous?
  7. WAI SECTION 508 A11Y PFWG EARL web accessibility has a branding issue DAISY UAAG WCAG ARIA it has devolved into speci cations, checklists and techniques
  8. compliance != accessibility use guidelines as tools to achieve accessibility
  9. your site can be fully compliant, yet totally inaccessible
  10. your site can be fully compliant and technically accessible, yet functionally inaccessible
  11. e most accessible site on Earth...
  12. •Home •Products •Support •Sales •Forum •Contact Us Hey, I’m the content!!!
  13. can you have too much accessibility?
  14. web accessibility preferences are for sissies?
  15. web accessibility can and should happen naturally
  16. FAIL!
  17. accessibility implemented partially or incorrectly can be worse than no accessibility at all
  18. which provides better accessibility?
  19. don’t make the disability relevant
  20. ...but understand that the experiences of those with disabilities will be different
  21. build one version of a web site that is fully accessible ...but provide an accessible alternative if you can’t make it accessible
  22. alternative text
  23. alternative text for images should present CONTENT and FUNCTION very rarely a description
  24. alt=”Jared Smith” WIN!
  25. alt=”strong, handsome man...”??? FAIL!
  26. • alt=”bullet” FAIL!
  27. alt=”bullet” WIN!
  28. alt=”image of my cat”
  29. adding “image of...”, “graphic of...” to alt text FAIL???
  30. browser visual rendering of alternative text FAIL!!!
  31. alt=”Photo of the Austin Convention Center”
  32. alt=”Photo of the Austin Convention Center” WIN! ...though “Photo of...” is not necessary for all photos
  33. alt=”smiling lady”???
  34. “I don’t want to miss out on any content” vs. “I’m listening to the page at 400 words per minute in a robotic computer voice - I don’t care about the mood and feel of the page.” focus on content and functionality
  35. images that are the only thing within a link MUST have alt text image buttons and hot spots too
  36. avoid redundant text <a href=””> <img src=”sxswlogo.png” alt=””><br> SXSW</a> alternative text doesn’t have to be in the alt attribute
  37. captcha
  38. captcha Completely Automated Patience Test to Confuse the Hell out of your Audience FAIL!
  39. spam prevention’re doing it wrong.
  40. accesskey and tabindex FAIL! ...unless you're sure you know what you're doing. learn the power of tabindex=”0” and tabindex=”-1”
  41. tabindex tabindex=”1+” Speci es exact tab order. Ensure tab order is complete, logical, and intuitive. Rarely needed. tabindex=”0” Places element in the default tab order. tabindex=”-1” Do not place element in tab order, but allow the element to programmatically receive focus.
  42. tabindex, focus(), and aria to the rescue!
  43. aria accessible rich internet applications
  44. ARIA paves the cow paths
  45. aria • gives or enhances semantics of non-semantic or other-semantic elements • landmark roles - de ne major functional areas of your page (search, navigation, main, etc.) • enhances keyboard accessibility for widgets and controls • ensures accessibility of dynamically updated content
  46. the tip of the aria iceberg more at
  47. visually hiding content • display:none and visibility:hidden hide from everyone... and that’s a good thing. • absolute position off-screen le with CSS for screen readers • use judiciously
  48. and usability V the native accessibility of your site is typically inversely proportional to the volume of instructional text required people with disabilities are very capable
  49. sighted users see: a screen reader user hears: “is is a text box where you enter your Passcode. With this text box focused you can begin typing your Passcode. Your Passcode ensures that your account remains secure. L! Passcodes must be between 8 and 20 characters and contain both numbers and letters. A I ey are also case sensitive, so be sure to capitalize the correct characters. Aer you type F your Passcode into this box, you can press tab to go to the LOGIN button. You probably set up a Passcode previously. We hope you remember it! If you have forgotten your Passcode, you should select the ‘Forgot Your Passcode?’ link which is at the bottom of this page.”
  50. “skip to main content” links Still? but it’s sooooo old school Yes! Until browsers provide better keyboard navigation for sighted users
  51. “skip to main content” links you can position them off-screen if you must, but make them clearly visible on :focus one “skip” link is typically sufficient
  52. NOT display:none a#skip { position:absolute; left:-5000px; top:0px; } a#skip:focus{ position:block; }
  53. removing focus indicators from links a { outline:0; } FAIL!
  54. enhancing focus indicators a:focus, a:hover { outline:1px; background-color:#ff0; text-decoration:underline; } WIN! non-underlined links should become underlined on hover and focus
  55. screen readers do javascript 10% of screen reader users had javascript disabled
  56. progressive enhancement vs. graceful degradation
  57. bullet-proof web design WIN!
  58. avoid “click here” it’s either ambiguous or indicative of poor visual design
  59. headings WIN! properly structured, one <h1> for document title, and never empty ... and other semantic structure
  60. title attribute • advisory information only • ignored by screen readers, except... • form elements missing labels • <frame title=”navigation”> • <acronym>/<abbr> ...usually.
  61. cognitive disabilities (not much happening here)
  62. cognitive load vs functionality
  63. odds and ends • Test in a screen reader. NVDA is open-source and free! • Provide accurate, descriptive, succinct page titles • Don’t stress over screen reader pronunciation and quirks. • Expand rst instance of acronyms and abbreviations. You don’t have to use <acronym>/<abbr> on all instances. Don’t use for well known terms. • Use < eldset> and <legend> for groups of radio buttons and checkboxes • Layout tables don’t (typically) affect accessibility
  65. make your sites models of beautiful, natural accessibility
  66. questions or comments? jared smith @jared_w_smith