Creating Accessible Content
NC3ADL CONFERENCE
NASH COMMUNITY COLLEGE
APRIL 1, 2015
Amy Netzel and Darrin Evans
Accessibility Technologists
eLearning Support Department
Wake 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 sightdisabled 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
ACCESSIBLE ONLINE CONTENT
• Note taker
• Properly structured
• Extra time on a test
• Text alternatives for images and
multimedia
• Sign language interpreter
• Braille textbooks
• Assistive technology (such as a
screen magnifier)
• 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
Hyperlinks
1. 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 Netzel
abnetzel@waketech.edu
919-866-5631
Darrin Evans
daevans3@waketech.edu
919-532-5753