Accessibility

Accessibility compliance

Queen's is obligated to ensure that all of our public websites are "WCAG 2.0 AA" compliant by January 1, 2021. This is the standard adopted by the Accessibility for Ontarians with Disabilities Act (AODA). Queen’s reports regularly to provincial regulators on our overall compliance with such standards.

There are many resources available at Queen’s to support compliance with these web accessibility standards:

Accessibility Hub

Queen's Accessibility Hub offers many resources, including how-to information on website accessibility.

Web Standards and Accessibility Development Guide

Siteimprove

Individuals who manage publicly accessible websites at Queen’s can access Siteimprove, an accessibility auditing service that can identify accessibility errors as well as spelling errors and broken links.

Learn more about Siteimprove

Basic accessibility considerations for editors

Using the Sa11y tool

Making a website compliant with the legislation can seem daunting at first.

The WebPublish service includes on page alerts and tips on how editors can resolve accessibility issues in the content they have created.

[Sa11y icon used to check page accessibility]

Simply click on the sa11y icon on the bottom of the screen to show / hide accessibility errors, and warnings. These often include tips for how to fix the issue.

Sa11y is an open-source accessibility tool developed at Ryerson University.
Learn more about Sa11y and it's features.

Text as graphic

While images are an important part of any website, avoid using images with graphic text to exclusively relay important info.

Avoid the temptation of adding a poster, designed for printing, right into your website. When text or charts are added as graphics instead of HTML, anyone who can’t see the page will face a barrier to accessing that information. This applies, especially to those using a screen reader to read a page aloud.

Instead, complex infographics should be broken down into smaller images and recreated as much as possible HTML. They might not look exactly the same as a print design, but the information will be readable / accessible.

approved colour contrast illustration

Infographic - HTML Version

sample graphic

This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text.

[sample graphic]

This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text..

Convert single image files to HTML with multiple image files

Alt text

"Alt text" is text that is rendered or read aloud instead of viewing an image. Ensure that all images have alt text that describes what the image shows. WebPublish templates now require alt text to be entered.

Within a source code view, the image tag looks something like this:

<img src="sam-smith.jpg" alt="[Sam Smith lecturing at the front of a Queen’s University classroom]">.

Inline styles

Don't add in-line styles that limit browser and key commands. Instead, use the styles built into WebPublish, which allow the users’ browser preferences for colour, size and typeface to override our design. For example:

  • To allow for zooming in/out, base font sizes are set in relative units. When a reader uses a browser zoom function, the relative sizing of heading text compared to body text is maintained.

  • Some fonts are better for readers with dyslexia. Most websites suggest a family of fonts to display type, but these preferences can be changed by users in their browser settings.

  • While most readers prefer dark text on a light background, browser preferences can switch the display to show light text on a dark background.

Colour contrast

Be sure to maintain adequate colour contrast between text and background. There are many colour-contrast-checking tools and browser extensions available online. Web Content Accessibility Guidelines – WCAG 2.0 AA – require the following

approved colour contrast illustration

Pass – 8:1

failed colour contrast illustration

Fail – 2.8:1

  • Body text must maintain a contrast of at least 4.5:1

  • Large text/headings must maintain contrast ratio of at least 3:1

Colour pairings

About 5% of the population has some form of colour blindness. Ensure that tasks described on your site are not based on colour recognition, such as "click the red button."

Similarly, colour pairings can negatively impact users, such as red and green used together. There are colour blindness simulation tools and browser extensions available online that will show you how users may experience your design (see, for example, Who Can Use). It can be tricky to account for every possible issue. To bolster usability, use colours in tandem with symbols. With this approach, if the colour doesn't register meaning with the user, the symbol will. Sticking to a simple colour palette is generally good practice.

approved colour contrast illustration

Pass

failed colour contrast illustration

Fail

Video / audio content and animations

Any video embedded in a Queen's webpage must include captions (closed or open) for users who cannot hear. Captions are also very important for users who choose to have sound turned off by default. A 2019 US study found that 92% view videos with the sound off on mobile. It also notes that 80% of consumers are more likely to watch an entire video when captions are available. The inclusion of descriptive text (for users who cannot see the screen) is also recommended.

Audio content should include access to a transcribed text file.

See also:

PDF and document downloads

For both accessibility and usability, critical site content should not be “locked away” in a pdf or other format that needs to be downloaded before viewing. This is especially important for mobile phone users. Instead, include important information directly on the page. But when posting a PDF, ensure it has been created with accessibility in mind.

Learn more: PDFs and Documents

Additional resources

Resource – RGD: AccessAbility 2: A Practical Handbook on Accessible Graphic Design:

Resource – W3C Web Accessibility Initiative: Accessibility Fundamentals

Resource – See LinkedIn Learning (log in with your Queen's Net ID) for courses on accessibility, such as:

  Accessibility for Web Design
Host: Derek Featherstone
2h 4m Beginner

 UX Foundations: Accessibility
Host: Derek Featherstone
1h 20m Beginner