achieving accessibility: tips and strategies to …...– provide content for web audio or video...

Achieving Accessibility: Tips and Strategies to Design Content for all Learners

@voelkerc | [email protected]

http://jeremiahsjourney.org.uk/wp-content/uploads/2015/05/Tanzania-Kilimanjaro-6.jpg

• Former Teacher Librarian• Former Instructional Technology

Teacher Specialist• Former Coordinator of Online

Learning• Former Statewide partnership

grant Leader

• Current K-12 Program Director for Quality Matters

http://ep.yimg.com/ay/yhst-136450996553589/gender-neutral-restroom-tactile-braille-signs-9-9-10.gif

https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcScsFfMbBc1yotU-fiXDxEbn8LuhOwbM5jQRYVFU6_MQp9IH7XI

https://wmich.edu/sites/default/files/styles/720p/public/images/u255/2013/disabilityservices900a.jpg?itok=GoFSdNgy

https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSAHuXzhnsrDYbgCjO-3xC4xgmzQb3Bf01dyDMWyqmnMYmAPPWZ


ISTE Standards for Administrators 5 - Digital Citizenship: Participants will learn ways in which to ensure equitable access and appropriate digital tools and resources to meet the needs of all learners.

ISTE Standards for Teachers 4 - Promote and model digital citizenship and responsibility: Participants will learn how they can include materials in their courses that address the diverse needs of all learners by using learner-centered strategies providing equitable access to appropriate digital tools and resources.


• Discuss the importance and methods of providing accessible course materials

• Explain how to make images, video, and audio accessible for online and blended courses

• Create accessible tables, hyperlinks and images

• Discuss the importance of closed captioning your videos

• Explain the difference between open captioning, closed captioning, and subtitles

• Identify tools to help with closed captioning videos


https://support.content.office.net/vi-vn/media/58c7973b-10bd-40ff-b80f-839155422dbd.gif


https://www.wowza.com/uploads/images/closed-captions-430x240.png


https://www.quicksprout.com/2012/03/19/how-to-rank-on-the-first-page-of-google-through-videos/


http://www.rnib.org.uk/accessibility-guidelines-alt-text-what-you-need-know

https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSAHuXzhnsrDYbgCjO-3xC4xgmzQb3Bf01dyDMWyqmnMYmAPPWZhttps://www.ssa.gov/accessibility/checklists/img/NoHeaderRowSpecified_RemainsHighlighted.png


http://www.livescience.com/33523-color-symbolism-meanings.html


https://support.content.office.net/vi-vn/media/58c7973b-10bd-40ff-b80f-839155422dbd.gif

HTML & Styles

HTML Basics

HTML = Hypertext Markup Language• HTML tags are keywords surround by angle brackets <tag> content </tag>

• Come in pairs; opening and closing• Closing tag same as opening but contains a slash

• <h1>HTML Basics</h1>

• Contain attributes to define styles• <p style=“font-family:verdana”>

Headings

Styles are defined using HTML headings with the <h1> to <h6> tags:

Additional Tags

Paragraphs:<p>Content</p>

Unordered Lists:<ul><li>Dogs</li><li>cats</li></ul>

Ordered Lists:<ol><li>First step…</li><li>Second step…</li></ol>

Tables:<table><caption>Schedule</caption><tr><th>Assignment</th><th>Due </th></tr><tr><td>Exam</td><td>05-08-14</td></tr></table>

FormatingHTML defines special elements for defining text with added semantic importance. Use the “Style” strong for bold and emphasis for italics.

• Strong <strong>• Em <em>

<H1> = Heading 1<p> = Normal<ol> = Numbered list<ul> = Bulleted list<table> = Table<th> = Table heading<strong> = Bold<em> = Emphasis

Accessible Documents in MS Word

Ensure all heading styles are in the correct order (this is a Heading 2)

By using heading levels in a logical order, from largest to smallest, it assists users in navigating the document, finding information, and allows the creator to quickly add a Table of Contents.

Add a heading line (this is a Heading 3)1. Insert a line of text where you want the new heading2. On the Home tab, in the Styles group, choose the correct heading style

Create a heading style (this is a Heading 3)• Select, in the Styles group, choose the correct heading

style the text• On the Home tab

Accessibility Checker (this is a Heading 2)The Accessibility Checker tells you about possible accessibility issues in Word documents. The checker reports any errors and warnings in your document and explains how and why you need to fix them. To run the checker do the following:

1. Select the File button2. Select the Check for Issues button3. Review the information in the Inspection Results box4. Correct any errors and/or warnings by following the instructions in the

“Additional Information” section

Video: Using Styles in Word

https://support.office.com/en-us/article/Using-Styles-in-Word-9db4c0f4-2754-4294-9758-c14a0abd8cfa?ui=en-US&rs=en-US&ad=US


http://www.rnib.org.uk/accessibility-guidelines-alt-text-what-you-need-know

https://blog.shareaholic.com/wp-content/uploads/2012/01/alt-attribute-example.jpg

Rules

• Be accurate and equivalent• Be succinct• Do not be redundant• Do not use phrases “image of” or “graphic of”

Additional Principles

• Complex images, charts, or tables need text-captions.• Alt text of a functional image should describe the function

as well as the content.• Decorative images need to have a null alt attribute (e.g.

alt=“ “)

Alternative TextHigh Speed Internet

Online Students Traditional

Students

Alt text: Venn diagram of student access to high-speed internet, captioned below.

High Speed Internet

Online Students Traditional

Students

Figure 1.1 The Venn diagram shows the relationship between online and traditional students and the percentage that have High Speed Internet.

Captions

Common Misuse

• Repeat the caption as Alt text• Leave the text alternative blank when there is a caption• Include extra information in the text alternative

A better Alternative• Use a short text alternative and a full caption

http://4syllables.com.au/articles/text-alternatives-images-captions/

Alt=“”

Caption: Topographic map of Portsea, Victoria, prepared by Australian Section, Imperial General Staff, 1930

Alt=“map” (or “alt=“Portsea map”)

Caption: Topographic map of Portsea, Victoria, prepared by Australian Section, Imperial General Staff, 1930


Alt=“Items on this poster represent some of the objects in our vast collection of indigenous arts and crafts.”

Caption: Items on this poster represent some of the subjects in our vast collection of indigenous arts and crafts.

Alt=“Poster” (or “alt=“Arts and Crafts Poster”)

Caption: Items on this poster represent some of the subjects in our vast collection of indigenous arts and crafts.


Alt=“Port Hedland storm surge, 1935. Photo courtesy Port Hedland Historical Society.”

Caption: Before and during a storm surge at Port Hedland, 1935.

Alt=“storm surge”

Caption: Before and during a storm surge at Port Hedland, 1935. Photo courtesy Port Hedland Historical Society.


Alt=“Photo of the Prime Minister, Julia Gillard.”

Caption: Prime Minister, Julia Gillard.

Alt=“Julia Gillard”

Caption: Prime Minister, Julia Gillard.

Try it!Partner Activity

1. Determine the alt text for this image

2. Write a caption for this image (if needed).

3. Share

Copyright © 2014 W3C ®

https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSAHuXzhnsrDYbgCjO-3xC4xgmzQb3Bf01dyDMWyqmnMYmAPPWZhttps://www.ssa.gov/accessibility/checklists/img/NoHeaderRowSpecified_RemainsHighlighted.png

Tables & Hyperlinks

http://webaim.org/techniques/tables/

How would a screen reader read this?

Week Assignment Due Date1 Read chapters 1 to 3 Jan 20

Post introductions to discussion 2 Read chapters 4-6 Feb 13 Read chapter 7 Feb 8

Feb 8Paper due

https://www.youtube.com/watch?v=XN2MTLNH5Xk

Good Table

Week Assignment Due DateWeek 1 Read chapters 1 to 3 January 20Week 1 Post introductions to discussion January 20Week 2 Read chapters 4-6 February 1Week 3 Read chapter 7 February 8Week 3 Paper due February 8


HyperlinksUse these search engines for your research:To use Google, click hereTo use Bing, click here

Use these search engines for your research:GoogleBing

Not Unique!

http://www.google.com/

http://www.bing.com/

http://www.google.com/

http://www.bing.com/

Hyperlinkshttp://browsers.about.com/od/howtousewindowsbrowsers/a/firefoxtutorial.htm

How to do everything in Mozilla Firefox

http://browsers.about.com/od/howtousewindowsbrowsers/a/firefoxtutorial.htm

HyperlinksWebsite 1Website 2

Websites:Firefox Chrome

Not Descriptive

http://www.ez-download.com/mozilla-firefox/?kw=mozilla&subid=EZFFUS&cust=firefox&type=firefox&gclid=CPfo_9TprboCFeJDMgod7BwAvQ&utm_campaign=EZFFUS&fwd=1

https://www.google.com/intl/en/chrome/browser/?&brand=CHMA&utm_campaign=en&utm_source=en-ha-na-us-bk&utm_medium=ha

Accessible Assignments

Practice:• Review the instructions for the “Review of Quality

Matters” quiz• Add headers, alt text, revise the hyperlinks, revise the

table, and make the matching responses a list (be sure to use “Styles” as appropriate)

• Discuss the changes with your colleagues


http://www.livescience.com/33523-color-symbolism-meanings.html

Color

https://www.youtube.com/watch?v=dGNjvNlts0Y


https://www.wowza.com/uploads/images/closed-captions-430x240.png

Captioning

Definitions

Captions – text that appears on a video; contains dialogue and audio cues for music, sound effects, and so forth.

Subtitles – text that appears on a video and normally contains just a transcription of the dialogue.

Transcripts – provide content for web audio or video that contain descriptions, explanations, and comments.

Types of Captioning

Types of Captioning

• Closed – captions can be turned on or off; not visible until activated by the user.

• Open – captions are always visible.

Web Accessibility Guidelines

• Synchronized• Verbatim• Equivalent• Sentences• Accessible• Multimedia • Web multimedia

Practical Tips and Guidelines

• Appear on-screen long enough to be read• Limit to no more than two lines• Synchronized with spoken words• Speakers should be identified • Punctuation is used to clarify meaning• Spelling is correct• Sound effects included• All words are captioned• Use italics for emphasis

Amara

https://www.youtube.com/watch?v=aQ-xe-GSjdA

http://ep.yimg.com/ay/yhst-136450996553589/gender-neutral-restroom-tactile-braille-signs-9-9-10.gif

https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcScsFfMbBc1yotU-fiXDxEbn8LuhOwbM5jQRYVFU6_MQp9IH7XI

Achieving Accessibility: Tips and Strategies to Design Content for all Learners

@voelkerc | [email protected]

http://jeremiahsjourney.org.uk/wp-content/uploads/2015/05/Tanzania-Kilimanjaro-6.jpg