Ten Tips to Make Your Online Content More Accessible A Presentation for eLearning Consortium of Colorado.
Download
Report
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