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

Post on 27-Dec-2015

216 Views

Category:

Documents

1 Downloads

Preview:

Click to see full reader

TRANSCRIPT

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

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

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

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

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

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

Pearson Guidelines - Resources

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

36. Transcripts Resources inside the Guidelines Site

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

Breakdown of Guidelines into Three Categories.

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

Guidelines that require functionality

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

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

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

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.

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

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

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

What if you pause a show?

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

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

What if you pause a show?

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

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

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

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

• Complete Narration

• Audio Description

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

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

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

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

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

Guideline 31: Complete Narration Helpful to draw student attention

Image from Mehran Moghtadai and Wikipedia Commons

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

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

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

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

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

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

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

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

[Angrily]

[Amused]

[Laughing]

[With Surprise]

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

38. Mirroring Source Materials

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

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

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

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

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

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

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

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

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

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

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

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)

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

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)

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

Guideline 26: Contrast for Text Readability Pixel Selection Recommendations

Most-favorable Pixel Inside

Least-favorable Pixel Outside

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

Guideline 27Guideline 28

Guideline 26

Average Protanope

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

Demos Adjusted for Users with Colorblindness

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

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

• No way to tell from the screen shots!

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

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

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

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

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

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.

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

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.

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

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

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

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

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

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 matched semantics

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

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

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

Reading Order

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

• ARIA Alert from Example Site

Test Page

ARIA & Controlling Focus

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

•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

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

Using formatting for emphasis is just fine!

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

• Error Example• Fix Example

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

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.

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

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.

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

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/

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

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

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

Questions & Answers

8

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

Thankyou

top related