Jonathan Whiting - Ten things you can start doing today that will make your website more accessible

875 views

Published on

Presented by Jonathan Whiting, MS on September 27, 2013 at the fourth annual Center for Health Literacy Conference: Plain Talk in Complex Times.

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
875
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • http://webaim.org/presentations/2012/csun/at-experiment/dragon
  • Don’t do “click here either”
  • Go to amazonRollover menuSelect itemstars
  • How can we make this accessible?
  • These are poor colors (especially for a PPT).
  • If you had to replace the image with text.
  • Jonathan Whiting - Ten things you can start doing today that will make your website more accessible

    1. 1. 10 things you can do today to make your content more accessible Jonathan Whiting WebAIM.org
    2. 2. Auditory Disabilities From webaim.org/intro/
    3. 3. 1. Provide Captions
    4. 4. Search for captioned videos
    5. 5. Speech Recognition
    6. 6. 2. Make Links Meaningful
    7. 7. For more information on this topic, read Essentials of Online Course Design: A Standards- Based Guide http://www.amazon.com/Essentials-Online- Course-Design-Standards- Based/dp/0415873002/ref=sr_1_11?s=books&i e=UTF8&qid=1329661475&sr=1-11
    8. 8. Low Vision NoCoffee Vision Simulator (Chrome)
    9. 9. 3. Provide Plenty of Contrast
    10. 10. 3. Provide Plenty of Contrast
    11. 11. Color Blindness `
    12. 12. 4. Don’t Rely on Color
    13. 13. Color Blindness The green mushrooms listed here are okay to eat. The red mushrooms will kill you. – Amanita – Chanterelle – Porcini – Shitake – Tylopilus
    14. 14. Color Blindness The green mushrooms listed here are okay to eat. The red mushrooms will kill you. – Amanita – Chanterelle – Porcini – Shitake – Tylopilus
    15. 15. Color combinations don’t matter (for accessibility) …just contrast and color reliance
    16. 16. Blindness
    17. 17. Screen Reader User Surveys
    18. 18. 5. Use Headings
    19. 19. Headings The Wrong way to do headings: • HTML- <p class=“heading2”>Big text (usually) resized with CSS</p> • PPT and MS Word- Plain text enlarged The Right way to do headings: • HTML- <h2>Use true headings</h2> • PPT- Use slide templates • Word- Use styles panel
    20. 20. 6. Add Alternative Text
    21. 21. Alternative Text • Read by screen readers • Alternative to images when images are disabled or not supported • Provides semantic meaning and description to images • Used by search engines
    22. 22. What is equivalent alternative text? CONTENT and FUNCTION VERY RARELY Description
    23. 23. If you couldn’t use a picture, what text would you put in its place?
    24. 24. 7. Give documents unique titles
    25. 25. Page titles • Often the first thing read • Should be succinct and descriptive • Should usually match or be similar to the main heading
    26. 26. is blind ...and deaf ...and can’t use a mouse
    27. 27. 8. Don’t ‘Print’ to PDF
    28. 28. …‘Save’ to PDF • Works in: – MS Office for Windows (not Mac) – Adobe InDesign – OpenOffice.org • Does not work in: – Google Docs – Apple iWork • Can also create PDF in Adobe Acrobat
    29. 29. Preferred Formats for Web Content HTML > PDF > Doc/PPT > Anything else ...except PPT slides, then PDF is usually better
    30. 30. 9. Check your Web Pages
    31. 31. 2 Easy Tools 1. WAVE tool - wave.webaim.org 1. Red icons = accessibility problems 2. ‘Styles’ and ‘No Styles’ view 3. Contrast checker 2. Your keyboard – Tab, Shift + Tab (tweaking required on Mac) – Check forms – Open/close boxes
    32. 32. 10. Become an Advocate
    33. 33. Become an Advocate • Take responsibility for your content • Know your limits and seek help when needed • Ask others about accessibility • Congratulate others (and yourself) for making a difference
    34. 34. Thank You! http://webaim.org • Web based forums • E-mail discussion list • Tutorials, articles, and resources • Blog • Accessibility Reference Guide

    ×