Accessibility

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.

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.

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’s University, click here

  Good link text:

  Learn more about the history of Queen’s 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’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.

See also:

• 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.

Learn more: PDFs and Documents