creating accessible educational web media accessing higher ground november 2012 – suzanne taylor,...

Creating Accessible Educational Web Media

Accessing Higher GroundNovember 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

Accessible Educational Web Media | AHG 2012 | Kathy Wahlbin & Suzanne Taylor4

The Pearson Guidelines

1


Pearson GuidelinesFor 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


Pearson Guidelines - GoalsFor 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


Pearson Guidelines - Resources


36. Transcripts Resources inside the Guidelines Site


Breakdown of Guidelines into Three Categories.


Guidelines that require functionality


Guideline 2: Time limitsAllow users to adjust short-term (20 hours or less) time limits to at least ten times the default.


Guideline 3: Timed TestsIf 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.


Guideline 24: Ability to Stop MotionAllow users to stop any content that moves for more than five seconds or that updates automatically.

http://abc.go.com/watch/the-neighbors/SH55199654/VD55243605/larry-bird-and-the-iron-throne


What if you pause a show?



Guideline 25: Still View of Moving ContentAllow 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


• Complete Narration

• Audio Description


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


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.”



Guideline 31: Complete Narration Helpful to draw student attention



Guideline 31: Complete Narration or Audio DescriptionExplain 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."


Guideline 37: CaptionsWhen movies, animations, slideshows or games use synchronized visuals and sound to provide information, use captions to provide all important auditory information.


36. Transcripts - SpeakersWhen audio provides information, provide the same information in a text transcript

[Angrily]

[Amused]

[Laughing]

[With Surprise]


38. Mirroring Source Materials


36. TranscriptsWhen audio provides information, provide the same information in a text transcript


38. Mirroring Source MaterialsAnother key example is when a PDF or eBook is used by some students while others use a printed book.


Guideline 39: User ContentWhen end users (e.g. students, instructors) can upload or create content, allow and facilitate alternatives for non-text 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).


Guidelines that Apply to the Default AppearanceA few standards apply to the default appearance


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)


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)


Guideline 26: Contrast for Text Readability Pixel Selection Recommendations

Most-favorable Pixel Inside

Least-favorable Pixel Outside


Guideline 27Guideline 28

Guideline 26

Average Protanope


Demos Adjusted for Users with Colorblindness


Guidelines about following coding standardsMost of the Requirements are Invisible Coding Practices

• No way to tell from the screen shots!


• Communication between students• Communication between instructors• Communication between students and instructors• Communication with Customer Support


• Users with low vision• Users with learning disabilities• Dragon users


30. Image Buttons & LinksIf an image represents a control or a link, provide text that can serve the same purpose when images are not available.


Guideline 11: Semantic MarkupIdentify 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



Example of matched semantics


Reading Order


• ARIA Alert from Example Site

Test Page

ARIA & Controlling Focus


•Let the user know the area is dynamic

•Additional: Provide options if notifications might be disruptive

News Updated Hourly

Read headline when updated

Play Beep when updated

Messages from Your Classmates

Read headline when updated

Play Beep when updated


Using formatting for emphasis is just fine!


• Error Example• Fix Example


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.


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.


Blind Students and InstructorsTactile 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/


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


Questions & Answers

8


Thankyou

creating accessible educational web media accessing higher ground november 2012 – suzanne taylor,...

Documents