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:
Queen's Accessibility Hub offers many resources, including how-to information on website accessibility.
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.
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.
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.
Convert single image files to HTML with multiple image files
"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]">.
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.
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
Pass – 8:1
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
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.
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’s University, click here
Good link text:
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’t use the attribute target="_blank")
Article – Nielsen Norman Group: Opening Links in New Browser Windows and Tabs
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.
- Video Captions and Audio Transcripts tutorial on the Accessibility Hub
- Additional information regarding captioning services is available on the ITS site.
- "Accessible Web Animation" article by Val Head
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.
Resource – RGD: AccessAbility 2: A Practical Handbook on Accessible Graphic Design:
Resource – See LinkedIn Learning (log in with your Queen's Net ID) for courses on accessibility, such as: