Transcript Slide 1

Creating Accessible Educational Web Media
Accessing Higher Ground
November 2012
–
–
Suzanne Taylor, Director, Accessibility Solutions, Pearson
Kathleen Wahlbin, Senior Accessibility Specialist, Pearson
Contents
1.
Pearson Guidelines
–
–
–
Guidelines that require functionality
Guidelines that impact the visual design
Guidelines that focus on coding standards
The Pearson Guidelines
4
Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor
Pearson Guidelines
For Digital Learning Products & Services
Section 508 (current & refresh)
• WCAG 2.0 Level AA
• Customized for Education
• Important information for our products bubbled up to the
surface
•
http://wps.pearsoned.com/accessibility
5
Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor
Pearson Guidelines - Goals
For Digital Learning Products & Services
Time to work with the material
• Not missing anything
• Confident not missing anything
• Everyone can discuss the material & work together
•
http://wps.pearsoned.com/accessibility
6
Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor
Pearson Guidelines - Resources
7
Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor
36. Transcripts
Resources inside the Guidelines Site
8
Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor
Breakdown of Guidelines into Three Categories.
9
Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor
Guidelines that require functionality
10 Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor
Guideline 2: Time limits
Allow users to adjust short-term (20 hours or less) time
limits to at least ten times the default.
11 Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor
Guideline 3: Timed Tests
If Pearson Guideline 2 would invalidate a timed activity:
• Allow instructors to adjust time limits for particular students
• OR, Allow students to adjust the time or just complete the
activity after the time limit is reached. And, record the time spent
with the results.
12 Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor
Guideline 24: Ability to Stop Motion
Allow users to stop any content that moves for more than
five seconds or that updates automatically.
http://abc.go.com/watch/theneighbors/SH55199654/VD55243605/larry-bird-and-the-iron-throne
13 Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor
What if you pause a show?
http://abc.go.com/watch/theneighbors/SH55199654/VD55243605/larry-bird-and-the-iron-throne
14 Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor
What if you pause a show?
http://abc.go.com/watch/theneighbors/SH55199654/VD55243605/larry-bird-and-the-iron-throne
15 Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor
Guideline 25: Still View of Moving Content
Allow the user to read text, equations & diagrams while
they are not moving, autoscrolling or being automatically
changed/replaced.
• Mobile device – can only see a portion of screen at once
• Magnifier – can only see a portion of screen at once
16 Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor
• Complete Narration
• Audio Description
17 Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor
Guideline 31: Complete Narration
Avoiding need for Audio Description
“Look what happens. Explain the
reason for this in the space provided.”
Image from Mehran Moghtadai and Wikipedia Commons
18 Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor
Guideline 31: Complete Narration
Avoiding need for Audio Description
“We can see that where the green tube enters either glass, the
tube appears to be broken, starting over again from a point a little
ways away. The same thing happens again as the green tube
enters either liquid.
Explain the reason for
this in the space
provided.”
Image from Mehran Moghtadai and Wikipedia Commons
19 Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor
Guideline 31: Complete Narration
Helpful to draw student attention
Image from Mehran Moghtadai and Wikipedia Commons
20 Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor
Guideline 31: Complete Narration or Audio Description
Explain Confusing Sounds
Only need to describe visual elements necessary to understand
• But what if a Lion keep growling while the speaker speaks over it?
Pretty confusing!
•
•
Try to work the information in in a natural way,
"Professor Smith of the Smith Zoo speaks to a small
crowd at the zoo's lion exhibit."
21 Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor
Guideline 37: Captions
When movies, animations, slideshows or games use
synchronized visuals and sound to provide information,
use captions to provide all important auditory information.
22 Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor
Guideline 37: Captions
When movies, animations, slideshows or games use
synchronized visuals and sound to provide information,
use captions to provide all important auditory information.
23 Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor
36. Transcripts - Speakers
When audio provides information, provide the same
information in a text transcript
[Angrily]
[Amused]
[Laughing]
[With Surprise]
24 Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor
38. Mirroring Source Materials
25 Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor
36. Transcripts
When audio provides information, provide the same
information in a text transcript
26 Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor
36. Transcripts
When audio provides information, provide the same
information in a text transcript
27 Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor
38. Mirroring Source Materials
Another key example is when a PDF or eBook is used
by some students while others use a printed book.
28 Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor
Guideline 39: User Content
When end users (e.g. students, instructors) can upload or
create content, allow and facilitate alternatives for nontext content (e.g. alt-text for images, captions and audio
descriptions for video, transcripts for audio) and, where
significant text editing is possible, semantic markup (e.g.
headings, data tables and lists).
29 Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor
Guidelines that Apply to the Default Appearance
A few standards apply to the default appearance
30 Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor
Guideline 26: Contrast for Text Readability
Using a contrast ratio tool, choose text color and text background
color so that the contrast ratio between the colors is at least:
• 4.5:1 for small text
• 3:1 for text that is at least 18 points or bold 14 points
• 7:1 when one of the colors is red (or nearly red) and other color is
black (or nearly black)
31 Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor
Guideline 26: Contrast for Text Readability
7:1 when one of the colors is red (or nearly red) and other
color is black (or nearly black)
32 Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor
Guideline 26: Contrast for Text Readability
Pixel Selection Recommendations
Most-favorable Pixel
Inside
Least-favorable Pixel
Outside
33 Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor
Guideline 27
Guideline 28
Guideline 26
Average
34 Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor
Protanope
Demos Adjusted for Users with
Colorblindness
35 Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor
Guidelines about following coding standards
Most of the Requirements are Invisible Coding Practices
•
No way to tell
from the screen
shots!
36 Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor
Communication
• Communication
• Communication
• Communication
•
between students
between instructors
between students and instructors
with Customer Support
37 Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor
•
•
•
Users with low vision
Users with learning disabilities
Dragon users
38 Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor
30. Image Buttons & Links
If an image represents a control or a link, provide text that can
serve the same purpose when images are not available.
39 Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor
30. Image Buttons & Links
If an image represents a control or a link, provide text that can
serve the same purpose when images are not available.
40 Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor
Guideline 11: Semantic Markup
Identify roles (e.g. heading, numbered list, data table) of page
elements using conventions for the media type. (And do not
misidentify roles by using those conventions solely for their visual
effects.)
Example of mismatched semantics
41 Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor
Guideline 11: Semantic Markup
Identify roles (e.g. heading, numbered list, data table) of page
elements using conventions for the media type. (And do not
misidentify roles by using those conventions solely for their visual
effects.)
42 Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor
Guideline 11: Semantic Markup
Identify roles (e.g. heading, numbered list, data table) of page
elements using conventions for the media type. (And do not
misidentify roles by using those conventions solely for their visual
effects.)
Example of matched semantics
43 Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor
Guideline 11: Semantic Markup
Identify roles (e.g. heading, numbered list, data table) of page
elements using conventions for the media type. (And do not
misidentify roles by using those conventions solely for their visual
effects.)
44 Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor
Reading Order
45 Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor
ARIA & Controlling Focus
• ARIA Alert from Example Site
Test Page
46 Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor
•Let the user know the area is dynamic
•Additional: Provide options if notifications might be disruptive
News Updated Hourly
Messages from Your Classmates
Read headline when updated
Read headline when updated
Play Beep when updated
Play Beep when updated
47 Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor
Using formatting for emphasis is just fine!
48 Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor
•
Error Example
•
Fix Example
49 Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor
Staying on Task
1.
Write text alternatives that serve the same purpose as the image, do
not just label the image.
2.
Do not use alt-text to provide new information that is not in the image.
3.
Do not write text alternatives for images that are merely decorative. (See
Pearson Guideline 38)
4.
Do not provide more than brief labels for images that only repeat
information that is already present in the text.
50 Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor
Tips for Writing Good Alternative Text for Complex Images
Effective Descriptions
1.
Understand the context.
2.
Keep it concise.
3.
Start general and move to specifics.
4.
Use polished and grammatically correct language.
5.
If the image is of a particularly obvious or unique type, consider identifying
the type of image (e.g. cartoon, photo).
6.
Pay Attention to New Items vs. Items Already Mentioned (i.e. a triangle vs.
the triangle).
7.
Check your work, by imagining your text in use. Does it serve the same
purpose as the image?
8.
Especially when describing how something looks, consider asking others to
read your description to see if they agree with any poetic interpretations.
9.
Does the image suggest any of the structures available in structured
text? Use headings, bulleted lists, numbered lists, definition lists, nested
lists and tables to organize long or complex text alternatives.
10. Double check that the data in the text alternative is the same as the data
in the original image.
11. Always use the same terminology and reading level that is used in the
main text.
51 Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor
Blind Students and Instructors
Tactile Graphics – Beyond the required standards
Specially Designed
• Instructor Created
• Automatic Printing
• With Audio
•
Ref: http://inhabitat.com/pictures-without-ink-create-tactile-graphics-for-the-blind/
http://www.viewplus.com/products/software/hands-on-learning/
52 Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor
Challenges /Exceptions
•Do
not remove features for accessibility
•WCAG 2.0 has Exceptions
– Sound or image to provide a specific
sensory experience
– Time Limits
• The Pearson Guidelines Do Not
• Many things that seem impossible at
first, are actually easy
– iPad/Touch Screen Accessibility
• If something is truly impossible to make
accessible to a particular group, that still
needs to be documented
Ref: http://www.apple.com/accessibility/iphone/vision.html
53 Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor
Questions & Answers
54 Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor
Thank
you
55 Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor