Date post: | 19-Dec-2015 |
Category: |
Documents |
Upload: | candace-scott |
View: | 214 times |
Download: | 0 times |
1 A Presentation for eLearning Consortium of Colorado
Ten Tips to Make Your Online Content More Accessible
2<img src=“questionMark.gif" alt=“Question Mark“>
WHY MAKE CONTENT ACCESSIBLE?
3
What are the State of Colorado Accessibility Standards
Federal Law State Law/Guidelines Grant Funded Centers Institutional Implementation and Adoption Assistive Technology Technology Information on How….More Accessible Tools Attitudes Time
MANY PIECES TO THE PUZZLE
4
Cost Time Knowledge Training Ensuring Compliance
CONCERNS
Accessible Content Universal Design Right Thing to Do Avoid Potential Lawsuits Will Make You Happy
BENEFITS
BENEFITS VS LIMITATIONS FOR CREATING ACCESSIBLE CONTENT
5
1. National Center for Education Statistics
Eleven percent of undergraduates reported having a disability in 2007–081
Learning disabilityVisual handicapHard of hearingDeafnessSpeech disabilityOrthopedic handicapHealth impairment
TYPES OF DISABILITIES
6
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
VOCABULARY
7Complete list of 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.
SECTION 508 1194.22 GUIDELINES
8
Section 508 Refresh Information
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.
SECTION 508 REFRESH (PROPOSED FEB. 2015)
9
ALT Text Consistent Page Design Captioning Tables Color to Convey Meaning Links Contrast Keyboard Validate Your Work Universal Design for Learning
TOP TEN OVERVIEW ITEMS
10
WCAG 2.0: 1.1.1 SECTION 508 1194.22: (a)
Example: <img src="filename.jpg" alt="Alternative description goes here">
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
CREATING ALT TEXT GUIDELINES
11
TIP: Decorative images often never need alt text and can be null by using alt=“” or use CSS to make a background image.
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…”
ALT TEXT USAGE
12
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.
ALT TEXT EXAMPLE 1
13
What do you think is the correct alt attribute for the image?
A. “Professor pointing at important information”B. “A white haired professor with a book in one hand
pointing in the direction of the text.”C. Use a null or empty alt attribute. alt=“” D. “Professor pointing with open book.”
QUIZ 1
14
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.
ALT TEXT EXAMPLE 3
15
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
CREATING CONSISTENT PAGE DESIGN
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
17
WCAG 2.0: 1.2SECTION 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.
CAPTIONING
18How to install Fireshot Turn the closed captions on – they are never perfect and should be edited.
YOUTUBE CAPTIONING EXAMPLE
19
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
CREATING ACCESSIBLE TABLES
20
JAWS SCREEN READER OF TABLE
21
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.”
AVOID COLOR TO CONVEY MEANING
22
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
CREATING ACCESSIBLE LINKS
23JAWS Screen Reader YouTube Video of the J.K. Rowling Website
INCORRECT LABELING OF LINKS ON A WEBSITE
24
WCAG 2.0: 1.4.3QM: 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
CREATING ACCESSIBLE CONTRAST
25
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”
USING ONLY A KEYBOARD TO NAVIGATE
26
Standards and Guides Accessibility Checks Accessibility Check Lists Web Browser Integrated Tools Accessibility Tools
VALIDATING YOUR WORK USING A VARIETY OF TOOLS
27
Three Primary Principles Provide multiple means of Representation
The ‘what’ of learning Provide multiple means of Expression
The ‘how’ of learning Provide multiple means of Engagement
The ‘why’ of learning
The Focus is on Flexibility
UNIVERSAL DESIGN FOR LEARNING
28
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 low-vision 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
A FEW BEST PRACTICES FOR DESIGN
29
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.
A FEW BEST PRACTICES INSTRUCTIONAL DESIGN
30
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
BROWSER INTEGRATED TOOLS
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
32
WebAim Wave Functional Accessibility Evaluator Cynthia Says HTML Tidy Vischeck Color Blindness Check
ACCESSIBILITY CHECK
33
W3C Accessibility Checklist 2.0 WCAG Printable Accessibility Checklist WebAim 508 Checklist WebAim WCAG 2.0 Checklist Web2Access VPAT
ACCESSIBILITY CHECKLISTS
34
Juicy Studios Readability Tests JAWS 40 Minute Demo Version Accessible YouTube Player Thunder NVDA
ACCESSIBILITY TOOLS
35
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
ACCESSIBILITY TRAINING