Improving Your Website's Accessibility


Published on

LSNTAP/Idealware webinar of 12 June 2013

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Improving Your Website's Accessibility

  1. 1. Improving Your Website’s AccessibilityJune 2013
  2. 2. Introductions…Laura QuinnExecutive DirectorIdealwareRachel MagarioAssistive Technology SpecialistPACER Centers SimonTechnology Center
  3. 3. Who Are You Excluding By NotMaking Your Website Accessible?
  4. 4. Why Worry About Accessibility?If we want to provide equal access to justiceShouldn’t we ensure that we can provide information to everyone?
  5. 5. It Should Be Accessible to Those Who…• Are color blind• Can’t see well
  6. 6. It Should Be Accessible to Those Who…• Have difficultyusing their hands• Are deaf
  7. 7. It Should Be Accessible to Those Who…• Don’t speak English well• Are not familiar with USor technology norms• Don’t have a fastinternet speed• Are not very familiarwith technology
  8. 8. These People See the Web DifferentlyThey may need to rely onscreen readers, or keyboardshortcuts, or view a page veryclose up or without any sound.
  9. 9. Six Steps to anAccessible Website
  10. 10. Six Steps to an Accessible Website1. Make Your Text Itself Accessible2. Provide Alternative to Images3. Make Text High Contrast and Legible4. Accommodate Screen Readers5. Design for Those Who Aren’t Using a Mouse6. Code Pages According to Standards
  11. 11. 1Make Your Text Itself Accessible
  12. 12. 1. Create Scanable ChucksSplitting up text into scanable chunks is good for those who mayhave difficulty seeing, as well as those who aren’t very literate,aren’t technologically literate, or don’t speak English well.
  13. 13. SummarizeSummarizing information at the beginning of sections andparagraphs helps everyone – especially those on a screen reader.
  14. 14. Consider Reading LevelRefrain from using high levellegal language on generalpages. Consider adding aglossary, or frequentlyasked questions page.
  15. 15. Translatable ContentConsider providingopportunities for users tochange their language.
  16. 16. 2Provide Alternative to Images
  17. 17. Don’t Make People Rely on Images AloneIf images convey important information, provide analternative for people who may have difficulty seeing.
  18. 18. Or Video AloneInformative images andvideos can be helpful forthose who may be unable toread, but balance that withaccessibility to those whocan’t see and/or hear well.Captions can bridge the gap.
  19. 19. Alt TextAlt text is useful for those using screen readers, as well as those withvisual impairments who may have trouble seeing details in images.
  20. 20. Don’t Rely on ScreenshotsFor instance, an annotated filing form
  21. 21. Don’t Rely on IconsVisually impaired peoplemay be unable to seethem, and non U.S.natives may be unable tounderstand them.
  22. 22. 3Make Text High Contrast and Legible
  23. 23. Color ChoiceKeep text a dark color on a white background.
  24. 24. Make Sure Font Size is LegibleLarger than 10 ptfont, in general.
  25. 25. Allow People to Make it BiggerConsider adding an easily visible text enlargementtool to the top of your website.
  26. 26. Remember the Color BlindAs it appears on GoogleSimulated view of whatthe color blind would see
  27. 27. 4Accommodate Screen Readers
  28. 28. Think About the Order of ContentMake sure that the physical order is the same as the visual order.
  29. 29. Avoid Javascript MenusAvoid complicated Javascript menus.
  30. 30. Use Standard HTML HeadersUse standard <h1> and<h2> tags rather thancreating your own styles
  31. 31. Use Descriptive Link TextScreen Readers allow users to skip from linkto link, but without context they’re useless.
  32. 32. Consider “Skip Navigation”Consider a “Skip Nav” link to let those using screenreaders or keyboards can skip to the content they want.
  33. 33. Avoid Headers in All CapsScreen readers will emphasize things that are in caps, andsometimes mistake them for acronyms that should be spelled out.
  34. 34. 5 Design for Those Who Aren’tUsing a Mouse
  35. 35. Many People Don’t Use a MouseIncluding those usingscreen readers, thosewith mobility issues,and just those whoprefer the keyboard.
  36. 36. List of LinksA list of links can be a usefulnavigational shortcut for thoseon a keyboard or screenreader.Provide alternative links toimage maps.
  37. 37. Support Keyboard Shortcuts
  38. 38. Think About Tab Order of FormsDoes the order of forms makelogical sense when jumping frombox to box with the tab key?
  39. 39. 6Code Pages According to Standards
  40. 40. Don’t Break Browser DefaultsBrowsers will, in general, automatically support tools like screenreaders, and navigation by keyboard.
  41. 41. Use Standard HTML to Create LinksBe cautious of Javascript dropdowns that select without clicking.
  42. 42. Don’t Rely on Fancy Stuff to Provide ContentThe content of your siteshould be legible even ifyou turn your style sheets,scripts, applets, or all otherprogrammatic objects.
  43. 43. Use Tables and Lists ThoughtfullyDon’t force things into them for the sake of layout.
  44. 44. Tools for Testing Web Accessibility
  45. 45. WAVE
  46. 46. Firefox Accessibility Extension
  47. 47. WebAIM Screen Reader Simulation
  48. 48. Vischeck
  49. 49. W3C and 508 Compliance
  50. 50. What Does 508 Compliance Mean?Section 508 of the Rehabilitation Act of 1973 requires that Federalagencies electronic and information technology is accessible topeople with disabilities. Section 508 provides remedies to thoseaggrieved by violations of this requirement, which, afteradministrative remedies are exhausted, allow for both privaterights of action in court and for reasonable attorneys fees.
  51. 51. What Does W3C Compliance Mean?These guidelines, developed by the World Wide WebConsortium, explain how to make Web content accessible topeople with disabilities. The guidelines are intended for all Webcontent developers (page authors and site designers) and fordevelopers of authoring tools.
  52. 52. The Standards (in Simple Terms)The requirements for both W3C and 508 Compliance are similar.Occasionally, one has more strict rules than the other, but theirprimary difference lies in the fact that W3C Compliance is notrequired by any institution, but is rather an optional set of bestpractices for web accessibility.We’ll cover 508 compliance primarily.
  53. 53. Visual Elements• Provide a text alternative forevery non-text element ofyour website.• Videos and animation shouldhave accompanying captionsor auditory descriptions of thevisual track.• All information that isconveyed with color shouldalso be clear without color
  54. 54. Interactive Elements• Label all form controlsproperly, and make theirfunctionality is accessible forthose using assistivetechnologies.• Allow users to skip repetitivenavigation.• If a timed response isrequired, give the usersufficient time to indicatewhen more time is needed.
  55. 55. Technical Elements• Use markup to associate datacells with data headers.• Facilitate frame navigation andidentification with text• Provide alternative links toimage maps.• Sites should not cause thescreen to flicker at a frequencygreater than 2 Hz and lowerthan 55 Hz
  56. 56. Ensure Content Is Always Legible• Your site must be legible when style scripts, applets, or otherprogrammatic objects are turned off or not supported.• Downloads for applicable applets or plug-ins should be provided.
  57. 57. The Catch-AllA text-only page, with equivalent information or functionality,shall be provided to make a web site comply with the provisionsof this part, when compliance cannot be accomplished in anyother way. The content of the text-only page shall be updatedwhenever the primary page changes.
  58. 58. Balance Legal vs. Human RequirementsFor example, should you spend time making complicatednavigation more accessible, or simply offer an alternative page,or a skip navigation link?
  59. 59. What Changes Will You Make?• Text• Images• Video• Icons• Forms• Navigation
  60. 60. Let Everyone Benefit From Your Services• Are color blind• Can’t see well
  61. 61. Questions?