Appearance and Design
This section outlines the specific accessibility standards across various content types that might be included in an open resource. Although accessibility-specific considerations have been grouped separately from style, accessibility is a crucial part of style. In addition, while other style considerations can be adjusted from book to book, accessibility considerations remain generally consistent.
Here are some accessibility resources that may be helpful:
- Accessibility Toolkit: Discusses accessibility in the context of OERs, with a specific focus on Pressbooks.
- STEM OER Accessibility Framework and Guide: A plain language, check-list overview of web content accessibility guidelines (WCAG) with a specific focus on STEM content.
- Accessible STEM Resources: A list of resources related to accessibility in STEM content. A good introduction.
- Images and text do not rely on colour alone to convey information.
- When colour is used, there is a minimum colour contrast of 4.5:1 for regular font and 3:1 for large font between the foreground and background.
Colour should not be the only means of conveying information, and colour that is used should meet minimum contrast ratios. This is important for people who have a form of colour-vision deficiency, are blind, or those who print the resource in black and white (which is a lot cheaper).
What to Look For/Avoid
- Charts and graphs that use colour-only keys.
- Text that refers to content only by its colour. For example, “the blue textbox,” “the red text,” or “the person in the yellow shirt.”
- Light colours on light backgrounds and dark colours on dark backgrounds.
How to Fix
- Create or select charts and graphs that use colour in combination with labels and/or textures to convey information.
- When referring to specific content, find something other than colour to identify it (For example, “the blue Exercises textbox,” “the red underlined text,” or “the person on the far right in the yellow shirt.”
- Use the Contrast Checker to verify contrast ratios and adjust those colours as needed.
- Equations written in plain text use proper symbols (i.e., −, ×, ÷).
- 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.
When inserting signs for operations like division, subtraction, and multiplication in plain text, those characters can be selected from the “Special Character” button in the second row of the Pressbooks editor. Hover over the symbols to see how they will be interpreted by a screen reader.
Alternative text descriptions for formulas presented as images should be written in MathSpeak.
- Always start each chapter or part with H1 and go down heading levels based on hierarchy of topics.
- Textbox titles do not need to be marked as headings.
- Exception: Media/Text Attributions and Image Descriptions will always be H3.
For more information, read the Accessibility Toolkit’s section on Organizing Content.
- Images that convey information include alternative text (alt-text) descriptions of the image’s content or function. These descriptions are provided in the alt text field, in the surrounding text, or linked to as a long description.
- Graphs, charts, and maps also include contextual or supporting details in the text surrounding the image.
- Images that are purely decorative or are already described in the surrounding text contain empty alternative text descriptions. (Descriptive text is unnecessary if the image doesn’t convey contextual content information.)
Images that are described in the caption or surrounding text or provide no useful information do not need additional text descriptions. The alt text field can be left blank.
A short (under 125 characters) description of the image that is entered in the “alternative text” field of an image.
- The description should provide information that would be lost if the image were not to be displayed.
- Use this character counter to check the length of your alt text.
- No need to include “picture of …” or “image of …”
If the description needs more than 125 characters or if it would benefit from being set up as a table or list, create a long description instead.
Long descriptions are provided for images that need text descriptions longer than 125 characters or would be better formatted as a list or table.
- They are provided at the end of the chapter that the image appears in under a “Image Descriptions” heading (H3).
- Under the image description heading, provide a title for the image in bold (this can include the figure number if available) followed by “image description” and a colon. For example: Figure 1.2 Buyer’s journey flow chart image description:.) And then insert the image description.
- Note that the description does not need to be a paragraph of text. You can use lists and tables to make the information easier to digest and navigate through. This is especially important for complex images like graphs, maps, and charts.
- Anchor tags and links are provided so students can navigate from the image to the description and back again (See instructions under “Long Descriptions” in the Image chapter in the Accessibility Toolkit).
- Include figure number or title in link text so it is descriptive/unique. For example: [Figure 1.1 image description] would be the link in the figure caption and [Return to Figure 1.1] would be the link that follows the image description
Here are some really helpful resources for describing images:
- WebAIM Alternative Text: A solid introduction to writing alternative text.
- Image Description Guidelines: This resource provides six guidelines to keep in mind when writing an image description as well as strategies for description specific types of images like art, diagrams, and math.
- Describing Complex Images for All Learners [PDF]: This resource shows how you can use tables and lists to describe charts and graphs.
- Image Description Guidelines for Assessments (Not open) A resource that provides examples on how to describe different types of test questions without giving away the answer for math, reading/language, and science subjects.
- The link text describes the destination of the link.
- Links do not open new windows or tabs. If they do, a textual reference is included in the link text.
- Links to files include the file type in the link text.
- Use descriptive link text. Generally, the title of the webpage that a link will redirect to is the best option. Sometimes sentences will have to be reworded to make this work.
- If links open new tabs or windows, include that in the link text. Generally, we do not want links to open in new tabs or windows.
- Include file type in link text when linking to non-HTML content. For example: Complex Images for All Learners [PDF]
- Use WAI-ARIA labels for linked URLs in reference lists and bibliographies.
- Use Custom CSS to provide URLs for links in Print PDF copy (omit internal links). (This CSS is included in the required PDF Custom Styles.)
See the Accessibility Toolkit’s chapter on “Links” for more specific instructions on each of these practices.
Transcripts are text equivalents of audio content. For information on what should be included in a transcript, read that section in the Accessibility Tooklit‘s chapter on Multimedia.
Transcripts can be provided a few different ways:
- Directly in the resource so people using an exported or print copy can read the transcript within the resource rather than navigating to the web version. (For example, this could be in a textbox immediately after the audio or a link to where the transcript appears in the back matter.)
- As an accessible file uploaded to the book immediately after the audio.
Regardless of how the transcript is provided, it should be immediately clear to the reader where they will be able to access the resource.
- All H5P activities have been tested for accessibility by the H5P development team and have passed their testing.
- All H5P activities that include images, videos, and/or audio content meet the accessibility requirements for those media types.
- Preferred but not required: Static versions of H5P activities are provided so they can be accessed in offline and print versions of the book.
With H5P activities, you need to ensure that the activity type is accessible and that the content added to the activity is accessible:
- Check the accessibility evaluation list maintained by the H5P development team. Only activities marked as accessible and have full browser support are considered accessible. If an activity type is not accessible, do not use that activity or see if there is a way to provide the activity in an accessible format.
- Review the accessibility requirements for the content included in the various H5P activities. For example, images need text descriptions and videos need captions.
- If possible, create printable equivalents of activities. This can be done for quizzes (fill in the blank/MC questions), timelines, hot spots, accordions, mark the words, etc.
- All videos include 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.
- When creating videos, take care to describe the visuals of the video using the narration. If this was not considered during the creation of the video, we might explore the YouDescribe tool. If there is important visual content in the video that is not described audibly, that needs to be acknowledged in the Accessibility Statement (See Front Matter).
- BCcampus-funded videos should be hosted and captioned in Kaltura. Kaltura will automatically generate captions which can then be edited.
- If the video comes from an external source that has auto-generated captions or no captions, that needs to be acknowledged in the accessibility statement (See Front Matter). These kinds of videos should be avoided as much as possible.
- Tables are used to structure information and not for layout.
- Tables include row and/or column headers that have the correct scope assigned.
- Tables include a title or caption.
- Tables do not have merged or split cells.
- Tables have adequate cell padding.
All tables should:
- Have a caption
- Have row and/or column headers with correct scope assigned
- Not have merged or split cells (Exceptions can be made if merged or split cells are necessary for comprehension by following instructions here: Tables Concepts. This should be acknowledged in the Accessibility Statement.)
- Should generally not be used for layout purposes (exceptions can be made on a case-by-case basis).
For tables that span more than one page in the PDF, wrap the table header HTML in <thead></thead>. This will ensure the table caption displays on each page.
<table style="border-collapse: collapse; width: 100%;" border="0"><caption>Table Caption</caption>
<th style="width: 50%;" scope="col">Header</th>
<th style="width: 50%;" scope="col">Header</th>
<td style="width: 50%;">Data</td>
<td style="width: 50%;">Data</td>
Watch this video for step-by-step instructions of how to create an accessible table in Pressbooks:
This checklist can be used to assess an open resource for accessibility: BCcampus OER Accessibility Criteria [PDF].
Tools for Accessibility Testing
- WAVE Browser Extension: With a click of a button, the WAVE plugin will assess a chapter (webpage) for text colour contrast, identify what images do and don’t have alt text, give you an overview of the heading structure, identify links to PDFs, and assess table markup.
- Contrast Checker: This tool is helpful for finding accessible colour combinations and checking colour combinations for accessibility. You can also upload pictures and it pull pull the covers from the picture to check. Colour combinations must meet Level AA (ratio 4.5:1 for regular text).
- NVDA: An open source screen reader available for Windows computers. Also MathPlayer will allow an NVDA screen reader to correctly verbalize LaTeX equations rendered with MathML.
- For example, a hyphen (-) may look like a minus sign (−), but it will not be read out correctly by text-to-speech tools. ↵
- 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. ↵