1. Resources
  2. Accessibility

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鈥檚 reports regularly to provincial regulators on our overall compliance with such standards.

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

[accessibility icons graphic linking to the Accessibilty Hub website]

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鈥檚 can access Siteimprove, an accessibility auditing service that can identify accessibility errors as well as spelling errors and broken links.

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.

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鈥檛 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鈥檚 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

成人大片 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, ). 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

Link text

  • Ensure all linked text is descriptive. Avoid "click here" or "read more" as link text. Instead, link text should indicate what content a user will find on the other end of the link.

    Bad link text:

    To learn more about the history of Queen鈥檚 University, click here

    Good link text:

    Learn more about the history of Queen鈥檚 University

  • Ensure link text is unique on page; where the same link text is used, it should link to same URL.

  • Reserve the use of blue text style for links

  • Ensure links open in same window (i.e. don鈥檛 use the attribute target="_blank")
    Article 鈥

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 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 鈥渓ocked 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: :

Resource 鈥

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


Host: Derek Featherstone
2h 4m Beginner


Host: Derek Featherstone
1h 20m Beginner