Transcript Ten Tips to Make Your Online Content More Accessible A Presentation for eLearning Consortium of Colorado.

Ten Tips to Make Your Online
Content More Accessible
1
A Presentation for eLearning Consortium of Colorado
WHY MAKE CONTENT ACCESSIBLE?
<img src=“questionMark.gif" alt=“Question Mark“>
2
MANY PIECES TO THE PUZZLE
Federal Law
 State Law/Guidelines
 Grant Funded Centers
 Institutional Implementation and Adoption
 Assistive Technology
 Technology
 Information on How….More Accessible
 Tools
 Attitudes
 Time

3
What are the State of Colorado Accessibility Standards
BENEFITS VS LIMITATIONS FOR CREATING ACCESSIBLE CONTENT
BENEFITS
CONCERNS
Accessible Content
 Universal Design
 Right Thing to Do
 Avoid Potential Lawsuits
 Will Make You Happy


Cost
 Time
 Knowledge
 Training
 Ensuring Compliance
4
TYPES OF DISABILITIES
Learning
disability
Visual handicap
Hard of hearing
Deafness
Speech disability
Orthopedic handicap
Health impairment
Eleven percent of undergraduates
reported having a disability in 2007–081
5
1.
National Center for Education Statistics
VOCABULARY
WCAG 2.0 – Web Content Accessibility Guidelines
 W3C – World Wide Web Consortium
 Section 508, Subpart B - Web-based intranet and
internet information and applications.
 QM – Quality Matters
 VPAT – Voluntary Product Accessibility Template
 ALT Text [Not Tag] – Alternative Text
 CSS – Cascading Style Sheet

6
SECTION 508 1194.22 GUIDELINES






(a) A text equivalent for every non-text element
shall be provided
(e.g., via "alt", "longdesc", or in element content).
(b) Equivalent alternatives for any multimedia presentation shall be
synchronized with the presentation.
(c) Web pages shall be designed so that all information conveyed
with color is also available without color, for example from context
or markup.
(d) Documents shall be organized so they are readable without
requiring an associated style sheet.
(g) Row and column headers shall be identified for data tables.
(h) Markup shall be used to associate data cells and header cells for
data tables that have two or more logical levels of row or column
headers.
7
Complete list of Section 508 - 1194.22 Guidelines
SECTION 508 REFRESH (PROPOSED FEB. 2015)

The five major issues addressed in this NPRM are:





(a) scope of covered electronic content
(b) incorporation by reference of WCAG 2.0
(c) relationship between functional performance criteria and
technical requirements
(d) coverage of real-time text
(e) interoperability requirements for assistive technology.
8
Section 508 Refresh Information
TOP TEN OVERVIEW ITEMS
ALT Text
 Consistent Page Design
 Captioning
 Tables
 Color to Convey Meaning
 Links
 Contrast
 Keyboard
 Validate Your Work
 Universal Design for Learning

9
CREATING ALT TEXT GUIDELINES
 WCAG 2.0: 1.1.1
 SECTION 508 1194.22: (a)
Provide text alternatives for all non-text content
 ALT Text is Clear
 ALT Text is Concise
 ALT Text is Contextual
 Always determine Content and Function

Example: <img src="filename.jpg"
alt="Alternative description goes here">
10
ALT TEXT USAGE
Is the image providing important contextual
information?
 Is the image providing any function?
 Are you avoiding redundancy?
 Are you not using “a picture of…” or “image of…”

TIP: Decorative images often never need alt text
and can be null by using alt=“” or use CSS to
make a background image.
11
ALT TEXT EXAMPLE 1
Organizational Development (OD)
Organizational Development (OD) is a fairly new
discipline with roots in psychology, management, and
sociology. When considering disciplines such as
philosophy or sociology…OD is in its infancy. Many OD
founders are still alive or have only passed on in recent
years. OD continues to be an ever growing and exciting
field.
The pace of change is ever increasing and organizations
will either adapt or atrophy. Each year the level of change
increases exponentially. Consider changes that have
taken place in recent years to items like the telephone,
vision correction, Internet banking, and even pizzas.
Change is inescapable. Environmental demands can be
placed on organizations from a variety of external
pressure points; government at all levels, labor relations,
sources of supply, consumers, competition, technology,
and shareholders.
12
QUIZ 1
What do you think is the correct alt attribute for the
image?
A.
B.
C.
D.
“Professor pointing at important information”
“A white haired professor with a book in one hand
pointing in the direction of the text.”
Use a null or empty alt attribute. alt=“”
“Professor pointing with open book.”
13
ALT TEXT EXAMPLE 3
Virginia Henderson has been described as the “The
Nightingale of Modern Nursing” or “Modern-Day Mother
of Nursing.” She was born on November 30, 1897.
Photo credit: Virginia Commonwealth University Library.
14
CREATING CONSISTENT PAGE DESIGN
 WCAG 2.0: 1.3
 SECTION 508 1194.22: (d)
Organize content logically
 Use heading elements
 One H1 per page
 Follow sequentially H1 – H6
 Use CSS to manage heading and paragraph size if
possible.
 Use headings to outline organizational structure
 Simplifies page navigation
 Use CSS templates from D2L or your LMS

15
EXAMPLES OF INCONSISTENT PAGE DESIGN
An example of Bad Design
 An example of really bad over the top design
 Why are these considered bad design?
 What should be done differently?

16
For more examples visit Web Pages that Suck
CAPTIONING
 WCAG 2.0: 1.2
 SECTION 508, 1194.22: (b)
 QM: 8.2
Equivalent and Synchronized
 Closed vs. Open Captioning
 Transcripts – Publisher, Free, Databases, and Paid
 Internet Movie Script Database
 Key Guidelines and Preferred Techniques (PDF)
 YouTube Captioning


Never perfect – must edit using the caption editor.
17
YOUTUBE CAPTIONING EXAMPLE
How to install Fireshot Turn the closed captions on – they are never
perfect and should be edited.
18
CREATING ACCESSIBLE TABLES
 WCAG 2.0: 1.3.1
 SECTION 508, 1194.22: (g) (h)
Row and column headers for data tables
 Avoid using tables for layout of pages
 Use <th scope=“col”>Content</th>
 Use <th scope=“row”>Content</th>
 Use a summary attribute <table summary=“content”>
 Keep tables simple – avoid spanning
 Avoid tables with two or more levels

19
JAWS SCREEN READER OF TABLE
20
AVOID COLOR TO CONVEY MEANING
 WCAG 2.0: 1.4.1
 SECTION 508, 1194.22: (c)
Color is not used as the sole method for conveying
content.
 Provide alternatives for action, responses, and
distinguishing content.
 Example 1: Provide Directions



“Required fields are in red”.
Example 2: Draw Attention

“Item highlighted in red might be on the exam.”
21
CREATING ACCESSIBLE LINKS
 WCAG 2.0: 2.4
Use descriptive information for hyper links
 Avoid “Click Here” link text
 Use text that makes sense when read out of context
 Avoid wording like – “Find the link at the bottom of the
page” or “Find the link at the top”
 Need to make sense out of context
 Place important contextual information first in the link

22
INCORRECT LABELING OF LINKS ON A WEBSITE
JAWS Screen Reader YouTube Video of the J.K. Rowling Website
23
CREATING ACCESSIBLE CONTRAST
 WCAG 2.0: 1.4.3
 QM: 8.3, 8.4
Provide sufficient color contrast
 WCAG 2.0 AA requires a contrast ratio of 4.5:1 for
normal text and 3:1 for large text
 Contrast between text and the background
 Text in logo or brand name has no minimum contrast
requirement
 Text in graphics for decoration only has no minimum
 Rule of thumb - Avoid text as images
 Print page out in grayscale

24
USING ONLY A KEYBOARD TO NAVIGATE
 WCAG 2.0: 2.1
 SECTION 508, 1194.22: (o)
 QM: 8.1, 8.3, 8.4
Tab and Shift + Tab
 Links should be Keyboard Accessible
 Install Screen Reader and Turn Off Monitor
 Keep navigation consistent
 Avoid Pop-Up windows if at all possible
 Take the “No Mouse Challenge”

25
VALIDATING YOUR WORK USING A VARIETY OF TOOLS
Standards and Guides
 Accessibility Checks
 Accessibility Check Lists
 Web Browser Integrated Tools
 Accessibility Tools

26
UNIVERSAL DESIGN FOR LEARNING

Three Primary Principles

Provide multiple means of Representation


Provide multiple means of Expression


The ‘how’ of learning
Provide multiple means of Engagement


The ‘what’ of learning
The ‘why’ of learning
The Focus is on Flexibility
27
A FEW BEST PRACTICES FOR DESIGN
Best Practice
Benefits to Students w/
Disabilities
Benefits to all Students
Use descriptive
information for hyper
links
Screen readers read the link
description, instead of ‘click here’
Provides user greater
representation of link content
Choose appropriate font
Users who are color blind or lowvision have a difficult time with
color and type of font
Sans serif fonts and appropriate
color fonts reduce eye strain
and fatigue
When using color to
convey meaning include
additional clues for the
context and meaning
Individual using a screen reader
will not be able to ‘see’ what the
color coding means without
additional information
Provides multiple
representation of the content to
students
28
A FEW BEST PRACTICES INSTRUCTIONAL DESIGN
Best Practices
Benefits to Students w/
Disabilities
Benefits to all Students
Flexible Formatting - Provide full
text of content but also PDF
documents to be downloaded.
HTML tends to be easier for
screen readers, but other
users may find reading on a
screen difficult.
Gives users options to choose
ways to receive information.
Users can choose to print or
read on the screen.
Organize content logically H1,
H2, H3, H4 or text.
Organized content makes it
easy for a individual using
JAWS to find appropriate
content.
Organized content makes it
easy for anyone navigating a
website.
Appeal to Multiple Learning
Styles
Allows users with disabilities
full access to course content
Provides users with multiple
avenues for representation of
content.
29
BROWSER INTEGRATED TOOLS
Chrome Accessibility Extensions
 Firefox Accessibility Toolbar
 Firefox Wave Toolbar
 Firefox Juicy Studio Accessibility Toolbar
 Firefox Fangs – Screen Reader Emulator
 Web Accessibility Toolbar for IE - 2012

30
ACCESSIBILITY STANDARDS AND GUIDES





Section 508 Web-based Standards
W3C Accessibility Guidelines 2.0
Web Accessibility Initiative (WAI)
Usability Guidelines Book
Captioning Key – Guidelines and Preferred Techniques
31
ACCESSIBILITY CHECK
WebAim Wave
 Functional Accessibility Evaluator
 Cynthia Says
 HTML Tidy
 Vischeck Color Blindness Check

32
ACCESSIBILITY CHECKLISTS

W3C Accessibility Checklist 2.0
WCAG Printable Accessibility Checklist
WebAim 508 Checklist
WebAim WCAG 2.0 Checklist
Web2Access

VPAT




33
ACCESSIBILITY TOOLS





Juicy Studios Readability Tests
JAWS 40 Minute Demo Version
Accessible YouTube Player
Thunder
NVDA
34
ACCESSIBILITY TRAINING

WebAIM

Microsoft Accessibility Training

JAWS Screen Reader Demo of Blackboard

Acrobat Accessibility Training Resources

Blackboard Universal Design and Accessibility Online Course

D2L Resource Center

Web Accessibility MOOC for Online Educators
35