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