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
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
32. Color Contrast: Tools.
More Details:
http://www.phase2technology.com/blog/color-contrast-for-accessibility-benefits-your-mobile-
experience/
Monday, August 19, 2013
33. Color Contrast: Tools.
More Details:
http://www.phase2technology.com/blog/color-contrast-for-accessibility-benefits-your-mobile-
experience/
Monday, August 19, 2013
34. Color Contrast: Tools.
More Details:
http://www.phase2technology.com/blog/color-contrast-for-accessibility-benefits-your-mobile-
experience/
Monday, August 19, 2013
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
48. Read More...what?
Read This Post
better because it gives context to type of content.
Monday, August 19, 2013
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. 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. 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. 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. nice menus
Module on Drupal.org: https://drupal.org/project/nice_menus
Monday, August 19, 2013
54. nice menus
Module on Drupal.org: https://drupal.org/project/nice_menus
Monday, August 19, 2013
55. Choose This:
video players & image
uploads that support
captions & alt-text
4. Media
Monday, August 19, 2013
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
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. 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. 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. 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. 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. 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. 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
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
76. Let’s Recap.
1. Reconsider the Image Rotator.
2. Check the color contrast during design process
Monday, August 19, 2013
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. 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. 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
