Your SlideShare is downloading. ×
Improving Your Website's Accessibility
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Improving Your Website's Accessibility

494
views

Published on

LSNTAP/Idealware webinar of 12 June 2013

LSNTAP/Idealware webinar of 12 June 2013

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
494
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Improving Your Website’s AccessibilityJune 2013
  • 2. Introductions…Laura QuinnExecutive DirectorIdealwareRachel MagarioAssistive Technology SpecialistPACER Centers SimonTechnology Center
  • 3. Who Are You Excluding By NotMaking Your Website Accessible?
  • 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. It Should Be Accessible to Those Who…• Are color blind• Can’t see well
  • 6. It Should Be Accessible to Those Who…• Have difficultyusing their hands• Are deaf
  • 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. 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. Six Steps to anAccessible Website
  • 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. 1Make Your Text Itself Accessible
  • 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. SummarizeSummarizing information at the beginning of sections andparagraphs helps everyone – especially those on a screen reader.http://www.ptla.org
  • 14. Consider Reading LevelRefrain from using high levellegal language on generalpages. Consider adding aglossary, or frequentlyasked questions page.
  • 15. Translatable ContentConsider providingopportunities for users tochange their language.http://www.lawhelp.org
  • 16. 2Provide Alternative to Images
  • 17. Don’t Make People Rely on Images AloneIf images convey important information, provide analternative for people who may have difficulty seeing.
  • 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. 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. Don’t Rely on ScreenshotsFor instance, an annotated filing form
  • 21. Don’t Rely on IconsVisually impaired peoplemay be unable to seethem, and non U.S.natives may be unable tounderstand them.
  • 22. 3Make Text High Contrast and Legible
  • 23. Color ChoiceKeep text a dark color on a white background.
  • 24. Make Sure Font Size is LegibleLarger than 10 ptfont, in general.
  • 25. Allow People to Make it BiggerConsider adding an easily visible text enlargementtool to the top of your website.
  • 26. Remember the Color BlindAs it appears on GoogleSimulated view of whatthe color blind would see
  • 27. 4Accommodate Screen Readers
  • 28. Think About the Order of ContentMake sure that the physical order is the same as the visual order.
  • 29. Avoid Javascript MenusAvoid complicated Javascript menus.
  • 30. Use Standard HTML HeadersUse standard <h1> and<h2> tags rather thancreating your own styles
  • 31. Use Descriptive Link TextScreen Readers allow users to skip from linkto link, but without context they’re useless.
  • 32. Consider “Skip Navigation”Consider a “Skip Nav” link to let those using screenreaders or keyboards can skip to the content they want.
  • 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. 5 Design for Those Who Aren’tUsing a Mouse
  • 35. Many People Don’t Use a MouseIncluding those usingscreen readers, thosewith mobility issues,and just those whoprefer the keyboard.
  • 36. List of LinksA list of links can be a usefulnavigational shortcut for thoseon a keyboard or screenreader.Provide alternative links toimage maps.
  • 37. Support Keyboard Shortcuts
  • 38. Think About Tab Order of FormsDoes the order of forms makelogical sense when jumping frombox to box with the tab key?
  • 39. 6Code Pages According to Standards
  • 40. Don’t Break Browser DefaultsBrowsers will, in general, automatically support tools like screenreaders, and navigation by keyboard.
  • 41. Use Standard HTML to Create LinksBe cautious of Javascript dropdowns that select without clicking.
  • 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. Use Tables and Lists ThoughtfullyDon’t force things into them for the sake of layout.
  • 44. Tools for Testing Web Accessibility
  • 45. WAVE
  • 46. Firefox Accessibility Extension
  • 47. WebAIM Screen Reader Simulationhttp://webaim.org/simulations/screenreader-sim.htm
  • 48. Vischeck
  • 49. W3C and 508 Compliance
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. What Changes Will You Make?• Text• Images• Video• Icons• Forms• Navigation
  • 60. Let Everyone Benefit From Your Services• Are color blind• Can’t see well
  • 61. Questions?

×