Waterloo LibGuides for guide authors: Accessibility

Requirements

At the University of Waterloo, we are regulated by the Accessibility for Ontarians with Disabilities (AODA) Act. This law addresses the steps that organizations need to take to break down barriers limiting access to services. All Waterloo online resources should meet the requirements based on the Web Content Accessibility Guidelines (WCAG) 2.1.

Goals

The goal of AODA is to make online resources accessible to everyone from the moment they are created, rather than fixing problems after barriers have already come up. By building LibGuides as fully accessible to begin with ensures that we do not place barriers in front of those using the guides.

For example, a student may not be able to find the information that they need in a LibGuide if the information is in a graphic that they cannot see and that their screen reader cannot interpret. This barrier can be prevented by adding a written description of the graphic. A few of these changes to website designs can ensure that users can engage with, navigate through, and understand the information on a website regardless of the method they use to interact with it.

Considerations

As you create your LibGuide, it is important that you consider the accessibility of its formatting. For example, how legible is your text? How is the resource organized? If there are images, audio, or video recordings, is the information they contain available in alternative formats?

Many people use assistive devices to access web content. Understanding these devices can help you create web content that is accessible to these devices.

Screen readers

People may use screen readers if they have visual impairments. These programs typically read the text on a page aloud, but they may also convert it into Braille.

The order in which things are read is not necessarily the way they are displayed on the screen. The first things to be read by screen readers are headings and links, making it easier to navigate the page, before reading the rest of the content. When an image is encountered, screen readers will read the alt-text.

Screen magnifiers

People with visual impairments may access online content by enlarging it with a screen magnifier up to two times its original size. Users may encounter difficulties if website elements become blurry or blocky when they are enlarged.

Keyboard interface

Some users navigate webpages using only their keyboard. The keyboard focus may be used to determine where on the page the keyboard is currently focusing, like a “You Are Here” pin on a map. A webpage may then be navigated using the “tab” key. The navigation order using this key, usually left to right and top to bottom, should be logical.

In LibGuides, problems are encountered by keyboard interface users when boxes have tabs, since they are unable to navigate outside of the box. This is an example of a keyboard trap, blocking navigation on a page. Tabs for pages in the LibGuides do not cause this problem. 

Accessibility evaluation tools are a handy resource for anyone who wants to ensure that the site they are developing meets established accessibility standards.

It is very important to keep in mind that no evaluation tool has been developed that can completely replace human testing.

Colour contrast

Why does the colour contrast matter?

People with low vision and/or colour vision deficiencies may have trouble reading text if there is not enough contrast with the background. If the text and the background are both similar colours, the text might not be visible or legible. Increased contrast may make the content legible to more people.

Example: If there is blue text on a purple background, but a user cannot easily differentiate between blue and purple, low contrast may make the text difficult to see. If one is much lighter than the other, however, they might still be able to read it.

Colour choice tips

The WCAG 2.1 require a minimum contrast ratio of 4.5:1 for normal font sizes and 3:1 for large font. Even that may not be enough contrast for some LibGuide users. The image below shows an example of this 4.5:1 ratio, which even though it meets requirements may be too light to see for some users. We recommend defaulting to black text on a white background.

These numbers might not mean much to you. Try using resources such as WebAIM Colour Contrast Checker, Spectrum browser extention, or Vischeck vision simulator to check the contrast between the colours you are using.

The image below depicts the same photograph of a white cat with heterochromia, by Dids from Pexels, through Spectrum’s normal, protanopia, tritanopia, achromatopsia, and low-contrast vision filters. There is low contrast between the figure and the background, and these filters demonstrate different ways the photo could be perceived. With several of the filters, especially the low-contrast filter, the smaller details are more difficult to see. 

Font style

Font legibility can vary. Fonts with serifs at the end of letters, like Times New Roman, may be difficult for some people to read. Instead, use sans-serif fonts like Arial, Calibri, Verdana, and Tahoma, which are cleaner and clearer. In LibGuides, avoid changing the font to anything other than the default.

Text size

Why does the text size matter?

Small font can be difficult to read. Someone with low vision may need to enlarge text to be able to read it.

Text size tips

Stick to font sizes of 9pt or higher. The text on a page should remain clear and complete while being enlarged to twice its size through assistive technology or website settings. In LibGuides, it is a best practice to use the Default text size.

When are links potential barriers?

Assistive devices will read the links before the surrounding body of text, thus removing the hyperlink from it's context. With a list of links labelled generically, such as “click here” or “here”, an individual using an assistive device is presented with a list of unknown links that could lead to any file or webpage. Alternatively, if you use the URL as a link, the assistive device will read out the entire URL. Often, this will be an incomprehensible jumble of letters and will increase confusion.

Link tips

Think carefully about how you label your link. Make your links contextual, descriptive, and unique. If the link is taken out of context, would you still understand the purpose of the link and where it is redirecting them? Instead of “click here”, incorporate more information from the sentence, such as “the University's accessibility guidelines”. Also, remember to check your links regularly to ensure that they are still active and direct where you intend. Below is an image demonstrating good and bad examples of hyperlinks.

The default assumption is for a link on a LibGuide to lead to another webpage on the internet. If the hyperlink will lead to an atypical resource (uploaded files, videos, etc.), add the type of resource in parentheses at the end of the hyperlink. i.e. Minutes of the Annual General Meeting (PDF).

When possible, use friendly URLs. A friendly URL avoids the long, jumbles of letters that are often seen in randomly generated URLs. It is often a shorter version of the URL that includes information such as webpage names to provide more information.

• LibGuide URLs can be modified by finding the URL under the guide description, selecting the pencil icon to "edit the page URL", and changing the URL to a short, clear label reflecting the name of the guide. Each tab or page can also be given a friendly URL.
• A friendly URL can be created for each page by finding the URL listed under the tabs, selecting the pencil icon to "edit the page URL", and changing the URL to a short, clear label reflecting the name of the page. These friendly URLs will follow a hierarchical structure, with the URL for the guide as the beginning of each page URL.

From W3 Techniques: "The objective of this technique is to limit the use of links or buttons that open new windows or tabs within Web content. In general, it is better not to open new windows and tabs since they can be disorienting for people, especially people who have difficulty perceiving visual content. However there are some situations where it is preferable from an accessibility perspective to open a new window or tab. Here are two such situations:

1. Opening a page containing context-sensitive information, such as help instructions, or an alternate means of completing a form, such as a calendar-based date picker, will significantly disrupt a multi-step workflow, such as filling in and submitting a form, if the page is opened in the same window or tab.

2. The user is logged into a secured area of a site, and following a link to a page outside of the secured area would terminate the user's logon. In this case opening external links in an external window allows the user to access such references while keeping their login active in the original window.

It is recommended that when links are opened to a new window, there is advance warning."

Why do images need alternative text?

Images and figures can communicate useful information, but this information may not be accessible to someone with low vision or colour vision deficiencies. In some cases, the information should be conveyed in a different way. 

When adding an image to your LibGuide, determine if it is "decorative" or "illustrative". If the image is present purely for aesthetic reasons, and adds no additional information to the guide, it might be decorative. Decorative images do not require alt text. However, they do need to be identified as such. This can be done through adding two quotation marks ("") in the alt text field or checking a "decorative image" box, depending on the interface.

• Note: an image that has been marked as decorative is not the same as an image having no alt text. If there is no alt text associated with an image, a screen reader will announce the name of the image file followed by no description, which may not make any sense to the user.

If the image is a picture of text, it may be better to just use text. An exception to this rule is when the use of an image is needed to convey information, such as a logo. When images are needed, however, an alternative way for viewers to access the information it conveys is needed.

If an image is "illustrative", it carries important information to the understanding of what you are describing. These images require alt text description that is useful, unique, and contextual to the image's intended use.

As a standard, alt text should not exceed 60 words. If an image's alt text requires more than 40 words to provide proper description and context, then that description needs to be incorporated into a caption, or the surrounding body of the text, with the image identified as decorative. This is especially true for infographics.

To demonstrate, the image below depicts the same photograph of a dog in a rainbow scarf at a parade, by Hamann La from Pexels, through Spectrum’s normal, protanopia, tritanopia, achromatopsia, and low-contrast vision filters. Some users may not be able to see the image, or specific versions it. In these cases, it might not be clear that the scarf is rainbow coloured.

If the scarf's colour is important to convey the image's meaning, that must be incorporated into the description of the image in the alt text. This explanation of the image is longer than 60 words, so the description has been placed in the body, and the alt text for the image has been set as decorative.

Alt-text tips

Convey the most essential information in a clear and concise manner. Focus on relevant information. For example, an image of a box could have alt-text describing the appearance of the box, the location of the box, the context of the box, or the function of the image, depending on which features matter in context. If none of these image features matter, such as if the image is only there to look pretty, no alt-text is needed.

Avoid redundancy. An image does not need to be labelled as an image in the alt text. Assistive devices will read all the alt-text, so time is saved by being concise.

If you are feeling uncertain about what alt-text to add, use W3C’s alt Decision Tree.

What should be considered when posting audiovisual elements?

Audio elements, video elements, or both may be inaccessible to people with vision or hearing impairments.

Tips for audiovisual material

A text alternative can make information more accessible. Captions and transcripts should be provided to students for content such as videos and podcasts. Transcripts can later be converted into different formats, such as Braille.

If no transcript currently exists for your materials, speech-to-text programs can be used. The results should always be checked. These programs are imperfect.

Navigation

Why might navigation of a website be difficult for some users?

Anyone can experience navigation issues. Different users may have trouble with common website components like navigation bars, if they have cognitive disabilities, assistive technologies, or simply preferences in how they learn. They may also become confused if pages or sections in a web resource function differently from one another, since the inconsistency makes the difficult to use or interpret.

Navigation tips

To ensure that web pages can be found quickly and easily by users, it is important that they can be accessed in several ways. You might do that by providing site maps and tables of contents, which can allow users to easily navigate the website with a limited number of steps. You could also list available or related webpages that users may want to visit next. A site search may also be helpful to make the website easier to understand or limit the scrolling necessary.

Be consistent across pages. This can help with keeping the pages predictable and making parts of the pages easy to find. This requires consistency in labelling, icons, symbols, and more.

Headings and Labels

Why do headings and labels matter?

Users may rely on headings and labels to find their way through a webpage for various reasons. Manually creating these labels by changing font size or style is problematic: it may help some users find a specific section, but it is useless to other users. Instead, use pre-formatted headings and labels to make sure that the page can be navigated by assistive devices, and is predictable for users who read slowly or have limited short-term memory.

Heading tips

Headings can be short, but should be descriptive, clearly conveying what topic readers should expect a section to have. Use different levels of headings to convey the hierarchy of a page.

In LibGuides, “Heading 1” is the guide title and “Heading 2” is the box title, so headings from 3 onwards can be used within boxes.

Stick to consecutive levels of headings, such as using heading 4 for a subsection of heading 3. Do not skip heading levels, such as by using heading 5 instead of heading 4 because you like the way it looks, since this can make the layout confusing to users and their assistive technology.

As a best practise, we do not use any heading beyond Heading 5.

Tables

How do tables affect accessibility?

Tables have traditionally been used both to present data and to control the formatting of a page. They can be difficult for assistive devices to navigate.

Table tips

Avoid using tables unless you need to do so to organize and display data. If you are using a table, make it as easy to navigate as possible: use clear column labels, split complex tables into multiple simple ones, and use descriptive captions.