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.

FUD-Free Accessibility for Web Developers - Also, Cake.

3,046 views

Published on

Published in: Business, Technology
  • Shared it, also...GROW YOU DOWNLINE OVERNIGHT - Works with any mlm. Have dozens joining whatever mlm your doing today! Go to: www.mlmrc.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

FUD-Free Accessibility for Web Developers - Also, Cake.

  1. 1. FUD-free Accessibility for Web Developers Also, cake.Brian P. Hogantwitter: @bphoganwww.bphogan.com
  2. 2. about me I write books I build things I teach peopleBrian P. Hogantwitter: @bphoganwww.bphogan.com
  3. 3. What is Accessibility?Brian P. Hogantwitter: @bphoganwww.bphogan.com
  4. 4. We often think of Blind people Low vision or colorblind people Deaf people Physically impaired people Cognitively impaired peopleBrian P. Hogantwitter: @bphoganwww.bphogan.com
  5. 5. We often think of Blind people Low vision or colorblind people Deaf people Physically impaired people Cognitively impaired peopleBrian P. Hogantwitter: @bphoganwww.bphogan.com
  6. 6. But thats too narrow People on small screens People without Flash People without JavaScript People on slow connections People on limited connectionsBrian P. Hogantwitter: @bphoganwww.bphogan.com
  7. 7. Making things available toBrian P. Hogantwitter: @bphoganwww.bphogan.com
  8. 8. Accessibility isn’t expensive...Brian P. Hogantwitter: @bphoganwww.bphogan.com
  9. 9. as long as you plan from the start.Brian P. Hogantwitter: @bphoganwww.bphogan.com
  10. 10. We need to understand peoples accessibility issuesBrian P. Hogantwitter: @bphoganwww.bphogan.com
  11. 11. Dont underestimate peoples abilitiesBrian P. Hogantwitter: @bphoganwww.bphogan.com
  12. 12. Empathize, not sympathizeBrian P. Hogantwitter: @bphoganwww.bphogan.com
  13. 13. BlindnessBrian P. Hogantwitter: @bphoganwww.bphogan.com
  14. 14. Screen Readers http://webanywhere.cs.washington.edu/ beta/Brian P. Hogantwitter: @bphoganwww.bphogan.com
  15. 15. They rely on annotated videos or alternative contentBrian P. Hogantwitter: @bphoganwww.bphogan.com
  16. 16. Supporting Blind People Ensure you have no spelling errors Ensure your popup windows dont result in dead-ends for screenreaders Remove dependencies on JavaScript Provide keyboard navigationBrian P. Hogantwitter: @bphoganwww.bphogan.com
  17. 17. Low VisionBrian P. Hogantwitter: @bphoganwww.bphogan.com
  18. 18. Screen magnificationBrian P. Hogantwitter: @bphoganwww.bphogan.com
  19. 19. High contrast modeBrian P. Hogantwitter: @bphoganwww.bphogan.com
  20. 20. Supporting Low Vision Be aware of issues with contrast Dont 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 clickedBrian P. Hogantwitter: @bphoganwww.bphogan.com
  21. 21. ColorblindnessBrian P. Hogantwitter: @bphoganwww.bphogan.com
  22. 22. ProtanopiaBrian P. Hogantwitter: @bphoganwww.bphogan.com
  23. 23. DeuteranopiaBrian P. Hogantwitter: @bphoganwww.bphogan.com
  24. 24. TritanopiaBrian P. Hogantwitter: @bphoganwww.bphogan.com
  25. 25. Supporting Colorblindness Dont use color as the only method to draw attention to elements Be aware of contrast issues Dont instruct users to identify things by colorBrian P. Hogantwitter: @bphoganwww.bphogan.com
  26. 26. Hearing ImpairmentsBrian P. Hogantwitter: @bphoganwww.bphogan.com
  27. 27. Videos need good transcriptsBrian P. Hogantwitter: @bphoganwww.bphogan.com
  28. 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. Hogantwitter: @bphoganwww.bphogan.com
  29. 29. People with physical impairmentsBrian P. Hogantwitter: @bphoganwww.bphogan.com
  30. 30. Brian P. Hogantwitter: @bphoganwww.bphogan.com
  31. 31. They navigate with head wands and tubesBrian P. Hogantwitter: @bphoganwww.bphogan.com
  32. 32. They need to easily identify and click interface elementsBrian P. Hogantwitter: @bphoganwww.bphogan.com
  33. 33. Just like someone on a tablet!Brian P. Hogantwitter: @bphoganwww.bphogan.com
  34. 34. Supporting the Physically Impaired Ensure click targets are large enough to be easily accessed Ensure click targets are easily identified.Brian P. Hogantwitter: @bphoganwww.bphogan.com
  35. 35. Cognitive Impairments and Learning DisabilitiesBrian P. Hogantwitter: @bphoganwww.bphogan.com
  36. 36. Brian P. Hogantwitter: @bphoganwww.bphogan.com
  37. 37. DyslexiaBrian P. Hogantwitter: @bphoganwww.bphogan.com
  38. 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 grammarBrian P. Hogantwitter: @bphoganwww.bphogan.com
  39. 39. Coding For Accessibility is Coding For UsabilityBrian P. Hogantwitter: @bphoganwww.bphogan.com
  40. 40. Progressive EnhancementBrian P. Hogantwitter: @bphoganwww.bphogan.com
  41. 41. CakeBrian P. Hogantwitter: @bphoganwww.bphogan.com
  42. 42. You should progressively enhanceBrian P. Hogantwitter: @bphoganwww.bphogan.com
  43. 43. Your applications should degrade gracefullyBrian P. Hogantwitter: @bphoganwww.bphogan.com
  44. 44. Crafting Accessible FormsBrian P. Hogantwitter: @bphoganwww.bphogan.com
  45. 45. Use labels Especially for radio buttonsBrian P. Hogantwitter: @bphoganwww.bphogan.com
  46. 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. Hogantwitter: @bphoganwww.bphogan.com
  47. 47. Avoid Tabindex unless absolutely necessaryBrian P. Hogantwitter: @bphoganwww.bphogan.com
  48. 48. AJAX FormsBrian P. Hogantwitter: @bphoganwww.bphogan.com
  49. 49. Accessible JavaScript solutions Build your app without JS first Use your own API! Dont add content with JavaScript use JS to show and hide it Separate Behavior from contentBrian P. Hogantwitter: @bphoganwww.bphogan.com
  50. 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. Hogantwitter: @bphoganwww.bphogan.com
  51. 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. Hogantwitter: @bphoganwww.bphogan.com
  52. 52. TablesBrian P. Hogantwitter: @bphoganwww.bphogan.com
  53. 53. Good tables Have table headers defined Have captions that explain their purposeBrian P. Hogantwitter: @bphoganwww.bphogan.com
  54. 54. Use <th> tags.Brian P. Hogantwitter: @bphoganwww.bphogan.com
  55. 55. Use header attributes when its ambiguousBrian P. Hogantwitter: @bphoganwww.bphogan.com
  56. 56. Tables can be OK for formsBrian P. Hogantwitter: @bphoganwww.bphogan.com
  57. 57. Popups and OverlaysBrian P. Hogantwitter: @bphoganwww.bphogan.com
  58. 58. Make them regular links <a href="http://google.com/" class="popup" data-height="400" data-width="400">Search Google</a>​​Brian P. Hogantwitter: @bphoganwww.bphogan.com
  59. 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. Hogantwitter: @bphoganwww.bphogan.com
  60. 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. Hogantwitter: @bphoganwww.bphogan.com
  61. 61. ARIA Accessible Rich Internet ApplicationsBrian P. Hogantwitter: @bphoganwww.bphogan.com
  62. 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. Hogantwitter: @bphoganwww.bphogan.com
  63. 63. ARIA-Roles banner navigation main document application complementary contentinfo search ... lots moreBrian P. Hogantwitter: @bphoganwww.bphogan.com
  64. 64. Use display:none with care!Brian P. Hogantwitter: @bphoganwww.bphogan.com
  65. 65. Static ContentBrian P. Hogantwitter: @bphoganwww.bphogan.com
  66. 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. Hogantwitter: @bphoganwww.bphogan.com
  67. 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. Hogantwitter: @bphoganwww.bphogan.com
  68. 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. Hogantwitter: @bphoganwww.bphogan.com
  69. 69. Testing AccessibilityBrian P. Hogantwitter: @bphoganwww.bphogan.com
  70. 70. First, does it validate?Brian P. Hogantwitter: @bphoganwww.bphogan.com
  71. 71. WCAG 2.0 http://www.w3.org/TR/WCAG/Brian P. Hogantwitter: @bphoganwww.bphogan.com
  72. 72. wave.webaim.orgBrian P. Hogantwitter: @bphoganwww.bphogan.com
  73. 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. Hogantwitter: @bphoganwww.bphogan.com
  74. 74. Color Oracle http://colororacle.cartography.ch/Brian P. Hogantwitter: @bphoganwww.bphogan.com
  75. 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 playedBrian P. Hogantwitter: @bphoganwww.bphogan.com
  76. 76. Perfect is the Enemy of Good. - Commonly attributed to VoltaireBrian P. Hogantwitter: @bphoganwww.bphogan.com
  77. 77. The world will be a better place.Brian P. Hogantwitter: @bphoganwww.bphogan.com
  78. 78. Thank you! http://spkr8.com/t/14841Brian P. Hogantwitter: @bphoganwww.bphogan.com

×