Accessibility presentation at Drupal Government Days

Choose This, Not That: Five Early Choices that can make

YOU an Accessibility Rockstar

Catharine McNallyAugust 14, 2013

Monday, August 19, 2013

Experience Analyst

Email: [email protected]

Catharine McNally

Twitter: @cmcnally


mailto:[email protected]




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

“ ”




More Details: http://www.phase2technology.com/blog/accessibility-in-1-hour-improving-the-phase2-website/


http://www.phase2technology.com/blog/accessibility-in-1-hour-improving-the-phase2-website/

http://www.phase2technology.com/blog/accessibility-in-1-hour-improving-the-phase2-website/

Oh $&%*!“ ”


Joe Manager


I wish I knew this in the beginning!“ ”


Joe Manager


5 things to know


image rotators are tough.1


close your eyes & listen to a rotator through a screenreader:


close your eyes & listen to a rotator through a screenreader:


color contrastmatters.2


Inside

Outside


navigation can be really annoying.3




accessible mediahelps everyone.4


like for when you forgot your headphones.


audio & visual captcha is a strain.5


endless loop of frustration.

Comic written by Larry Lambert, illustrated by Jerry King


http://www.okcfunnies.com/

http://www.okcfunnies.com/

http://www.jerryking.com/

http://www.jerryking.com/

want to become an accessibility ninja?


1. Image Rotators

Choose This:

alternate ways to convey messaging


consider:different approaches.


consider:different approaches.



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.


Choose This:

high color contrast

2. Site Theme / Design


Color Contrast: Why it Matters.




Color Contrast: Tools.

More Details:http://www.phase2technology.com/blog/color-contrast-for-accessibility-benefits-your-mobile-

experience/Monday, August 19, 2013

http://www.phase2technology.com/blog/color-contrast-for-accessibility-benefits-your-mobile-experience/


















Choose This:

skip-links and landmarks

3. Site Navigation


Skip-Links Module on Drupal.org

Module on Drupal.org https://drupal.org/project/accessible_skip_links


https://drupal.org/project/accessible_skip_links


Skip-Links Module on Drupal.org

Module on Drupal.org https://drupal.org/project/accessible_skip_links




Another way to “Skip Around:” Landmarks




Banner



NavigationBanner



Navigation

Main Content

Banner



Navigation

Main Content

Complementary

Banner



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


Choose This:

contextually relevant links

3. Navigation, continued.



Read More...what?


Read More...what?

Read This Postbetter because it gives context to type of content.


Read More...what?

Read This Postbetter because it gives context to type of content.

Continue Reading [Title]full understanding of what action will happen after clicking on the link.


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 typethe “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.


On Site / Visual Screenreader

Remember those days when we had to typethe “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.


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,


Remember those days when we had to typethe “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.


On Site / Visual Screenreader

Remember those days when we had to typethe “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.


W3C RecommendationsWrite 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”


nice menus

Module on Drupal.org: https://drupal.org/project/nice_menus


https://drupal.org/project/nice_menus


nice menus

Module on Drupal.org: https://drupal.org/project/nice_menus




Choose This:video players & image uploads that support captions & alt-text

4. Media


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, checkthat media has alt text field options.


https://drupal.org/project/media

https://drupal.org/project/media

image accessibility: authoring alt text

More Details:More Details:



Torn-down house from a tornado





Forlorn children stare at the rubble that was once their

house in the wake of a tornado










1. KISS. Keep It Simple.








2. Short. Think of it like a Tweet.








2. Short. Think of it like a Tweet.




More Details: http://www.phase2technology.com/blog/no-more-excuses-the-definitive-guide-to-the-alt-text-field/More Details:


http://www.phase2technology.com/blog/no-more-excuses-the-definitive-guide-to-the-alt-text-field/

http://www.phase2technology.com/blog/no-more-excuses-the-definitive-guide-to-the-alt-text-field/

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


https://support.google.com/youtube/answer/2734796?hl=en



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




Universal Subtitles

http://universalsubtitles.org/




Universal Subtitles





Universal Subtitles






2. Use native video player and add captions

Video CC FormatHTML5 WebVTT

JWPlayer SRT, DFXP, WebVTT

Flash DFXP

QuickTime QT

RealPlayer SMI


Choose This:

logic questions

5. CAPTCHA


i’m smarter than a 5th grader.text captchas

Module on Drupal.org: https://drupal.org/project/textcaptcha


https://drupal.org/project/textcaptcha












Let’s Recap.


Let’s Recap.

1. Reconsider the Image Rotator.


Let’s Recap.


2. Check the color contrast during design process


Let’s Recap.



3. Use Nice Menus, Contextual Read-More, and/or Landmarks


Let’s Recap.




4. Support accessible media authoring and viewing


Let’s Recap.




4. Support accessible media authoring and viewing

5. Consider using logic questions for CAPTCHA


Questions?


PHASE2TECHNOLOGY.COM


Extra: #6


maps are relevant to people who are blind.6



Choose This:

map formats that convey all information

6. Maps




Technology

Accessibility presentation at Drupal Government Days