bccampus: open textbook accessibility webinar

Open Textbook Accessibility• Amanda Coolidge and Josie Gray• Victoria B.C.• December 6, 2016

open.bccampus.ca

Web Content Accessibility Guidelines (WCAG)

Four Principles of Web Accessibility

1. Perceivable 2. Operable 3. Understandable4. Robust

Understanding Web Accessibility: http://courses.idrc.ocadu.ca/understandinga11y/How to Meet WCAG 2.0: https://www.w3.org/WAI/WCAG20/quickref/

open.bccampus.ca

Screen Readers

NVDA: http://www.nvaccess.org/NVDA Keyboard Shortcuts: http://webaim.org/resources/shortcuts/nvda

open.bccampus.ca

“As a result of the ionic character, silicon becomes a cation (with a charge of +4) and oxygen becomes an anion (with a charge of –2).”

open.bccampus.ca

Document Structure - Headings

In addition to facilitating formatting and styling, assigning heading levels to the subsections of a chapter allows a screen reader user to easily jump from heading to heading.

Sample Markup:

<h1>Chapter 1: An Introduction to Sociology</h1><h3>Learning Objectives</h3><h2>Introduction</h2><h2>1.1 What is Sociology</h2><h3>What are Society and Culture? Micro, Macro, and Global Perspectives</h3>

open.bccampus.ca

Accessible Links

Descriptive• The text of a link should make sense when heard out of context

Ex 1. “Click here for practise questions.” vs “Complete the practise questions.”Ex 2. “Open Google: https://www.google.ca” vs “Open Google: https://google.ca No new windows or tabs

• Links should not open to a new window or tab but in the same page• replace target=“_blank” with target=“_self”, or delete target information

Ex 3. <a href=“https://www.youtube.com” target=“_self”>YouTube</a> <a href=“https://www.uvic.ca”>UVIC Homepage</a>

If opening a new window is unavoidable• If opening a new window in unavoidable, make it clear in the link what will happen

Ex 4. <a href=“https://google.ca”>Google [New Window]</a>• If the link opens an unexpected page format, make that clear also

Ex 5. <a href=“https://www.uvic.ca/humanities/history/assets/docs/Sample%20Qualicum%20Program%20-%202014%20Conference.pdf”>Sample Qualicum Program [PDF]</a>

open.bccampus.ca

Colour and Accessibility

1. Using colour to convey information.2. Text- or image based content on a coloured or textured background3. Links

0

1

2

3

4

5

6

Series 1Series 2Series 3

0

1

2

3

4

5

6

Series 1Series 2Series 3

open.bccampus.ca

Colour Contrast

Download the Colour Contrast Analyzer: www.paciellogroup.com/resources/contrastanalyser/

open.bccampus.ca

Colour Contrast

Download the Colour Contrast Analyzer: www.paciellogroup.com/resources/contrastanalyser/

Accessible Images

open.bccampus.ca

Alt Tags and Screen Readers

alt=“Rows of individual office cubicles”

open.bccampus.ca

Decorative/Non-Essential Images

When not to include an alt tag

Image courtesy of Wikimedia Commons.

alt="" Vs.alt=""""

Source: Introduction to Sociology 2nd Canadian Edition

open.bccampus.ca

Long Descriptions

Alternate text description: A twitter post reading: 5 ways to help: call Egypt consul in SF, host petition on your blog, write a letter 2 editor, Digg the CNN story, email. In the replies, people are calling on authorities to release Mohammed, who was still missing.

Limit alt tags to 100 characters (including spaces). If an image requires a longer description, provide a link to a long description.

open.bccampus.ca

Figure 8.9 These Twitter updates…. On the political stage. <a href=“#fig8.9”>[Long Description]</a> (Photo courtesy of….)

<strong id="fig8.9">Figure 8.9 Long Description:</strong> A twitter post reading: 5 ways to help: call Egypt consul in SF, host petition on your blog, write a letter 2 editor, Digg the CNN story, email. In the replies, people are calling on authorities to release Mohammed, who was still missing. <a href="#attachment_119">[Return to Figure 8.9]</a>.

Visual Appearance Text Editor

Images of Tables and Graphs

open.bccampus.ca

Tables and Graphs – Visual vs. Data

Graphs showing trends – Prioritizing the visual

Image courtesy of AltimeterGroup/Flikr

alt="Statistics show that divorce rates in Maine and the consumption of margarine fell and rose at the same rate"

Figure 2.7. Correlation does not imply causation

open.bccampus.ca

Tables and Graphs – Visual vs. Data

Graphs showing trends and data – Providing options

alt=“Marriage satisfaction. Long description available."

Source: Introduction to Sociology 2nd Canadian Edition

open.bccampus.ca

Tables and Graphs – Visual vs. Data

Graphs showing trends and data – Providing options

open.bccampus.ca

Tables and Graphs – Visual vs. Data

Replacing Images of Tables with HTMLReplace images of tables and graphs with HTML when there is nothing to be gained visually by the image.

Source: Introduction to Sociology 2nd Canadian Edition

open.bccampus.ca

Tables and Graphs – Visual vs. Data

Replacing Images of Tables with HTML

Accessible Tables

Tags<caption><thead><th><tbody><td>Attributes

colspan=“x”rowspan=“x”class=“source”

open.bccampus.ca

Accessible Table Markup<table><caption>Table 10.1 Statistics such as infant mortality rate and life expectancy vary greatly by country of origin.</caption><thead> <tr><th>Country</th></th>Infant Mortality Rate</th><th>Life Expectancy</th></tr></thead><tbody><tr><td>Canada</td><td>4.9 deaths per 1,000 live births.</td><td>81 years</td></tr><tr><td>Democratic Republic of the Congo</td><td>17.2 deaths per 1,000 live births.</td><td>55 years</td></tr></tbody></table>

open.bccampus.ca

Layout Table Markup<table><tbody><tr><td><strong>Rank<strong></td><td><strong>Year<strong></td><td><strong>Month<strong></td><td><strong>Date<strong></td><td><strong>Stage (m) <strong></td><td><strong>Discharge (m3/s) <strong></td></tr><tr><td>1</td><td>1948</td><td>May</td><td>31</td><td>11.0</td><td>15,200</td></tr>…</tbody></table>

open.bccampus.ca

Option to Skip a Table<table><caption>Table 20.1 Varying Fertility… by Country<caption><thead> <tr><td colspan=“5”><a href=“#table20.1”>[Skip Table]</a></td></tr><tr><th>Country</th></th>Population (in millions)</th><th>Fertility Rate</th><th>Mortality Rate</th><th>Sex Ratio Male to Female</th></tr></thead><tbody>… </tbody></table><p id=“skiptable20.1”>As Table 20.1 illustrates, countries vary greatly….

WAVEWeb Accessibility Evaluation Tool

http://wave.webaim.org/

open.bccampus.ca

open.bccampus.ca

open.bccampus.ca

open.bccampus.ca

open.bccampus.ca

open.bccampus.ca

open.bccampus.ca

open.bccampus.ca

Thank YouQuestions?

open.bccampus.caJosie.gray@bccampus.ca