Choose This, Not That:
Five Early Choices that can make
YOU an Accessibility Rockstar
Catharine McNally
August 14, 2013
Mo...
Experience Analyst
Email: cmcnally@phase2technology.com
Catharine McNally
Twitter: @cmcnally
Monday, August 19, 2013
We’re launching the site next week.
It has to be Section 508 compliant. Can
you test and verify?
Project Manager at [Compa...
Monday, August 19, 2013
Monday, August 19, 2013
More Details:
http://www.phase2technology.com/blog/accessibility-in-1-hour-improving-the-phase2-website/
Monday, August 19...
Oh $&%*!“ ”
Project Manager at [Company]
Joe Manager
Monday, August 19, 2013
I wish I knew this in the beginning!“ ”
Project Manager at [Company]
Joe Manager
Monday, August 19, 2013
5things to know
Monday, August 19, 2013
image rotators
are tough.1
Monday, August 19, 2013
close your eyes & listen to a rotator through a screenreader:
Monday, August 19, 2013
close your eyes & listen to a rotator through a screenreader:
Monday, August 19, 2013
color contrast
matters.2
Monday, August 19, 2013
Inside
Outside
Monday, August 19, 2013
navigation can be
really annoying.3
Monday, August 19, 2013
Monday, August 19, 2013
Monday, August 19, 2013
accessible media
helps everyone.4
Monday, August 19, 2013
like for when you forgot your headphones.
Monday, August 19, 2013
audio & visual
captcha is a strain.5
Monday, August 19, 2013
endless loop of frustration.
Comic written by Larry Lambert, illustrated by Jerry King
Monday, August 19, 2013
want to become an
accessibility ninja?
Monday, August 19, 2013
1. Image Rotators
Choose This:
alternate ways to
convey messaging
Monday, August 19, 2013
consider:
different approaches.
Monday, August 19, 2013
consider:
different approaches.
Monday, August 19, 2013
Monday, August 19, 2013
If you have to use a rotator...
* Turn off automated rotating feature.
* Ensure you have pause on hover enabled.
* Add the...
Choose This:
high color contrast
2. Site Theme / Design
Monday, August 19, 2013
Color Contrast: Why it Matters.
Monday, August 19, 2013
Monday, August 19, 2013
Monday, August 19, 2013
Color Contrast: Tools.
More Details:
http://www.phase2technology.com/blog/color-contrast-for-accessibility-benefits-your-m...
Color Contrast: Tools.
More Details:
http://www.phase2technology.com/blog/color-contrast-for-accessibility-benefits-your-m...
Color Contrast: Tools.
More Details:
http://www.phase2technology.com/blog/color-contrast-for-accessibility-benefits-your-m...
Choose This:
skip-links and landmarks
3. Site Navigation
Monday, August 19, 2013
Skip-Links Module on Drupal.org
Module on Drupal.org https://drupal.org/project/accessible_skip_links
Monday, August 19, 2...
Skip-Links Module on Drupal.org
Module on Drupal.org https://drupal.org/project/accessible_skip_links
Monday, August 19, 2...
Another way to “Skip Around:” Landmarks
Monday, August 19, 2013
Another way to “Skip Around:” Landmarks
Monday, August 19, 2013
Banner
Another way to “Skip Around:” Landmarks
Monday, August 19, 2013
NavigationBanner
Another way to “Skip Around:” Landmarks
Monday, August 19, 2013
Navigation
Main Content
Banner
Another way to “Skip Around:” Landmarks
Monday, August 19, 2013
Navigation
Main Content
Complementary
Banner
Another way to “Skip Around:” Landmarks
Monday, August 19, 2013
content area landmark markup
page header; logo, <header	
  role	
  =	
  “banner”>
navigational links <nav	
  role	
  =	
  ...
Choose This:
contextually
relevant links
3. Navigation, continued.
Monday, August 19, 2013
Monday, August 19, 2013
Read More...what?
Monday, August 19, 2013
Read More...what?
Read This Post
better because it gives context to type of content.
Monday, August 19, 2013
Read More...what?
Read This Post
better because it gives context to type of content.
Continue Reading [Title]
full underst...
Contextually Relevant Read More
$node->content['accessible_read_more'] = array(
'#markup' => l(t('Read Full !type', array(...
Contextually Relevant Read More
$node->content['accessible_read_more'] = array(
'#markup' => l(t('Read Full !type', array(...
W3C Recommendations
Write the contextually relevant text (i.e, title) in the anchor.
Here’s an example:
<a href="#">
<span...
nice menus
Module on Drupal.org: https://drupal.org/project/nice_menus
Monday, August 19, 2013
nice menus
Module on Drupal.org: https://drupal.org/project/nice_menus
Monday, August 19, 2013
Choose This:
video players & image
uploads that support
captions & alt-text
4. Media
Monday, August 19, 2013
image accessibility:
supporting alt text
ensure that media uploads
have alt text field.
media module on Drupal has this:
h...
image accessibility:
authoring alt text
More Details:More Details:
Monday, August 19, 2013
image accessibility:
authoring alt text
Torn-down house
from a tornado
More Details:More Details:
Monday, August 19, 2013
image accessibility:
authoring alt text
Torn-down house
from a tornado
Forlorn children stare at the
rubble that was once ...
image accessibility:
authoring alt text
Torn-down house
from a tornado
Forlorn children stare at the
rubble that was once ...
image accessibility:
authoring alt text
1. KISS.
Keep It Simple.
Torn-down house
from a tornado
Forlorn children stare at ...
image accessibility:
authoring alt text
1. KISS.
Keep It Simple.
2. Short.
Think of it like a Tweet.
Torn-down house
from ...
image accessibility:
authoring alt text
1. KISS.
Keep It Simple.
2. Short.
Think of it like a Tweet.
Torn-down house
from ...
video accessibility:
adding caption tracks
1. Use a video player that supports
upload of caption tracks:
YouTube
Resource:...
video accessibility:
adding caption tracks
1. Use a video player that supports
upload of caption tracks:
YouTube
Resource:...
Universal Subtitles
http://universalsubtitles.org/
Monday, August 19, 2013
Universal Subtitles
http://universalsubtitles.org/
Monday, August 19, 2013
Universal Subtitles
http://universalsubtitles.org/
Monday, August 19, 2013
video accessibility:
adding caption tracks
2. Use native video player and add captions
Video CC Format
HTML5 WebVTT
JWPlay...
Choose This:
logic questions
5. CAPTCHA
Monday, August 19, 2013
i’m smarter than a 5th grader.
text captchas
Module on Drupal.org: https://drupal.org/project/textcaptcha
Monday, August 1...
i’m smarter than a 5th grader.
text captchas
Module on Drupal.org: https://drupal.org/project/textcaptcha
Monday, August 1...
i’m smarter than a 5th grader.
text captchas
Module on Drupal.org: https://drupal.org/project/textcaptcha
Monday, August 1...
Let’s Recap.
Monday, August 19, 2013
Let’s Recap.
1. Reconsider the Image Rotator.
Monday, August 19, 2013
Let’s Recap.
1. Reconsider the Image Rotator.
2. Check the color contrast during design process
Monday, August 19, 2013
Let’s Recap.
1. Reconsider the Image Rotator.
2. Check the color contrast during design process
3. Use Nice Menus, Context...
Let’s Recap.
1. Reconsider the Image Rotator.
2. Check the color contrast during design process
3. Use Nice Menus, Context...
Let’s Recap.
1. Reconsider the Image Rotator.
2. Check the color contrast during design process
3. Use Nice Menus, Context...
Questions?
Monday, August 19, 2013
PHASE2TECHNOLOGY.COM
Monday, August 19, 2013
Extra: #6
Monday, August 19, 2013
maps are relevant to
people who are blind.6
Monday, August 19, 2013
Monday, August 19, 2013
Choose This:
map formats that convey
all information
6. Maps
Monday, August 19, 2013
Monday, August 19, 2013
Monday, August 19, 2013
Upcoming SlideShare
Loading in …5
×

Accessibility presentation at Drupal Government Days

3,672 views

Published on

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

No Downloads
Views
Total views
3,672
On SlideShare
0
From Embeds
0
Number of Embeds
1,132
Actions
Shares
0
Downloads
17
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Accessibility presentation at Drupal Government Days

  1. 1. Choose This, Not That: Five Early Choices that can make YOU an Accessibility Rockstar Catharine McNally August 14, 2013 Monday, August 19, 2013
  2. 2. Experience Analyst Email: cmcnally@phase2technology.com Catharine McNally Twitter: @cmcnally Monday, August 19, 2013
  3. 3. We’re launching the site next week. It has to be Section 508 compliant. Can you test and verify? Project Manager at [Company] Joe Manager “ ” Monday, August 19, 2013
  4. 4. Monday, August 19, 2013
  5. 5. Monday, August 19, 2013
  6. 6. More Details: http://www.phase2technology.com/blog/accessibility-in-1-hour-improving-the-phase2-website/ Monday, August 19, 2013
  7. 7. Oh $&%*!“ ” Project Manager at [Company] Joe Manager Monday, August 19, 2013
  8. 8. I wish I knew this in the beginning!“ ” Project Manager at [Company] Joe Manager Monday, August 19, 2013
  9. 9. 5things to know Monday, August 19, 2013
  10. 10. image rotators are tough.1 Monday, August 19, 2013
  11. 11. close your eyes & listen to a rotator through a screenreader: Monday, August 19, 2013
  12. 12. close your eyes & listen to a rotator through a screenreader: Monday, August 19, 2013
  13. 13. color contrast matters.2 Monday, August 19, 2013
  14. 14. Inside Outside Monday, August 19, 2013
  15. 15. navigation can be really annoying.3 Monday, August 19, 2013
  16. 16. Monday, August 19, 2013
  17. 17. Monday, August 19, 2013
  18. 18. accessible media helps everyone.4 Monday, August 19, 2013
  19. 19. like for when you forgot your headphones. Monday, August 19, 2013
  20. 20. audio & visual captcha is a strain.5 Monday, August 19, 2013
  21. 21. endless loop of frustration. Comic written by Larry Lambert, illustrated by Jerry King Monday, August 19, 2013
  22. 22. want to become an accessibility ninja? Monday, August 19, 2013
  23. 23. 1. Image Rotators Choose This: alternate ways to convey messaging Monday, August 19, 2013
  24. 24. consider: different approaches. Monday, August 19, 2013
  25. 25. consider: different approaches. Monday, August 19, 2013
  26. 26. Monday, August 19, 2013
  27. 27. If you have to use a rotator... * Turn off automated rotating feature. * Ensure you have pause on hover enabled. * Add the latest in accessibility semantics (ARIA) into the markup via javascript. * Tabbing through rotator achievable since there was no automatic rotation and screenreader treats it as if a slideshow. Monday, August 19, 2013
  28. 28. Choose This: high color contrast 2. Site Theme / Design Monday, August 19, 2013
  29. 29. Color Contrast: Why it Matters. Monday, August 19, 2013
  30. 30. Monday, August 19, 2013
  31. 31. Monday, August 19, 2013
  32. 32. Color Contrast: Tools. More Details: http://www.phase2technology.com/blog/color-contrast-for-accessibility-benefits-your-mobile- experience/ Monday, August 19, 2013
  33. 33. Color Contrast: Tools. More Details: http://www.phase2technology.com/blog/color-contrast-for-accessibility-benefits-your-mobile- experience/ Monday, August 19, 2013
  34. 34. Color Contrast: Tools. More Details: http://www.phase2technology.com/blog/color-contrast-for-accessibility-benefits-your-mobile- experience/ Monday, August 19, 2013
  35. 35. Choose This: skip-links and landmarks 3. Site Navigation Monday, August 19, 2013
  36. 36. Skip-Links Module on Drupal.org Module on Drupal.org https://drupal.org/project/accessible_skip_links Monday, August 19, 2013
  37. 37. Skip-Links Module on Drupal.org Module on Drupal.org https://drupal.org/project/accessible_skip_links Monday, August 19, 2013
  38. 38. Another way to “Skip Around:” Landmarks Monday, August 19, 2013
  39. 39. Another way to “Skip Around:” Landmarks Monday, August 19, 2013
  40. 40. Banner Another way to “Skip Around:” Landmarks Monday, August 19, 2013
  41. 41. NavigationBanner Another way to “Skip Around:” Landmarks Monday, August 19, 2013
  42. 42. Navigation Main Content Banner Another way to “Skip Around:” Landmarks Monday, August 19, 2013
  43. 43. Navigation Main Content Complementary Banner Another way to “Skip Around:” Landmarks Monday, August 19, 2013
  44. 44. content area landmark markup page header; logo, <header  role  =  “banner”> navigational links <nav  role  =  “navigation”> primary content of page <main  role  =  “main”> used for extra content -- i.e., sidebar <aside  role  =  “complementary”> collection of items presented in a form <form  role  =  “form”> footer content <footer  role  =  “contentinfo”> search bar <form  role  =  “search”> Accepted Landmark Roles Monday, August 19, 2013
  45. 45. Choose This: contextually relevant links 3. Navigation, continued. Monday, August 19, 2013
  46. 46. Monday, August 19, 2013
  47. 47. Read More...what? Monday, August 19, 2013
  48. 48. Read More...what? Read This Post better because it gives context to type of content. Monday, August 19, 2013
  49. 49. Read More...what? Read This Post better because it gives context to type of content. Continue Reading [Title] full understanding of what action will happen after clicking on the link. Monday, August 19, 2013
  50. 50. Contextually Relevant Read More $node->content['accessible_read_more'] = array( '#markup' => l(t('Read Full !type', array('!type' => $node_type->name)), 'node/' . $node->nid, array( 'attributes' => array( 'title' => $node->title, The quick brown fox jumped over the log. Remember those days when we had to type the “quick brown fox jumped over the log” in our typing classes? I wonder if kids are still doing that today. How are they learning to type? I’m curious. Are they learning to type before they can write? Read Full Blog. The quick brown fox jumped over the log. On Site / Visual Screenreader Remember those days when we had to type the “quick brown fox jumped over the log” in our typing classes? I wonder if kids are still doing that today. How are they learning to type? I’m curious. Are they learning to type before they can write? Read Full Blog the quick brown fox jumped over the log link. Monday, August 19, 2013
  51. 51. Contextually Relevant Read More $node->content['accessible_read_more'] = array( '#markup' => l(t('Read Full !type', array('!type' => $node_type->name)), 'node/' . $node->nid, array( 'attributes' => array( 'title' => $node->title, The quick brown fox jumped over the log. Remember those days when we had to type the “quick brown fox jumped over the log” in our typing classes? I wonder if kids are still doing that today. How are they learning to type? I’m curious. Are they learning to type before they can write? Read Full Blog. The quick brown fox jumped over the log. On Site / Visual Screenreader Remember those days when we had to type the “quick brown fox jumped over the log” in our typing classes? I wonder if kids are still doing that today. How are they learning to type? I’m curious. Are they learning to type before they can write? Read Full Blog the quick brown fox jumped over the log link. Monday, August 19, 2013
  52. 52. W3C Recommendations Write the contextually relevant text (i.e, title) in the anchor. Here’s an example: <a href="#"> <span>Washington stimulates economic growth </span>Read More</a> Wrap it in a span which you hide with CSS. Use display:none but to make the screen reader pick it up, force it outside of the displayed area: a span { height: 1px; width: 1px; position: absolute; overflow: hidden; Sighted users will just see the words “Read more”, while screenreaders will hear “Link: Washington stimulates economic growth. Read More” Monday, August 19, 2013
  53. 53. nice menus Module on Drupal.org: https://drupal.org/project/nice_menus Monday, August 19, 2013
  54. 54. nice menus Module on Drupal.org: https://drupal.org/project/nice_menus Monday, August 19, 2013
  55. 55. Choose This: video players & image uploads that support captions & alt-text 4. Media Monday, August 19, 2013
  56. 56. image accessibility: supporting alt text ensure that media uploads have alt text field. media module on Drupal has this: https://drupal.org/project/media when picking out WYSIWYG, check that media has alt text field options. Monday, August 19, 2013
  57. 57. image accessibility: authoring alt text More Details:More Details: Monday, August 19, 2013
  58. 58. image accessibility: authoring alt text Torn-down house from a tornado More Details:More Details: Monday, August 19, 2013
  59. 59. image accessibility: authoring alt text Torn-down house from a tornado Forlorn children stare at the rubble that was once their house in the wake of a tornado More Details:More Details: Monday, August 19, 2013
  60. 60. image accessibility: authoring alt text Torn-down house from a tornado Forlorn children stare at the rubble that was once their house in the wake of a tornado More Details:More Details: Monday, August 19, 2013
  61. 61. image accessibility: authoring alt text 1. KISS. Keep It Simple. Torn-down house from a tornado Forlorn children stare at the rubble that was once their house in the wake of a tornado More Details:More Details: Monday, August 19, 2013
  62. 62. image accessibility: authoring alt text 1. KISS. Keep It Simple. 2. Short. Think of it like a Tweet. Torn-down house from a tornado Forlorn children stare at the rubble that was once their house in the wake of a tornado More Details:More Details: Monday, August 19, 2013
  63. 63. image accessibility: authoring alt text 1. KISS. Keep It Simple. 2. Short. Think of it like a Tweet. Torn-down house from a tornado Forlorn children stare at the rubble that was once their house in the wake of a tornado More Details: http://www.phase2technology.com/blog/no-more-excuses-the-definitive-guide-to-the-alt-text-field/More Details: Monday, August 19, 2013
  64. 64. video accessibility: adding caption tracks 1. Use a video player that supports upload of caption tracks: YouTube Resource: How to upload caption tracks to YouTube https://support.google.com/youtube/answer/2734796?hl=en Monday, August 19, 2013
  65. 65. video accessibility: adding caption tracks 1. Use a video player that supports upload of caption tracks: YouTube Resource: How to upload caption tracks to YouTube https://support.google.com/youtube/answer/2734796?hl=en Monday, August 19, 2013
  66. 66. Universal Subtitles http://universalsubtitles.org/ Monday, August 19, 2013
  67. 67. Universal Subtitles http://universalsubtitles.org/ Monday, August 19, 2013
  68. 68. Universal Subtitles http://universalsubtitles.org/ Monday, August 19, 2013
  69. 69. video accessibility: adding caption tracks 2. Use native video player and add captions Video CC Format HTML5 WebVTT JWPlayer SRT, DFXP, WebVTT Flash DFXP QuickTime QT RealPlayer SMI Monday, August 19, 2013
  70. 70. Choose This: logic questions 5. CAPTCHA Monday, August 19, 2013
  71. 71. i’m smarter than a 5th grader. text captchas Module on Drupal.org: https://drupal.org/project/textcaptcha Monday, August 19, 2013
  72. 72. i’m smarter than a 5th grader. text captchas Module on Drupal.org: https://drupal.org/project/textcaptcha Monday, August 19, 2013
  73. 73. i’m smarter than a 5th grader. text captchas Module on Drupal.org: https://drupal.org/project/textcaptcha Monday, August 19, 2013
  74. 74. Let’s Recap. Monday, August 19, 2013
  75. 75. Let’s Recap. 1. Reconsider the Image Rotator. Monday, August 19, 2013
  76. 76. Let’s Recap. 1. Reconsider the Image Rotator. 2. Check the color contrast during design process Monday, August 19, 2013
  77. 77. Let’s Recap. 1. Reconsider the Image Rotator. 2. Check the color contrast during design process 3. Use Nice Menus, Contextual Read-More, and/or Landmarks Monday, August 19, 2013
  78. 78. Let’s Recap. 1. Reconsider the Image Rotator. 2. Check the color contrast during design process 3. Use Nice Menus, Contextual Read-More, and/or Landmarks 4. Support accessible media authoring and viewing Monday, August 19, 2013
  79. 79. Let’s Recap. 1. Reconsider the Image Rotator. 2. Check the color contrast during design process 3. Use Nice Menus, Contextual Read-More, and/or Landmarks 4. Support accessible media authoring and viewing 5. Consider using logic questions for CAPTCHA Monday, August 19, 2013
  80. 80. Questions? Monday, August 19, 2013
  81. 81. PHASE2TECHNOLOGY.COM Monday, August 19, 2013
  82. 82. Extra: #6 Monday, August 19, 2013
  83. 83. maps are relevant to people who are blind.6 Monday, August 19, 2013
  84. 84. Monday, August 19, 2013
  85. 85. Choose This: map formats that convey all information 6. Maps Monday, August 19, 2013
  86. 86. Monday, August 19, 2013
  87. 87. Monday, August 19, 2013

×