LSNTAP/Idealware webinar of 12 June 2013

1. Improving Your Website’s Accessibility
June 2013

3. Introductions…
Laura Quinn
Executive Director
Idealware
Rachel Magario
Assistive Technology Specialist
PACER Center's Simon
Technology Center

4. Who Are You Excluding By Not
Making Your Website Accessible?

5. Why Worry About Accessibility?
If we want to provide equal access to justice
Shouldn’t we ensure that we can provide information to everyone?

6. It Should Be Accessible to Those Who…
• Are color blind
• Can’t see well

7. It Should Be Accessible to Those Who…
• Have difficulty
using their hands
• Are deaf

8. It Should Be Accessible to Those Who…
• Don’t speak English well
• Are not familiar with US
or technology norms
• Don’t have a fast
internet speed
• Are not very familiar
with technology

9. These People See the Web Differently
They may need to rely on
screen readers, or keyboard
shortcuts, or view a page very
close up or without any sound.

10. Six Steps to an
Accessible Website

11. Six Steps to an Accessible Website
1. Make Your Text Itself Accessible
2. Provide Alternative to Images
3. Make Text High Contrast and Legible
4. Accommodate Screen Readers
5. Design for Those Who Aren’t Using a Mouse
6. Code Pages According to Standards

12. 1Make Your Text Itself Accessible

13. 1. Create Scanable Chucks
Splitting up text into scanable chunks is good for those who may
have difficulty seeing, as well as those who aren’t very literate,
aren’t technologically literate, or don’t speak English well.

14. Summarize
Summarizing information at the beginning of sections and
paragraphs helps everyone – especially those on a screen reader.
http://www.ptla.org

15. Consider Reading Level
Refrain from using high level
legal language on general
pages. Consider adding a
glossary, or frequently
asked questions page.

16. Translatable Content
Consider providing
opportunities for users to
change their language.
http://www.lawhelp.org

17. 2Provide Alternative to Images

18. Don’t Make People Rely on Images Alone
If images convey important information, provide an
alternative for people who may have difficulty seeing.

19. Or Video Alone
Informative images and
videos can be helpful for
those who may be unable to
read, but balance that with
accessibility to those who
can’t see and/or hear well.
Captions can bridge the gap.

20. Alt Text
Alt text is useful for those using screen readers, as well as those with
visual impairments who may have trouble seeing details in images.

21. Don’t Rely on Screenshots
For instance, an annotated filing form

22. Don’t Rely on Icons
Visually impaired people
may be unable to see
them, and non U.S.
natives may be unable to
understand them.

23. 3Make Text High Contrast and Legible

24. Color Choice
Keep text a dark color on a white background.

25. Make Sure Font Size is Legible
Larger than 10 pt
font, in general.

26. Allow People to Make it Bigger
Consider adding an easily visible text enlargement
tool to the top of your website.

27. Remember the Color Blind
As it appears on Google
Simulated view of what
the color blind would see

28. 4Accommodate Screen Readers

29. Think About the Order of Content
Make sure that the physical order is the same as the visual order.

30. Avoid Javascript Menus
Avoid complicated Javascript menus.

31. Use Standard HTML Headers
Use standard <h1> and
<h2> tags rather than
creating your own styles

32. Use Descriptive Link Text
Screen Readers allow users to skip from link
to link, but without context they’re useless.

33. Consider “Skip Navigation”
Consider a “Skip Nav” link to let those using screen
readers or keyboards can skip to the content they want.

34. Avoid Headers in All Caps
Screen readers will emphasize things that are in caps, and
sometimes mistake them for acronyms that should be spelled out.

35. 5 Design for Those Who Aren’t
Using a Mouse

36. Many People Don’t Use a Mouse
Including those using
screen readers, those
with mobility issues,
and just those who
prefer the keyboard.

37. List of Links
A list of links can be a useful
navigational shortcut for those
on a keyboard or screenreader.
Provide alternative links to
image maps.

38. Support Keyboard Shortcuts

39. Think About Tab Order of Forms
Does the order of forms make
logical sense when jumping from
box to box with the tab key?

40. 6Code Pages According to Standards

41. Don’t Break Browser Defaults
Browsers will, in general, automatically support tools like screen
readers, and navigation by keyboard.

42. Use Standard HTML to Create Links
Be cautious of Javascript dropdowns that select without clicking.

43. Don’t Rely on Fancy Stuff to Provide Content
The content of your site
should be legible even if
you turn your style sheets,
scripts, applets, or all other
programmatic objects.

44. Use Tables and Lists Thoughtfully
Don’t force things into them for the sake of layout.

45. Tools for Testing Web Accessibility

46. WAVE

47. Firefox Accessibility Extension

48. WebAIM Screen Reader Simulation
http://webaim.org/simulations/screenreader-sim.htm

49. Vischeck

50. W3C and 508 Compliance

51. What Does 508 Compliance Mean?
Section 508 of the Rehabilitation Act of 1973 requires that Federal
agencies' electronic and information technology is accessible to
people with disabilities. Section 508 provides remedies to those
aggrieved by violations of this requirement, which, after
administrative remedies are exhausted, allow for both private
rights of action in court and for reasonable attorneys fees.

52. What Does W3C Compliance Mean?
These guidelines, developed by the World Wide Web
Consortium, explain how to make Web content accessible to
people with disabilities. The guidelines are intended for all Web
content developers (page authors and site designers) and for
developers of authoring tools.

53. 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 their
primary difference lies in the fact that W3C Compliance is not
required by any institution, but is rather an optional set of best
practices for web accessibility.
We’ll cover 508 compliance primarily.

54. Visual Elements
• Provide a text alternative for
every non-text element of
your website.
• Videos and animation should
have accompanying captions
or auditory descriptions of the
visual track.
• All information that is
conveyed with color should
also be clear without color

55. Interactive Elements
• Label all form controls
properly, and make their
functionality is accessible for
those using assistive
technologies.
• Allow users to skip repetitive
navigation.
• If a timed response is
required, give the user
sufficient time to indicate
when more time is needed.

56. Technical Elements
• Use markup to associate data
cells with data headers.
• Facilitate frame navigation and
identification with text
• Provide alternative links to
image maps.
• Sites should not cause the
screen to flicker at a frequency
greater than 2 Hz and lower
than 55 Hz

57. Ensure Content Is Always Legible
• Your site must be legible when style scripts, applets, or other
programmatic objects are turned off or not supported.
• Downloads for applicable applets or plug-ins should be provided.

58. The Catch-All
A text-only page, with equivalent information or functionality,
shall be provided to make a web site comply with the provisions
of this part, when compliance cannot be accomplished in any
other way. The content of the text-only page shall be updated
whenever the primary page changes.

59. Balance Legal vs. Human Requirements
For example, should you spend time making complicated
navigation more accessible, or simply offer an alternative page,
or a skip navigation link?

60. What Changes Will You Make?
• Text
• Images
• Video
• Icons
• Forms
• Navigation

61. Let Everyone Benefit From Your Services
• Are color blind
• Can’t see well

62. Questions?