Definition 1

an approach to teaching that consists of the proactive design and use of inclusive instructional and evaluation strategies. This approach provides academic access to a broad range of learners, including students with disabilities, while:

• maintaining academic standards […]
• reducing the need to having to retrofit after a course is already underway[footnote]University of Victoria, "Universal Instructional Design (UID)," Centre for Accessible Learning, accessed March 27, 2018, https://www.uvic.ca/services/cal/staff/universal-instructional-design/index.php.[/footnote]

Definition 2

an approach to designing course instruction, materials and content to benefit people of all learning styles without adaptation or retrofitting. UID provides equal access to learning, not simply equal access to information. UID allows the student to control the method of accessing information while the instructor monitors the learning process and initiates any beneficial methods… It should be noted that UID does not remove academic challenges; it removes barriers to access.[footnote]Ohio State University, "Universal Design for Learning," Partnership Grant: Fast Facts for Faculty, accessed March 27, 2018, https://ada.osu.edu/resources/fastfacts/Universal_Design.htm.[/footnote]

Why Universal Design?

• Do I have visual materials that present core concepts that not all students may be able to see or understand?
• Do I have multimedia materials (e.g., audio, video) that present core concepts that not all students may be able to be hear, see, or otherwise access?
• Do I have documents that present core concepts in a format that not all students may be able to access?

Mark

Jacob

• Screen reader (JAWS on his laptop, VoiceOver on his iPhone)
• Victor Reader Stream
• Audio recorder (to take notes)
• Refreshable Braille display

Diana

Diana is retraining to be a personal coach after she experienced vision loss and was unable to continue working as a bus driver. She is 48 years old and taking many of her classes online. She lives with her husband.

• ZoomText
• TextAloud text to speech software

Trish

• iPad
• Motorized wheelchair

Ann

Steven

• CART (communication access real-time translation) for lectures
• Captions
• Video chat

Media Attributions

• Jacob: "WFE003: Jacob" by Rosenfeld Media. © Creative Commons Attribution 2.0 Generic Licence.
• Trish: "WFE002: Emily" by Rosenfeld Media. © Creative Commons Attribution 2.0 Generic Licence.
• Steven: "WFE005: Steven" by Rosenfeld Media. © Creative Commons Attribution 2.0 Generic Licence.
• Mark, Diana, Ann: Original artwork by Hilda Anggraeni (BCcampus). © Creative Commons Attribution 4.0 International Licence.

• Have a learning disability, like Ann
• Are blind or have low vision, like Jacob

Why is this important?

What do you need to do?

Textboxes with titles

Media Attributions

• Ann: Original artwork by Hilda Anggraeni (BCcampus). © Creative Commons Attribution 4.0 International Licence.
• Jacob: "WFE003: Jacob" by Rosenfeld Media. © Creative Commons Attribution 2.0 Generic Licence.

Why are you including the images you have selected?

1. Does your image serve a functional purpose? In other words, is it conveying non-text content to students? If so, you should:
   1. provide a text alternative that serves the equivalent purpose of the non-text material[footnote]"Web Content Accessibility Guidelines (WCAG) 2.0: Guideline 1.1," W3C, accessed March 27, 2018, http://www.w3.org/TR/WCAG20/#text-equiv.[/footnote]
   2. not use colour as the only visual means of conveying information[footnote]"Web Content Accessibility Guidelines (WCAG) 2.0: Guideline 1.4.1," W3C, accessed March 27, 2018, http://www.w3.org/TR/WCAG20/#visual-audio-contrast.[/footnote]
2. Does your image serve more of a decorative purpose? In other words, is it primarily a design element that does not convey content? If so, you should:
   1. avoid unnecessary text descriptions

Who are you doing this for?

• Are blind or have low vision, like Jacob
• Have poor contrast vision
• Are colour blind and cannot differentiate between certain colours
• Use a device with monochrome display
• Use a print copy that is in black and white
• Have limited Internet access and cannot download images
• Have a form of cognitive disability

What do you need to do?

Functional images

1. Describe the image in the surrounding text.
2. Describe the image in the alt tag.
3. Create and link to a long description of the image.

• Remember that alternative text must convey the content and functionality of an image, and is rarely a literal description of the image (e.g., “photo of cat”). Rather than providing what the image looks like, alternative text should convey the content of the image and what it does.[footnote]"Alt text blunders," WebAIM, accessed March 27, 2018, http://webaim.org/articles/gonewild/#alttext.[/footnote]
• For relatively simple images (e.g., photographs, illustrations), try to keep your text descriptions short. You should aim to create a brief alternative (one or two short sentences) that is an accurate and concise equivalent to the information in the image.
• For more complex images (e.g., detailed charts, graphs, maps), you will need to provide more than a one- or two-sentence description to ensure all users will benefit from the content or context you intend to provide.
• Leave out unnecessary information. For example, you do not need to include information like “image of…” or “photo of…”; assistive technologies will automatically identify the material as an image, so including that detail in your alternative description is redundant.
• Avoid redundancy of content in your alternative description. Don’t repeat information that already appears in text adjacent to the image.

Descriptions in surrounding text

Alt tags

1. When an image doesn't download due slow Internet, the alt tag content will display instead of the image.
2. For people who are visually impaired and use screen readers, when a screen reader finds an image, it will read out the content of the alt tag.

Long descriptions

How to set up a long description for an image in Pressbooks

Step 1: Add an alt tag

Step 2: Create the image description and insert it at the end of the chapter

1. Create a "Image Descriptions" heading at the end of the chapter. All image descriptions will be added under this heading in the order that the images appear in the chapter.
2. Under the "Image Descriptions" heading, insert the image's figure number followed by the image description.

Figure 1.1 image description: The Wong-Baker Faces pain rating scale uses cartoon faces to illustrate the different levels of pain that correspond to a numbered scale from 1 to 10. Zero is smiling, 2 is a small smile, 4 is a straight face, 6 is a slightly sad face, 8 is a big sad face, and 10 is a bigger sad face that is crying.

Step 3: Link to the image description from the image's caption

1. Come up with a unique ID for the image description, which will allow you to link directly to the description in the chapter. In this case, we used "fig1.1". (The ID can be whatever you want, but if you have multiple images that require long descriptions, it is best practice to establish a convention for creating IDs to keep them simple and consistent. Note that IDs are case sensitive.)
2. Insert the ID using the "Anchor" button at the beginning of the image description.
   1. Place your cursor at the beginning of the image description entry.
   2. Select the "Anchor" button from the WYSIWYG visual editor. The button appears in the third row and looks like a ribbon.
   3. A dialogue box will pop up asking you to provide a name for the anchor. Insert the ID you created and select OK.
3. Go back to your image. At the end of the caption, add "[Image Description]" to use for the link text.
4. Link the [Image Description] text to the anchor you created.
   1. Select the [Image Description] text.
   2. Select the "Insert/edit link" button from the WYSIWYG Visual editor. The button appears in the first row and looks like a chain link.
   3. A dialogue box will pop up asking you to provide a URL. Insert a number sign (#) followed by the ID you created and select the "Apply" button.

Step 4: Link the image description back to the image

Figure 1.1 image description: The Wong-Baker Faces pain rating scale uses cartoon faces to illustrate the different levels of pain that correspond to a numbered scale from 1 to 10. Zero is smiling, 2 is a small smile, 4 is a straight face, 6 is a slightly sad face, 8 is a big sad face, and 10 is a bigger sad face that is crying. [Return to Figure 1.1]

1. To link back to the image, you will need a new unique ID. In this case, we used "retfig1.1".
2. Insert the ID using the "Anchor" button right before the image in the chapter.
3. Link the [Return to Figure 1.1] text to the anchor you just created.

Decorative images

Using colour

Consider what your images would look like if they only displayed in black and white. Would any necessary context or content be lost if the colour was "turned off?" Images should not rely on colour to convey information; if your point requires colour, you may need to edit or format the image so the concepts presented are not lost to those who are colour blind or require high contrast between colours.

Example 1: Inaccessible Bar Chart

In Chart 1, colour is the only means by which information is conveyed. For students who are colour blind, have poor contrast vision, or are using a black-and-white print copy (see Chart 2), relevant information is lost.

[caption id="attachment_701" align="aligncenter" width="300"] Chart 1: In this bar chart, colour is the sole means of communicating the data.[/caption]

[caption id="attachment_702" align="aligncenter" width="300"] Chart 2: This view of the same bar chart displays how the chart might appear to a student who is colour blind, or whose device does not display colour. All of the meaningful data is lost.[/caption]

.

Example 2: Accessible Bar Chart

Students who are colour blind can distinguish between high-contrast shades. In Chart 3, contextual labels have been added to each bar at the bottom of the chart. Note that the chart will still require an alt tag. [caption id="attachment_703" align="aligncenter" width="300"] Chart 3: In this view of the bar chart, high-contrast colours have been used so that shading differences will still display in grey scale. Text labels have also been added so that the data is not just being communicated with colour.[/caption]

Long description example

Media Attributions

• Jacob: “WFE003: Jacob” by Rosenfeld Media. Creative Commons Attribution 2.0 Generic Licence.
• Figure 1.1: "Pain Scales" by Juhan Sonin. Adapted by BCcampus (cropped). © Creative Commons Attribution 2.0 Generic Licence.

Why are you including the links you have selected?

Who are you doing this for?

• Have a physical disability, like Trish
• Have a form of cognitive disability, like Ann
• Are deaf or hard of hearing, like Steven
• Are blind or have low vision, like Jacob and Diana

What do you need to do?

Create descriptive link text

You need to ensure that all links have text that describes the topic or purpose of the link. This is important because people using screen readers might have their screen reader set to read out the text for each link on a page. As such, the link text must describe the content of the link when taken out of context for the surrounding paragraph. While link texts such as "click here" or "read more" will make sense to sighted users, they mean nothing when read on their own.[footnote]"Ensure link text is meaningful within context," Web Accessibility, accessed March 28, 2018, https://www.webaccessibility.com/best_practices.php?best_practice_id=1301.[/footnote]

Link to non-web content

New tabs/windows

The default setting for links in Pressbooks is that they not open in a new window or tab. This is the preferred behaviour, since a new window, opening unexpectedly, can be disorienting for people. This is especially true for individuals who have difficulty perceiving visual content.[footnote]"G200: Opening new windows and tabs from a link only when necessary," accessed March 28, 2018, W3C, http://www.w3.org/TR/2014/NOTE-WCAG20-TECHS-20140916/G200.[/footnote]

However, if a link must open in a new window or tab, the best practice is to include a textual reference.[footnote]Penn State, "Links on a Web Page," Accessibility, accessed March 28, 2018, http://accessibility.psu.edu/linkshtml.[/footnote]

Example: Information on BCcampus Open Education [New Tab] is available online.

• Click on the link and select the PENCIL icon (edit).
• Select the GEAR icon (link options).

• Check (or uncheck) the "Open link in a new tab" box. Click "Save" or "Add Link."

Links in reference lists

Coolidge, A., Doner, S., Robertson, T., & Gray, J. (2018). Accessibility Toolkit (2nd ed.). BCcampus. https://opentextbc.ca/accessibilitytoolkit/

Option 1: WAI-ARIA labels

Option 2: Link the citation title

Coolidge, A., Doner, S., Robertson, T., & Gray, J. (2018). Accessibility Toolkit (2nd ed.). BCcampus. https://opentextbc.ca/accessibilitytoolkit/

Provide web addresses in print copies

Provide web addresses in Print PDF in Pressbooks

<a class="internal" href="/accessibilitytoolkit/chapter/links/">Links</a>

Media Attributions

• Trish: “WFE002: Emily” by Rosenfeld Media. © Creative Commons Attribution 2.0 Generic Licence.

Are your tables simple or complex?

Who are you doing this for?

• Have a form of cognitive disability, like Ann
• Are blind or have low vision, like Jacob

What do you need to do?

Create simple tables

1. A table title or caption
2. Maximum of one row of column headers and/or maximum of one column of row headers, with the appropriate scope assigned
3. Avoid using merged or split cells
4. Adequate cell padding for visual learners

How to mark cells and rows as headers

1. Create your table and fill the cells with data.
2. Select all of the cells that will be your column headers. (This should be all cells in the first row of your table.)
   1. select the table icon from the top menu of the Visual editor: Table icon > Cell > Table cell properties.
   2. set the "Cell type" to "Header cell."
   3. set the "Scope" to "Column."
3. Select all of the cells that will be your row headers. (This should be all cells in the first column of your table, except for the cell in the first row, which has already been marked as a column header.)
   1. select the table icon from the top menu of the visual editor: Table icon > Cell > Table cell properties.
   2. set the "Cell type" to "Header cell."
   3. set the "Scope" to "Row."

How to create a table caption

An example of an inaccessible table header would be one that appears either before or after the table, with no markup connecting the title to the table.

Add a [Skip Table] option

As shown, this link is best placed in the table caption. That way, someone using a screen reader will hear the caption of the table before being given the option to skip the table.

Media Attributions

• Ann: Original artwork by Hilda Anggraeni (BCcampus). © Creative Commons Attribution 4.0 International Licence.
• Table 2.4. "Main Sociological Research Methods" in Introduction to Sociology - 2nd Canadian Edition by William Little. © Creative Commons Attribution 4.0 International Licence.

What types of multimedia are you including?

1. Does your multimedia resource include audio narration or instructions? If so, you should:
   • provide a complete transcript of all speech content and relevant non-speech content in the resource
2. Does your multimedia resource include audio that is synchronized with a video presentation? If so, you should:
   • provide captions of all speech content and relevant non-speech content in the resource
3. Does your multimedia resource include contextual visuals (e.g., charts, graphs) that are not addressed in the spoken content? If so, you should:
   • provide audio descriptions of relevant visual materials in the resource

Who are you doing this for?

• Are deaf or hard of hearing, like Steven
• Are blind or have low vision, like Jacob
• Have a form of cognitive disability
• Are in a location where they cannot play or hear audio
• Are not native-English speakers and need written-word formats to support understanding

What do you need to do?

Transcripts

• Speaker’s name
• All speech content. If there is speech that is not relevant, it is usually best to indicate that it has been excluded from the transcript, e.g., “[A & B chatted while slides were loading].”
• Relevant descriptions about the speech. Descriptions that convey emotions and mood are usually provided in brackets, e.g., “Don’t touch that! [shouted].”
• Descriptions of relevant non-speech audio. These are usually provided in brackets, e.g., “[metal pipes crashing to concrete floor].” Background noise that isn’t relevant can be left out.
• Headings and sub-headings. Headings help when they make a transcript more usable or easy to navigate, especially when the transcript is long. When included, put headings in brackets to show they were not part of the original audio, e.g., [Introduction]; [Group Discussion]; [Case Study].

Captions

• All speech content. If there is speech that is not relevant, it is usually best to indicate that it has been excluded from the captions, e.g., “[A & B chatted while slides were loading].”
• Descriptions of relevant non-speech audio. These are usually provided in brackets, e.g., “[metal pipes crashing to concrete floor]”; “[background music by XXX plays].” Background noise that isn’t relevant can be left out.

Audio descriptions

• When contextual visual content on the screen is not described in the audio itself, you will need to provide an objective audio description of the visual element.
• Whenever possible, avoid creating the need for audio descriptions in the first place by being proactive at the time of recording. If you pay attention to contextual visuals while recording, you may find opportunities to convey the visual content with the accompanying spoken material instead of inserting audio descriptions of the visual content after the fact.

Media Attributions

• Steven: “WFE005: Steven” by Rosenfeld Media is used under a Creative Commons Attribution 2.0 Generic Licence.

Who are you doing this for?

• Are blind or have low vision
• Have a form of cognitive disability, like Mark
• Have a physical disability

What do you need to do?

MathML

Image with an alt tag

Example 1: An equation in HTML

View the alt tag alt = "m equals begin fraction m sub 0 over begin square root 1 minus begin fraction v sup 2 over c sup 2 end fraction end square root end fraction"

LaTeX

1. Copy a piece of LaTeX code such as m &= \frac{m_0}{\sqrt{1-\frac{v^2}{c^2}}} into an equation editor’s main editing window.
2. The equation should appear fully formatted. Make minor adjustments as needed.

Example 2: An equation with audio

[audio m4a="http://opentextbc.ca/accessibilitytoolkit/wp-content/uploads/sites/94/2015/02/equation.m4a"][/audio]

Additional resources

Math accessibility at Portland Community College

Media Attributions

• Mark: Original artwork by Hilda Anggraeni (BCcampus). © Creative Commons Attribution 4.0 International Licence.

Text Attributions

Who are you doing this for?

• Are blind or have low vision, like Diana
• Have a form of cognitive disability
• Are deaf or hard of hearing
• Have a physical disability

 What do you need to do?

1. Ensuring that default font sizes are not too small.
2. Ensuring that text can be expanded to 200% on websites.[footnote]"Font Size on the Web," Accessibility and Usability at Penn State, accessed April 17, 2018, http://accessibility.psu.edu/fontsizehtml/.[/footnote]

• Use 12 point for body text. For most documents, body text should be around 12 points. Small fonts may be illegible for some audiences.
•  Use 9 point for footnotes. If a document contains footnotes or endnotes, the minimum size should be 9 points.
• The Web Content Accessibility Guidelines (WCAG 2.0) recommend ensuring that text can be zoomed to 200%. As well, we recommend using liquid layouts[footnote]Liquid layout are layouts that are based on percentages of the current browser window's size. They flex with the size of the window, even if the current viewer changes their browser size as they're viewing the site. Liquid width layouts allow a very efficient use of the space provided by any given web browser window or screen resolution.[/footnote] that can accommodate 200% text.

Media Attributions

• Diana: Original artwork by Hilda Anggraeni (BCcampus). © Creative Commons Attribution 4.0 International Licence.

What role does colour play in the delivery of your content?

1. Have you presented text- or image-based content on a coloured or textured background? If so, you should:
   • confirm that there is sufficient contrast between your foreground content and the chosen background colour or texture
2. Have you included links in your content? If so, you should:
   • confirm that the colour of your web links is distinct from both your background colour and the colour of the surrounding text
3. Have you used colour to convey concepts or information? If so, you should:
   • confirm that you are not using colour alone to convey this information

Who are you doing this for?

• Have low vision, like Diana
• Have poor contrast vision
• Are colour blind and cannot differentiate between certain colours
• Use a device with monochrome display
• Use a print copy that is in black and white

What do you need to do?

Contrast

Link colours

• 4.5:1 contrast between the link text colour and the background
• 3:1 contrast between the link text colour and the surrounding non-link text colour[footnote]"WCAG 2.0 and Link Color," WebAIM, accessed June 7, 2018, http://webaim.org/blog/wcag-2-0-and-link-colors/.[/footnote]

High-contrast mode

Use of colour

Media Attributions

• Diana: Original artwork by Hilda Anggraeni (BCcampus). © Creative Commons Attribution 4.0 International Licence.

• ☐ Content is organized under headings and subheadings.
• ☐ Headings and subheadings are used sequentially (e.g., Heading 1, Heading 2).

Images

• ☐ Images that convey information include alternative text (alt text) descriptions of the image’s content or function.
• ☐ Graphs, charts, and maps also include contextual or supporting details in the text surrounding the image.
• ☐ Images do not rely on colour to convey information.
• ☐ Images that are purely decorative do not have alt text descriptions. (Descriptive text is unnecessary if the image doesn’t convey contextual content information).

Links

• ☐ The link text describes the destination of the link and does not use generic text such as “click here” or “read more.”
• ☐ If a link will open or download a file (like a PDF or Excel file), a textual reference is included in the link information (e.g., [PDF]).
• ☐ Links do not open in new windows or tabs.
• ☐ If a link must open in a new window or tab, a textual reference is included in the link information (e.g., [NewTab]).
• ☐ For citations and references, the title of the resource is hyperlinked, and the full URL is not hyperlinked.

Tables

• ☐ Tables are used to structure information and not for layout.
• ☐ Tables include row and column headers.
• ☐ Row and column headers have the correct scope assigned.
• ☐ Tables include a caption.
• ☐ Tables avoid merged or split cells.
• ☐ Tables have adequate cell padding.

Multimedia

• ☐ All audio content includes a transcript. The transcript includes all speech content and relevant descriptions of non-speech audio and speaker names/headings where necessary.
• ☐ Videos have captions of all speech content and relevant non-speech content that has been edited by a human for accuracy..
• ☐ All videos with contextual visuals (graphs, charts, etc.) are described audibly in the video.

Formulas

• ☐ Equations written in plain text use proper symbols (i.e., −, ×, ÷).[footnote]For example, a hyphen (-) may look like a minus sign (−), but it will not be read out correctly by text-to-speech tools.[/footnote]
• ☐ For complex equations, one of the following is true:
  • They were written using LaTeX and are rendered with MathJax (Pressbooks).
  • They were written using Microsoft Word’s equation editor.
  • They are presented as images with alternative text descriptions.
• ☐ Written equations are properly interpreted by text-to-speech tools.[footnote]Written equations should prioritize semantic markup over visual markup so text-to-speech tools will read out an equation in a way that makes sense to auditory learners. This applies to both equations written in LaTeX and equations written in Microsoft Word’s equation editor.[/footnote]

Font size

• ☐ Font size is 12 point or higher for body text in Word and PDF documents.
• ☐ Font size is 9 point for footnotes or endnotes in Word and PDF documents.
• ☐ Font size can be enlarged by 200 per cent in webbook or ebook formats without needing to scroll side to side.

• Redesign or Accommodation Activity Guidelines [PDF file]
• Redesign or Accommodation Scenarios [PDF file]

• Redesign or Accommodation Persona Cards (Detailed) [PDF file]
• Persona Cards for Printing [PDF file]
• Additional Personas for Course Design by OSU Ecampus [PDF file]

Attributions

• BCcampus (https://bccampus.ca/about-us/)
• BCcampus Support (https://open.bccampus.ca/contact-us/)
• BCcampus Open Education (http://open.bccampus.ca/)
• BCcampus Open Education Style Guide (https://opentextbc.ca/selfpublishguide/back-matter/appendix-2/)
• BCcampus Writing Guidelines for Style and Tone (https://bccampus.ca/bccampus-editorial-guidelines-for-tone-voice-and-style/)
• British Columbia Ministry of Advanced Education, Skills & Training (https://www2.gov.bc.ca/gov/content/governments/organizational-structure/ministries-organizations/ministries/advanced-education-skills-training)
• Hewlett Foundation (http://www.hewlett.org/)
• Report a Textbook Error form (https://open.bccampus.ca/reporting-an-open-textbook-error/)
• Self-Publishing Guide (https://opentextbc.ca/selfpublishguide/)

Acknowledgements

• Accessibility guidelines on formulas and equations (http://accessibility.psu.edu/math/equations/)
• Personas of people with disabilities (http://uxmag.com/articles/book-excerpt-a-web-for-everyone)

Introduction

• La Trousse d’outils d’accessibilité (https://opentextbc.ca/troussedoutildaccessibilite/)
• Pressbooks announced their Accessibility Policy (https://pressbooks.org/blog/2018/05/01/our-accessibility-policy-and-forthcoming-accessibility-improvements/)
• Pressbooks Guide (https://opentextbc.ca/pressbooks/)
• Self-serve instance of Pressbooks (https://pressbooks.bccampus.ca/)
• To Care & Comply: Accessibility of Online Course Content (https://www.youtube.com/watch?v=eks3r-nE9lU&feature=youtu.be)
• WCAG (Web Content Accessibility Guidelines) (http://www.w3.org/WAI/intro/wcag)

Accessibility Statement

• BCcampus Support (https://open.bccampus.ca/contact-us/)
• Download this book in another file format (https://opentextbc.ca/accessibilitytoolkit/)
• Report an Open Textbook Error form (https://open.bccampus.ca/reporting-an-open-textbook-error/)
• Web Content Accessibility Guidelines 2.0 (https://www.w3.org/TR/WCAG20/)
• Web version of the Accessibility Toolkit (https://opentextbc.ca/accessibilitytoolkit/)

Universal Design

• Accessibility movement (http://en.wikipedia.org/wiki/Accessibility)
• Adaptive technology (http://en.wikipedia.org/wiki/Adaptive_technology)
• Aesthetics (http://en.wikipedia.org/wiki/Aesthetics)
• Assistive technology (http://en.wikipedia.org/wiki/Assistive_technology)
• Universal Design for Learning (http://www.udlcenter.org/aboutudl/udlcurriculum)

Using Personas

• A Web for Everyone: Designing Accessible User Experience (http://uxmag.com/articles/book-excerpt-a-web-for-everyone)
• CAPER-BC Annual Report [PDF] (https://caperbc.ca/files/2014/05/CAPER-BC-Annual-Report-2014.pdf#page=13)
• Computer-science student's screen reader (https://soundcloud.com/freecodecamp)
• MP3 recording of a synthetic voice (http://caperbc.ca/files/2014/02/Paul.mp3)
• Student using JAWS (https://www.youtube.com/watch?v=_YpNrOkW0Mw#t=4m08s)
• Student using Kurzweil on a computer (https://www.youtube.com/watch?v=_YpNrOkW0Mw#t=1m32s)
• Student using ZoomText (https://www.youtube.com/watch?v=_YpNrOkW0Mw)
• Video demonstration of CART (https://www.youtube.com/watch?v=qn4B0gyDosA)

Organizing Content

• Visual editor (http://en.support.wordpress.com/visual-editor/#styles)

Images

• Complex Images for All Learners: A Guide to Making Visual Content Accessible [PDF] (https://www.lsu.edu/accessibility/training/complex-images.pdf)
• Example of what long descriptions look like in practice (https://opentextbc.ca/introtourism/chapter/chapter-8-services-marketing/#fig8.1)
• Hyperlink Material (https://opentextbc.ca/pressbooks/chapter/hyperlink-material/)
• Introduction to Sociology - 2nd Canadian Edition (https://opentextbc.ca/introductiontosociology2ndedition/)
• Pressbooks Guide (https://opentextbc.ca/pressbooks/)

Links

• Customizing your Exports with Custom Styles (https://guide.pressbooks.com/chapter/customizing-your-exports-with-custom-styles/)
• Here (https://open.bccampus.ca/)
• Hyperlink Material (https://opentextbc.ca/pressbooks/chapter/hyperlink-material/)
• Information on BCcampus Open Education (https://open.bccampus.ca/)
• Pressbooks Guide (https://opentextbc.ca/pressbooks/)
• Rebus Community help page (https://www.rebus.community/t/urls-and-screen-readers-for-an-annotated-bibliography/1450)
• Some things I'm learning about accessibility and open textbooks (https://blogs.ubc.ca/chendricks/2020/01/11/accessibility-open-textbooks/)

Tables

• Hyperlink Material (https://opentextbc.ca/pressbooks/chapter/hyperlink-material/)
• Pressbooks Guide (https://opentextbc.ca/pressbooks/)
• Tables Concepts (https://www.w3.org/WAI/tutorials/tables/)

Multimedia

• Pressbooks Guide (https://opentextbc.ca/pressbooks/)
• YouTube in Pressbooks (https://opentextbc.ca/pressbooks/chapter/videos-audio-interactive-media/#youtube)

Formulas

• Creating and viewing Math ML (http://sites.psu.edu/accessibility/math/mathml)
• Equation with audio (http://opentextbc.ca/accessibilitytoolkit/wp-content/uploads/sites/94/2015/02/equation.m4a)
• Equations: MathML, Images and LaTeX (http://accessibility.psu.edu/equations)
• Math Accessibility at Portland Community College (https://www.youtube.com/watch?v=VlMWINOe_5s&feature=youtu.be)
• Math accessibility study (https://www.pcc.edu/instructional-support/accessibility/sas/math/)

Font Size

• Web Content Accessibility Guidelines (WCAG 2.0) (http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html)

Colour Contrast

• ACART's Contrast Checker (http://www.contrastchecker.com/)
• Giacomo Mazzocato's Accessibility Color Wheel (http://gmazzocato.altervista.org/colorwheel/wheel.php)
• WebAIM's Color Contrast Checker (http://webaim.org/resources/contrastchecker/)

Accessibility Statements

• Access 8878's Accessibility Statement (https://web.archive.org/web/20161203101842/https://www.access8878.co.uk/getting-started-with-bs-8878/creating-an-accessibility-statement.aspx)
• BCcampus Support (https://open.bccampus.ca/contact-us/)
• B.C. Government Website's Accessibility Statement (https://www2.gov.bc.ca/gov/content/home/accessibility)
• Download this book in another file format (https://opentextbc.ca/accessibilitytoolkit/)
• Hassell Inclusion's Accessibility Statement (http://www.hassellinclusion.com/accessibility/)
• How to write an effective Accessibility Statement (http://www.hassellinclusion.com/2012/05/write-accessibility-statement/)
• Nomensa: How to Write an Accessibility Statement (https://www.nomensa.com/blog/2009/writing-an-accessibility-statement)
• Report a Textbook Error (https://open.bccampus.ca/reporting-an-open-textbook-error/)
• Web Content Accessibility Guidelines 2.0 (https://www.w3.org/TR/WCAG20/)
• Web Content Accessibility Guidelines: Conformance Claims (https://www.w3.org/TR/WCAG20/#conformance-claims)

Appendix A: Checklist for Accessibility

• OpenStax collection (https://openstax.org/)
• This accessibility statement (https://openstax.org/accessibility-statement)

Appendix B: Redesign or Accommodation Activity Guidelines

• You can download all files in this chapter from the following link: https://opentextbc.ca/accessibilitytoolkit/back-matter/appendix-redesign-or-accommodation-activity-guidelines/

Appendix C: Inclusive Design Webinar Series

• You can download all files and access all videos in this chapter from the following link: https://opentextbc.ca/accessibilitytoolkit/back-matter/inclusive-design-webinar-series/

Versioning History

• Report a Textbook Error (https://open.bccampus.ca/reporting-an-open-textbook-error/)

Part 2: Presentations

Part 3: Pressbooks

Part 4: Inaccessibility

CARL Webinar: How to Create Inclusive and Accessible OER

• Have a learning disability, for example like Ann
• Are blind or have low vision, for example like Jacob

What Do You Need to Do?

Before You Begin

Why Are You Including the Images You Have Selected?

• Provide a text alternative that serves the equivalent purpose of the non-text material[footnote]Web Content Accessibility Guidelines (WCAG) 2.0, Guideline 1.1 Text Alternatives. Accessed from: http://www.w3.org/TR/WCAG20/#text-equiv[/footnote]
• Not use colour as the only visual means of conveying information[footnote]Web Content Accessibility Guidelines (WCAG) 2.0, Guideline 1.4.1 Use of Color. Accessed from: http://www.w3.org/TR/WCAG20/#visual-audio-contrast[/footnote]

• Avoid unnecessary text descriptions

Who Are You Doing This For?

• Are blind or have low vision, for example Jacob
• Have poor contrast vision
• Are colour blind and cannot differentiate between certain colours
• Are using a device with monochrome display
• Have a form of cognitive disability

What Do You Need To Do?

Functional Images and Alternative Text Descriptions

• Remember that alternative text must convey the content and functionality of an image and is rarely a literal description of the image (e.g., "photo of cat”). Rather than providing what the image looks like, alternative text should convey what the content of the image is and what it does.[footnote]WebAIM (2014). Alt text blunders. Accessed from: http://webaim.org/articles/gonewild/#alttext[/footnote]

• For relatively simple images (e.g., photographs, illustrations), try to keep your text descriptions short. You should aim to create a brief alternative (one or two short sentences) that is an accurate and concise equivalent to the information in the image.

• For more complex images (e.g., detailed charts, graphs, maps), you will need to provide more than a one- to two-sentence description to ensure all users will benefit from the content or context you intended to provide. In these cases, you should either provide the details in the text surrounding the image or write a longer text description that students can link to on a separate page. You should still include a short text description (one to two sentences) that tells students where they can find the details you have provided in the longer description.

• Leave out any unnecessary information. For example, you do not need to include information like "image of..." or "photo of..."; assistive technologies will automatically identify the material as an image, so including that detail in your alternative description is superfluous.

• Avoid redundancy of content in your alternative description. Don't repeat the same information that already appears in text adjacent to the image.

Figure 20.11 includes two photos. The first photo shows crowded buildings located on the hillside. They are small and shabby. The second photo shows magnificent buildings located by water.

When the stopcock is opened between the flasks, the two atoms can distribute in four possible ways.

Figure 18.1 shows a diagram with five pairs of circles. All of these circles are open. The left one opens on the right and the right one opens on the left. They are connected with lines at their open points. One pair is located on the left and between their two connecting lines is a black dot with a red vertical line going across. The other four pairs arranged in a column are located on the right and between the connecting lines of each pair is a a small circle with a red horizontal line going through. A right arrow labelled Open Stopcock links the pair sitting on the left to the four pairs on the right. Each of these five pairs has two dots (green and blue) arranged in different patterns. For the pair on the left, the two dots, sitting obliquely, appear only in left circle. The green dot is at the left upper part of the circle and following it the blue dot is close to the bottom right. The first pair on the right has the similar situation. The only difference is that the green dot is at the right upper part of the circle and the blue dot is close the middle left. The second pair has a green dot in the centre of the left circle and a blue dot in the centre of the right circle. The third pair has a blue dot sitting at the left upper part of the left circle and a green dot sitting close to bottom right of the right circle. For the last pair, the two dots appear in oblique direction only in the right circle. A green dot is at the right upper part of the circle and a blue dot is close to bottom left.

Using Colour

Decorative Images

Before You Begin

Why Are You Including the Weblinks You Have Selected?

Who Are You Doing This For?

• Have a form of cognitive disablity, for example Ann
• Have a physical disability, for example Trish
• Are deaf or hard of hearing
• Are blind or have low vision

What Do You Need To Do?

Descriptions

Ensure that all web pages and weblinks have titles that describe a topic or purpose.

The purpose of the link can be determined by the text alone. That is, you don't need to include additional information justifying the use of the link. You want the link to be meaningful in context. For example, do not use generic text such as "click here" or  "read more" unless the purpose of the link can be determined by meaning in the surrounding content.[footnote]https://www.webaccessibility.com/best_practices.php?best_practice_id=1301[/footnote]

Consider the following examples.

• Click here for information on the BC Open Textbook Project.

• Information on the BC Open Textbook Project is available online.

New Tabs/Windows

In general, it is better if weblinks do not open new windows and tabs since they can be disorienting for people, especially people who have difficulty perceiving visual content.[footnote]http://www.w3.org/TR/2014/NOTE-WCAG20-TECHS-20140916/G200[/footnote]

However, if a link must open in a new window, it is best practice to include a textual reference. For example, Information on the BC Open Textbook Project [New Window] is available online.[footnote]http://accessibility.psu.edu/linkshtml[/footnote]

Before You Begin

What Type of Multimedia Are You Including?

• Provide a complete transcript of all speech content and relevant non-speech content in the resource.

• Provide captions of all speech content and relevant non-speech content in the resource.

• Provide audio descriptions of relevant visual materials in the resource.

Who Are You Doing This For?

• Are deaf or hard of hearing, for example Steven.
• Are blind or have low vision, for example Jacob
• Have a form of cognitive disability
• Are in a location where they cannot play or hear audio
• Are not native-English speakers and need written-word formats to support understanding

What Do You Need To Do?

Transcripts

1. Speaker’s name
2. All speech content:  If there is speech that is not relevant, it is usually best to indicate that it has been excluded from the transcript. For example: “[A & B chatted while slides were loading].”
3. Relevant descriptions about the speech: Descriptions that convey emotions, mood, etc. are usually provided in brackets. For example: “Don’t touch that! [shouted].”
4. Descriptions of relevant non-speech audio: These are usually provided in brackets. For example: “[metal pipes crashing to concrete floor].” Background noise that isn’t relevant can be left out.
5. Headings and sub-headings: Where they will make the transcript more usable or easy to navigate,  headings and sub-headings can be helpful aids, especially when the transcript is long. When including these, put them in brackets to show that they were not part of the original audio. For example: [Introduction]; [Group Discussion]; [Case Study].

Captions

1. All speech content:  If there is speech that is not relevant, it is usually best to indicate that it has been excluded from the captions. For example: “[A & B chatted while slides were loading].”
2. Descriptions of relevant non-speech audio: These are usually provided in brackets. For example: “[metal pipes crashing to concrete floor]”; “[background music by XXX plays].” Background noise that isn’t relevant can be left out.

Audio Descriptions

Example:

Example:

"As you can see, metallurgical coal projection increased by 3 million tonnes over these two years."

"This chart illustrates that metallurgical coal production in B.C. increased from 23 million tonnes in 1999 to 26 million tonnes in 2001,"

Before You Begin

Who Are You Doing This For?

• Are blind or have low vision
• Have a form of cognitive disability, for example Mark
• Have a physical disability

What Do You Need To Do?

MathML

Image with ALT tag

LaTeX

1. Copy a piece of LaTeX code such as m &= \frac{m_0}{\sqrt{1-\frac{v^2}{c^2}}} into an equation editor’s main editing window.
2. The equation should appear fully formated. Make minor adjustments as needed.

Additional Resources

Math Accessibility at Portland Community College In 2012, Portland Community College departments took a closer look at making math accessible to blind students. Read more about the math accessibility study on our website: http://www.pcc.edu/access. This video described by Audio Eyes: http://www.audioeyes.com

This video is an Open Educational Resource.

Before You Begin

Who Are You Doing This For?

• Are blind or have low vision, for example Diana
• Have a form of cognitive disability
• Are deaf or hard of hearing
• Have a physical disability

What Do You Need To Do?

1. Ensuring that default font sizes are not too small.
2. Ensuring that text can be expanded to 200% on websites.[footnote]http://sites.psu.edu/accessibility/fontsizehtml/[/footnote]

• 12 point for body text: For most documents, body text should be around 12 points. Small fonts may be illegible for some audiences.
•  9 point for footnotes: If a document contains footnotes or endnotes, the minimum size should be about 9 points
• 200% zoom: The Web Content Accessibility Guidelines (WCAG 2.0) recommend ensuring that text can be zoomed to 200%. As well, we recommend using liquid layouts[footnote]Liquid layout are layouts that are based on percentages of the current browser window's size. They flex with the size of the window, even if the current viewer changes their browser size as they're viewing the site. Liquid width layouts allow a very efficient use of the space provided by any given Web browser window or screen resolution. [/footnote] that can accommodate 200% text.

What Is Colour Contrast?

Before You Begin

What Role Does Colour Play in the Delivery of Your Content?

• Confirm that there is sufficient contrast between your foreground content and the chosen background colour or texture.

• Confirm that the colour of your web links is distinct from both your background colour and the colour of the surrounding text.

• Confirm that you are not using colour alone to convey this information.

 Who Are You Doing This For?

• Have low vision, like Diana
• Have poor contrast vision
• Are colour blind and cannot differentiate between certain colours
• Are using a device with monochrome display

What Do You Need To Do?

Contrast

Weblink Colours

• 4.5:1 contrast between the link text color and the background
• 3:1 contrast between the link text color and the surrounding non-link text color[footnote]WebAIM (2015), WCAG 2.0 and Link Colors. Accessed from: http://webaim.org/blog/wcag-2-0-and-link-colors/[/footnote]

High-Contrast Mode

Use of Colour*

What Are Tables?

Before You Begin

Are Your Tables Simple or Complex?

Who Are You Doing This For?

• Are blind or have low vision, for example Jacob
• Have a form of cognitive disability, for example Ann

What Do You Need To Do?

Creating Simple Tables

1. A table title or caption
2. Maximum of one row of column headers and/or maximum of one column of row headers
3. No merged or split cells
4. Adequate cell padding for visual learners.

1. Includes a title (Spring Blossoms)
2. Has one row in which cells are tagged as column headers (Colour Family, Bulbs, Shrubs, Trees), and one column (beginning on the second row) in which the cells are tagged as row headers (Pink, Yellow)
3. Contains no merged or split cells
4. Has adequate cell padding to provide space buffering around the data in each cell. (Cell padding in this table is set at "10").

• Pink, Bulbs: Tulips
• Pink, Shrubs: Flowering currant
• Pink, Trees: Ornamental plum

• It has been optimized for people who use screen-reader technology.
  • all content can be navigated using a keyboard
  • links, headings, and tables are formatted to work with screen readers
  • images have alt tags
• Information is not conveyed by colour alone.
• There is an option to increase font size (see tab on top right of screen).

Other file formats available

Known accessibility issues and areas for improvement

Accessibility standards

Let us know if you are having problems accessing this toolkit

• The location of the problem by providing a web address or page description
• A description of the problem
• The computer, software, browser, and any assistive technology you are using that can help us diagnose and solve your issue
  • e.g., Windows 10, Google Chrome (Version 65.0.3325.181), NVDA screen reader

• Contact form: BCcampus OpenEd Help
• Web form: Report an Error

Who are you doing this for?

What do you need to do?

• Use clear and simple language, avoiding jargon and technical terms
• Include information about how people can personalize their experience. This might include information about:
  • accessibility features of the platform or reading interface
  • other file formats that are available
• Outline specific accessibility features and how to use them when relevant
• Do not make false claims or ignore known accessibility issues. Be as transparent and open about accessibility barriers as possible. This means:
  • describing what is being done to fix the problem and a timeline
  • providing any temporary workarounds
• Include information about who is responsible for the accessibility of the content and their contact information so people can submit issues, suggestions, or complaints related to accessibility.
• Describe the organization's accessibility policy, and the work that has been done to make the resource accessible. Here, you can provide information like:
  • accessibility guidelines you are following (e.g., WCAG 2.0)
  • any federal, provincial, or state legislation you are conforming to
  • any user testing you performed[footnote]"Creating an Accessibility Statement," Access 8878, accessed August 30, 2018, https://web.archive.org/web/20161203101842/https://www.access8878.co.uk/getting-started-with-bs-8878/creating-an-accessibility-statement.aspx.[/footnote]

Additional resources

• Web Content Accessibility Guidelines: Conformance Claims
• Nomensa: How to Write an Accessibility Statement
• Access 8878's Accessibility Statement

• B.C. Government Website's Accessibility Statement
• Hassell Inclusion's Accessibility Statement

Why an accessibility toolkit?

Updates to the second edition

New information

Book-wide changes

What is Pressbooks?

Media Attributions

• "To Care and Comply: Accessibility of Online Course Content" by Portland Community College. © Creative Commons Attribution 3.0 Unported Licence.