Creating Accessible Content NC3ADL CONFERENCE NASH COMMUNITY COLLEGE APRIL 1, 2015 Amy Netzel and...

Creating Accessible Content NC3ADL CONFERENCE

NASH COMMUNITY COLLEGE

APRIL 1, 2015

Amy Netzel and Darrin EvansAccessibility Technologists

eLearning Support DepartmentWake Technical Community College

NCCCS Accessibility: A Five Year Plan

Objectives

• Understand the underlying purpose and usefulness of accessibility

• Understand how to create accessible content, images, and hyperlinks

• Apply accessibility concepts to a PowerPoint presentation

• Apply accessibility concepts to a Word document

Accessibility Misnomers (#1)

1. If I can read my content, it’s accessible. People who are sight-disabled can just have someone read the information to them.

Making Change in Compliance

What’s a screenreader?

Robot Image credit: theverge.com

Reading Device Image credit: lifehacker.com

Accessibility Misnomers are Unintentional

1. If I can read my site, it’s accessible. People who are sight-disabled can just have someone read the information to them.

Navigating Web Sites with a Screen Reader

Visual Representation of a Document

Navigating Documents with a Screenreader

Accessibility Misnomers (#2)

1. If I can read my site, it’s accessible. People who are sight-disabled can just have someone read the information to them.

2. We have a Disabled Student Services office, they’ll take care of anyone who has a disability.

Physical/Structural Accessibility

Accessibility Creates Access for All

Accommodations vs. Accessible Content

ACCOMMODATION• Note taker

• Extra time on a test

• Sign language interpreter

• Braille textbooks

• Assistive technology (such as a screen magnifier)

ACCESSIBLE ONLINE CONTENT

• Properly structured

• Text alternatives for images and multimedia

• Captioned videos

• Proper color contrast

• Proper hyperlinks

Accessibility Misnomers (#3)

1. If I can read my site, it’s accessible. People who are sight-disabled can just have someone read the information to them.

2. We have a Disabled Student Services office, they’ll take care of anyone who has a disability.

3. It’s too hard. I don’t have time to do it.

Accessibility Misnomers (#4)

1. If I can read my site, it’s accessible. People who are sight-disabled can just have someone read the information to them.

2. We have a Disabled Student Services office, they’ll take care of anyone who has a disability.

3. It’s too hard. I don’t have time to do it.

4. It doesn’t really matter; it’s a passing phase.

Who Accesses Your Content?

A broad spectrum of people! Including:• Sight impaired• Hearing impaired• Mobility impaired• Cognitively impaired

Picking the Low Hanging Fruit

• Consider Color Contrast

• Structure content◦ Headings◦ Lists

• Compose Meaningful Alternative Text for Images

• Informative Hyperlinks

• Use Captioned Videos

WCAG 2.0

Color Considerations: Color Vision Deficiency

NORMAL VISION

• Red text◦ Assignments due on Friday!

• Green text◦ Everyone did well on the exam.

• Blue text◦ The two cities with higher populations

are labeled in blue:◦ Los Angeles◦ Milwaukee◦ Chicago◦ St. Louis

COLOR VISION DEFICIENCY

• Red text◦ Assignments due on Friday!

• Green text◦ Everyone did well on the exam.

• Blue text◦ The two cities with higher populations

are labeled in blue:◦ Los Angeles◦ Milwaukee◦ Chicago◦ St. Louis

Solutions for Color Vision Deficiency

INACCESSIBLE

• Red text◦ Assignments due on Friday!

• Green text◦ Everyone did well on the exam.

• Blue text◦ The two cities with higher populations

are labeled in blue:◦ Los Angeles◦ Milwaukee◦ Chicago◦ St. Louis

USE OF ADDITIONAL FORMATTING

• Red text◦ Assignments due on Friday!

• Green text◦ Everyone did well on the exam.

• Blue text◦ The two cities with higher populations

are labeled in blue:◦ Los Angeles (10 million)◦ Milwaukee (594,833)◦ Chicago (2.7 million)◦ St. Louis (319,394)

Color Solutions: Conveying Information

Color Situations: Avoid Vibrating Colors

Structuring Content (documents)

Screen Reader Navigation

Structuring Content (presentations)

Incorporating Images• Consider purpose of image

◦ Decorative◦ Instructional

• Alternative text (text representation)◦ 5-7 words

• Long description (in addition to alternative text)◦ PowerPoint - Include in Notes area◦ Word - Include in near image

Recapping Text Representations (for Images)

DECORATIVE

1. Alternative text

INSTRUCTIONAL

1. Alternative text

2. Long description for additional instructional information

Text Representations for Multimedia

VIDEO

• Closed captioned

• Provide text transcript

• Audio describe, when needed

AUDIO (PODCAST)

• Post a text transcript near the audio file or hyperlink

Hyperlinks1. Where is the link going?

2. What will be viewed? (Why is the link provided?)

3. What happens when the link is clicked?

Accessible Videos

Low Hanging Fruit Recap

•Consider Color Contrast •Structure content

◦ Headings◦ Lists

•Compose Meaningful Alternative Text for Images• Informative Hyperlinks•Use Captioned Videos

Accessible PowerPoint Presentations

Experiences of a Screen Reader User

• JAWS Meets a PowerPoint 2010 Presentation – After (opens in a new window)

Direct link: http://www.youtube.com/watch?v=fTi_k2-Ir-0

• JAWS Meets a PowerPoint 2010 Presentation – Before (opens in a new window)Direct link: https://youtu.be/_ARFBy2StiQ?t=33s

Accessible Documents

• Applying Structure◦ Headings◦ Lists◦ Tables

• Color consideration

• Hyperlinks

• Alternative Text

Recapping the Low Hanging Fruit

• Consider Color Contrast

• Structure content◦ Headings◦ Lists

• Compose Meaningful Alternative Text for Images

• Informative Hyperlinks

• Use Captioned Videos

Contact Information

Amy Netzelabnetzel@waketech.edu

919-866-5631

Darrin Evansdaevans3@waketech.edu

919-532-5753