bccampus: open textbook accessibility webinar
TRANSCRIPT
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
