• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Accessibility presentation at Drupal Government Days
 

Accessibility presentation at Drupal Government Days

on

  • 1,448 views

 

Statistics

Views

Total Views
1,448
Views on SlideShare
857
Embed Views
591

Actions

Likes
4
Downloads
11
Comments
0

3 Embeds 591

http://www.phase2technology.com 587
https://twitter.com 3
http://artjoolree.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NoDerivs LicenseCC Attribution-NoDerivs License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Accessibility presentation at Drupal Government Days Accessibility presentation at Drupal Government Days Presentation Transcript

    • Choose This, Not That: Five Early Choices that can make YOU an Accessibility Rockstar Catharine McNally August 14, 2013 Monday, August 19, 2013
    • 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 [Company] Joe Manager “ ” Monday, August 19, 2013
    • 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, 2013
    • 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 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
    • 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-mobile- experience/ Monday, August 19, 2013
    • Color Contrast: Tools. More Details: http://www.phase2technology.com/blog/color-contrast-for-accessibility-benefits-your-mobile- experience/ Monday, August 19, 2013
    • Color Contrast: Tools. More Details: http://www.phase2technology.com/blog/color-contrast-for-accessibility-benefits-your-mobile- experience/ Monday, August 19, 2013
    • 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, 2013
    • Skip-Links Module on Drupal.org Module on Drupal.org https://drupal.org/project/accessible_skip_links Monday, August 19, 2013
    • 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  =  “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
    • 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 understanding of what action will happen after clicking on the link. Monday, August 19, 2013
    • 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
    • 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
    • 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
    • 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: https://drupal.org/project/media when picking out WYSIWYG, check that media has alt text field options. Monday, August 19, 2013
    • 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 their house in the wake of 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 their house in the wake of a tornado More Details:More Details: Monday, August 19, 2013
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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 JWPlayer SRT, DFXP, WebVTT Flash DFXP QuickTime QT RealPlayer SMI Monday, August 19, 2013
    • 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 19, 2013
    • i’m smarter than a 5th grader. text captchas Module on Drupal.org: https://drupal.org/project/textcaptcha Monday, August 19, 2013
    • i’m smarter than a 5th grader. text captchas Module on Drupal.org: https://drupal.org/project/textcaptcha Monday, August 19, 2013
    • 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, Contextual Read-More, and/or Landmarks Monday, August 19, 2013
    • 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
    • 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
    • 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