Creating Accessible Web Content
IIPS CONFERENCE
SANFORD, NC
Amy Netzel
Accessibility Technologist
Wake Technical Community College
abnetzel@waketech.edu
NCCCS Accessibility: A Five Year Plan
Objectives
• Understand the underlying purpose and usefulness of accessibility
• Become familiar with the Web Content Accessibility Guidelines as a
tool for analyzing your website
• Apply accessible design concepts to web content in SharePoint
• Use tools and resources to help develop a plan for addressing
accessibility with your websites
Accessibility Misnomers (#1)
1.
If I can read my site, it’s accessible. People who are sight-disabled
can just have someone read the information to them.
A Lesson in Usability
Making Change in Compliance
Screen readers?
Accessibility Misnomers can be 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.
A Web Page: Visual Representation
A Web Page: Code Representation
Navigating Web Pages
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
Accommodations vs. Accessible Content
ACCOMMODATION
ACCESSIBLE WEB 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)
• Proper color contrast
• Proper hyperlinks
• Named frames, buttons, form fields
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.
My site is accessible because it has a logo.
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.
My site is accessible because it has a logo.
4.
It’s too hard. I don’t have time to do it.
Accessibility Misnomers (#5)
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.
My site is accessible because it has a logo.
4.
It’s too hard. I don’t have time to do it.
5.
It doesn’t really matter; it’s a passing phase.
Accessibility Creates Access
Who Accesses Your Sites?
A Broad Spectrum of People! Including:
• Sight impaired
• Hearing impaired
• Mobility impaired
• Cognitively impaired
Introducing WCAG 2.0
Levels of Guidance
• Four principles of accessibility
◦ Guidelines for each principle
• Success criteria for each guideline
Four Principles
• Perceivable
• Operable
• Understandable
• Robust
Perceivable
Operable
https://arena.yourlondonlibrary.net/web/bexley/access-to-services3
Understandable
Robust
Getting to Know WCAG 2.0
http://www.w3.org/TR/WCAG20/#guidelines
Guidelines for Perceivable
• 1.1 Provide text alternatives for any non-text content so that it can be
changed into other forms people need, such as large print, braille,
speech, symbols or simpler language.
• 1.2 Provide alternatives for time-based media.
• 1.3 Create content that can be presented in different ways (for
example simpler layout) without losing information or structure.
• 1.4 Make it easier for users to see and hear content including
separating foreground from background.
Guideline 1.1 Success Criteria
Looking at the Big Picture
4 Principles
(POUR)
12 Guidelines
• 61 Success Criteria
Where to Start?
Consider defining your site’s level of conformance
WCAG 2.0 Level AA
Locating Conformance Levels
Conformance Level Identified
Table: A Sampling of Conformance Levels
Guideline 1.2
Level A
Level AA
Level AAA
Provide Alternatives for
time-based media
Audio
Prerecorded
• Transcript
Not applicable
Live
• Transcript
Provide Alternatives for
time-based media
Video
(with no audio)
Prerecorded
• Transcript OR
• Audio-track that
presents equivalent
information
Not applicable
Prerecorded
• Transcript
Provide Alternatives for
time-based media
Prerecorded
Live
Prerecorded
•
•
•
•
•
•
Video
(with audio)
Captions AND
Transcript OR
Audio Description
Captions
Prerecorded
•
Audio Description
•
Sign language
Extended audio
description
Transcript
Low-hanging Fruit of Web Content
• Structured Headings
• Alternative Text
• Clear Hyperlinks
• Color Contrast
• Name Form Fields
• Accessible Videos
Headings
• h1, h2, etc.
• Provide structure, like an outline
• Use only one h1 per page
• Can use CSS to format them
Table: Addressing Alternative Text
Type of Image
Appropriate Alternative Text
Simple/Decora
tive
A few words to replace image
OR
“ “ (null alt text) – must be done in the HTML
Hyperlink
A few words to replace image, also indicate to where it
links
Complex image
A few words to replace the image, plus a long description
in a separate text document. Link to text document.
Writing Hyperlink Text
• Where is the link going?
◦ Name of site
• What will be viewed?
◦ Why user is going
• What else happens?
◦ If link opens in a new window, say that in the
hyperlink text
Color Contrast
Avoid Conveying Information with Color
Name Form Fields
Accessible Videos
Misnomers Reframed (#1)
If I can read my site, it’s accessible to me.
People who are sight impaired can use
the structural design I built in to navigate
the content using a screen reader.
Misnomers Reframed (#2)
We have a Disabled Student Services
office, they’ll let me know when I
have a student who needs an
accommodation. But, I’ll make sure
all of my students can access my
online content.
Misnomers Reframed (#3)
Branding elements, like a logo, don’t
make for an accessible site. Following
the Web Content Accessibility
Guidelines makes a website
accessible.
Misnomers Reframed (#4)
Granted, because it seems like there’s
a lot to do, accessibility may seem
hard, but taking it one step at a time
makes it more manageable. I’m finding
that once I start applying a new
concept, it starts to come
automatically.
Misnomers Reframed (#5)
Creating accessible web content does
matter. It’s something we do to
remove what often turns out to be
barriers for many people when they
visit websites.
Additional Resources
• Simple checklist
http://webaim.org/standards/wcag/checklist
• Color Contrast Analyzer
http://www.paciellogroup.com/resources/contrastanalyser/
• WebAIM
http://webaim.org/articles/pour
Thank you
Amy Netzel
abnetzel@waketech.edu