Enhancing Online Content Accessibility: A Comprehensive Guide

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

WHY MAKE CONTENT ACCESSIBLE? <img src= questionMark.gif" alt= Question Mark > 2

MANY PIECESTOTHE 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 California 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

TYPESOF 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 08 1 5 1National 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. 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. 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 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 WCAG 2.0: 1.3 SECTION 508 1194.22: (d) 15

EXAMPLESOF 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

WCAG 2.0: 1.2 SECTION 508, 1194.22: (b) QM: 8.2 CAPTIONING 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. How to install Fireshot Turn the closed captions on they are never perfect and should be edited. 18

WCAG 2.0: 1.3.1 SECTION 508, 1194.22: (g) (h) CREATING ACCESSIBLE TABLES 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 READEROF TABLE 20

WCAG 2.0: 1.4.1 SECTION 508, 1194.22: (c) AVOID COLORTO CONVEY MEANING 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 LABELINGOF LINKSONA WEBSITE 23 JAWS Screen Reader YouTube Video of the J.K. Rowling Website

WCAG 2.0: 1.4.3 QM: 8.3, 8.4 CREATING ACCESSIBLE CONTRAST 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

WCAG 2.0: 2.1 SECTION 508, 1194.22: (o) QM: 8.1, 8.3, 8.4 USING ONLYA KEYBOARD TO NAVIGATE 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 USINGA VARIETYOF TOOLS Standards and Guides Accessibility Checks Accessibility Check Lists Web Browser Integrated Tools Accessibility Tools 26

UNIVERSAL DESIGNFOR LEARNING 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 27

A FEW BEST PRACTICESFOR 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 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 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 STANDARDSAND 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