Your SlideShare is downloading. ×
0
Drupal Camp Accessibility Presentation 2013
Drupal Camp Accessibility Presentation 2013
Drupal Camp Accessibility Presentation 2013
Drupal Camp Accessibility Presentation 2013
Drupal Camp Accessibility Presentation 2013
Drupal Camp Accessibility Presentation 2013
Drupal Camp Accessibility Presentation 2013
Drupal Camp Accessibility Presentation 2013
Drupal Camp Accessibility Presentation 2013
Drupal Camp Accessibility Presentation 2013
Drupal Camp Accessibility Presentation 2013
Drupal Camp Accessibility Presentation 2013
Drupal Camp Accessibility Presentation 2013
Drupal Camp Accessibility Presentation 2013
Drupal Camp Accessibility Presentation 2013
Drupal Camp Accessibility Presentation 2013
Drupal Camp Accessibility Presentation 2013
Drupal Camp Accessibility Presentation 2013
Drupal Camp Accessibility Presentation 2013
Drupal Camp Accessibility Presentation 2013
Drupal Camp Accessibility Presentation 2013
Drupal Camp Accessibility Presentation 2013
Drupal Camp Accessibility Presentation 2013
Drupal Camp Accessibility Presentation 2013
Drupal Camp Accessibility Presentation 2013
Drupal Camp Accessibility Presentation 2013
Drupal Camp Accessibility Presentation 2013
Drupal Camp Accessibility Presentation 2013
Drupal Camp Accessibility Presentation 2013
Drupal Camp Accessibility Presentation 2013
Drupal Camp Accessibility Presentation 2013
Drupal Camp Accessibility Presentation 2013
Drupal Camp Accessibility Presentation 2013
Drupal Camp Accessibility Presentation 2013
Drupal Camp Accessibility Presentation 2013
Drupal Camp Accessibility Presentation 2013
Drupal Camp Accessibility Presentation 2013
Drupal Camp Accessibility Presentation 2013
Drupal Camp Accessibility Presentation 2013
Drupal Camp Accessibility Presentation 2013
Drupal Camp Accessibility Presentation 2013
Drupal Camp Accessibility Presentation 2013
Drupal Camp Accessibility Presentation 2013
Drupal Camp Accessibility Presentation 2013
Drupal Camp Accessibility Presentation 2013
Drupal Camp Accessibility Presentation 2013
Drupal Camp Accessibility Presentation 2013
Drupal Camp Accessibility Presentation 2013
Drupal Camp Accessibility Presentation 2013
Drupal Camp Accessibility Presentation 2013
Drupal Camp Accessibility Presentation 2013
Drupal Camp Accessibility Presentation 2013
Drupal Camp Accessibility Presentation 2013
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

Drupal Camp Accessibility Presentation 2013

5,991

Published on

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

No Downloads
Views
Total Views
5,991
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
10
Comments
0
Likes
1
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
  • I’m catharine mcnally. I’ve been really passionate about accessibility, technology, trying to bridge the accessibility gap. I don’t believe in separate experiences for different audiences. You see, it’s not just important for me. It’s important for everyone else. 1 in 10 people may find themselves unable to fully perform the actions of a site.
    So accessibility is important. But more often than not, it’s approached as an afterthought.
  • I get a lot of requests like this one.
    The alarms go off in my head, my heart rate accelerates. I smile and say “ok, I’ll take a look.”
  • I’m a people pleaser to a fault. This is why a report like this makes me cry:
    I have to break the news to the project manager that the site that his team built wouldn’t pass Section508 compliance. While it seems like a lot of work up front, it’s actually pretty manageable. But it still means that they have to do some “undo-ing” of the site, and that means some more hours and budget burned.
    Their response?
  • This almost always immediately follows the 4-letter expletive.
    This spring, I noticed a common trend: I was reporting the same accessibility issues over and over on different projects for a different set of developers.
    So I thought it’d be worthwhile to outline the most common areas where I report issues on. Before I do this, I want to give you some context to why some of these problems are...problems.
  • There are 5 things to know:
  • Image rotators are tough. For screen readers. For sighted people. For users with limited mobility.
  • Daily Beast Rotator Demo. Close your eyes and listen. (Play Movie)
  • 2. Color Contrast matters. Not just for people who have low vision.
  • Think about when you’re outside during these summer months, looking at your mobile phone under bright sunlight, with your sunglasses on. How often do you find yourself looking for a shady spot or putting your hands over the screen? This is an example of how color contrast helps others who don’t identify as having low vision or color blindness.
  • There’s a lot of elements to Navigation that I report on. There’s the Main Navigation, the navigation of the page itself: how to jump from main to boxes, and how to easily skip to main.
  • I’m going to show an example of how Navigation is rendered to a screenreader. Play Movie.
  • Accessible Media. This is a big one. It helps everyone. Yet it seems to be the least enforced.
    It’s good for so many reasons,
  • Like for when you want to (discreetly) have access to a big sporting event and you can follow along with captions.
  • How many of you have found yourselves re-typing the CAPTCHA?
    Have you tried the audio version?
  • So. Who wants to become an accessibility ninja? Raise your hands. Let me see some energy in here!
  • First. Let’s talk about Image Rotators. How many of you still have clients asking for prominent image rotators on your sites?
  • Considerations: http://shouldiuseacarousel.com/
    Remember when you went over the image rotator demo, how...confusing it was?
    Check out this slideshow developed by Jared Smith from WebAIM, a leading thought leader in accessibility best practices.
  • TheDailyBeast. It doesn’t have an image rotator. “The Latest” is a better, scann-able way of finding out what’s important, rather than waiting for the 9th rotator to...rotate.
    The user, both you, and those who use assistive technology have much more control.
  • Second. Let’s go over the site theme and design.
  • Clean, High Color Contrast is important. Having low contrast potentially makes your users try harder. That’s the last thing you want. See how the contrast and weights are prominent?
  • this is a demonstration of a site with good color contrast. It’s prominent with heavy weights and fonts. So take a look at it from the lens of someone who has one of the most common color blindness: red-green blindness. Note that there’s not a loss in contrast.
    If there were red/orange pairings, that’s where it would get challenging.
  • Here are some tools that you can use for testing color blindness, and the standards.
    Here's my analysis on the colors where I thought the contrast was "close". I used a FireFox plugin that calculates the color contrast ratio. Additionally I used a color picker to select the colors for between the foreground and background. The WCAG standards for color contrast should exceed 4.5:1 for all font smaller than 14 px. For font sizes larger than 14 px, or featured in heavy weight, may pass at 3:1.  
  • Here are some tools that you can use for testing color blindness, and the standards.
    Here's my analysis on the colors where I thought the contrast was "close". I used a FireFox plugin that calculates the color contrast ratio. Additionally I used a color picker to select the colors for between the foreground and background. The WCAG standards for color contrast should exceed 4.5:1 for all font smaller than 14 px. For font sizes larger than 14 px, or featured in heavy weight, may pass at 3:1.  
  • http://www.psu.edu/academics
  • http://www.psu.edu/academics
  • http://www.smashingmagazine.com/2009/07/28/designing-read-more-and-continue-reading-links/
  • W3C’s solution
    So the best way to make a link accessible is to make the anchor text relevant and descriptive. This has been best practice for a while, and our website testing tools Sitebeamand Nibbler already check for what we call “weak text” like “read more” and “click here”. The reason this is bad is that screenreader users often use hotkeys to navigate the page, skipping to the next heading or link. If they skip to a link that says “read more”, it’s unclear what page they’ll be taken when clicked.
    But sometimes for us sighted users, a “read more” link is completely appropriate. We can’t write an incredibly long and unique description in the anchor text of every one of our links. So what should we do?
    The W3C have a recommendation, but it’s a bit bizarre. They recommend writing all the text in the anchor, but if you need to provide additional information for screenreaders, wrap this in a span which you hide with CSS. This means the unique text is there for everyone, but if you really just need the words “read more”, you can show that, and hide everything else.
    Here’s an example:
    <a href="#">
    <span>Washington stimulates economic growth </span>Read More</a>
    What I find the most bizarre about this recommendation is how they suggest hiding the text. Using display:none will make the text hidden in screenreaders, so we have to force the text out of the displayed area.
    a span {
    height: 1px;
    width: 1px;
    position: absolute;
    overflow: hidden;
    top: -10px;
    }
    Sighted users will just see the words “Read more”, whilst screenreaders will hear “Link: Washington stimulates economic growth. Read More”
    http://blog.silktide.com/2013/01/i-thought-title-text-improved-accessibility-i-was-wrong/
  • http://blog.silktide.com/2013/01/i-thought-title-text-improved-accessibility-i-was-wrong/
  • https://drupal.org/project/nice_menus
  • HTML uses <track>
  • by using CAPTCHA, you eliminate the worries about forms, using the right audio.
    But if you must.... use ReCAPTCHA.
    https://drupal.org/project/textcaptcha
  • Transcript

    • 1. Choose This, Not That: Five Early Choices that can make YOU an Accessibility Rockstar Catharine McNally August 14, 2013
    • 2. Experience Analyst Email: cmcnally@phase2technology.com Catharine McNally Twitter: @cmcnally
    • 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 “ ”
    • 4. More Details: http://www.phase2technology.com/blog/accessibility-in-1-hour-improving-the-phase2-website/
    • 5. Oh $&%*! “ ” Project Manager at [Company] Joe Manager
    • 6. I wish I knew this in the beginning! “ ” Project Manager at [Company] Joe Manager
    • 7. 5things to know
    • 8. image rotators are tough.1
    • 9. close your eyes & listen to a rotator through a screenreader:
    • 10. color contrast matters.2
    • 11. Inside Outside
    • 12. navigation can be really annoying.3
    • 13. accessible media helps everyone.4
    • 14. like for when you forgot your headphones.
    • 15. audio & visual captcha is a strain.5
    • 16. endless loop of frustration. Comic written by Larry Lambert, illustrated by Jerry King
    • 17. want to become an accessibility ninja?
    • 18. 1. Image Rotators Choose This: alternate ways to convey messaging
    • 19. consider: different approaches.
    • 20. 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.
    • 21. Choose This: high color contrast 2. Site Theme / Design
    • 22. Color Contrast: Why it Matters.
    • 23. Color Contrast: Tools. More Details: http://www.phase2technology.com/blog/color-contrast-for-accessibility-benefits-your-mobile-experience/
    • 24. Color Contrast: Tools. More Details: http://www.phase2technology.com/blog/color-contrast-for-accessibility-benefits-your-mobile-experience/
    • 25. Choose This: skip-links and landmarks 3. Site Navigation
    • 26. Skip-Links Module on Drupal.org Module on Drupal.org https://drupal.org/project/accessible_skip_links
    • 27. Navigation Main Content Complementary Banner Another way to “Skip Around:” Landmarks
    • 28. 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
    • 29. Choose This: contextually relevant links 3. Navigation, continued.
    • 30. 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.
    • 31. 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.
    • 32. 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”
    • 33. nice menus Module on Drupal.org: https://drupal.org/project/nice_menus
    • 34. Choose This: video players & image uploads that support captions & alt-text 4. Media
    • 35. 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.
    • 36. 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:
    • 37. 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
    • 38. Universal Subtitles http://universalsubtitles.org/
    • 39. Universal Subtitles http://universalsubtitles.org/
    • 40. 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
    • 41. Choose This: logic questions 5. CAPTCHA
    • 42. i’m smarter than a 5th grader. text captchas Module on Drupal.org: https://drupal.org/project/textcaptcha
    • 43. 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
    • 44. Questions?
    • 45. PHASE2TECHNOLOGY.COM
    • 46. Extra: #6
    • 47. maps are relevant to people who are blind.6
    • 48. Choose This: map formats that convey all information 6. Maps

    ×