Digital Accessibility

Being consistent helps users learn how to use your site.

• Use descriptive titles: The web page has a descriptive title tag that communicates the purpose and content of the page.
• Provide consistent navigation:  Menus that appear on multiple web pages appear in the same order

Your content should not rely on visual cues, such as colour, placement or size for meaning. Using visual characteristics can be a powerful and effective way to communicate and is a useful method for many users including those with cognitive limitations, however it should not be the only way to understand your content. 

• Use more than sensory characteristics: Ensure your content is understandable without relying on a single sensory characteristic such as shape, size, visual location, orientation, or sound for meaning.
• Don't rely on colour: Colour should not be used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. 

Non-visual users rely on headings and structure which identify the parts of a web page and how they are organized in relation to each other. Modern web editors such as WordPress and Drupal will create this structure for screen readers automatically when content is identified accordingly.

• Provide important structural information: Identifying headings, lists, and tables provides important structural information, and allows assistive technologies like screen readers to locate and navigate these features.
• Include Headings and lables: Identify headings by styling as headers (H1, H2, H3, H4, H5), in hierarchical order, and ensure there is an H1 on every page.
• Avoid using heading styles to increase the size of your text. Remember that headings create semantic meaning for screen readers and therefore should not be used for paragraphs.
• Avoid using tables for layout.

It’s important to provide enough contrast between text and its background so that it can be read by people with moderately low vision.

• Check your contrast: Make sure the contrast between text and background is at least 4.5:1, and large-scale text has a contrast ratio of at least 3:1.
• Try a colour contrast tool for assistance.

Make your content easier to read by following these rules.

• Limit fonts: U of T branding prescribes one font for headers and titles and another for body copy. Using no more than two fonts is a best practice for both graphic and web design.
• Limit colours: Colour can be a great tool but should be used with purpose to draw attention to headings, buttons, and other specific and consistent elements.
• Avoid using all caps: All caps gives words a uniform rectangular shape, making it hard to tell them apart.
• Don’t underline text: Underlines identify text as a link.
• Use left-aligned text: Where possible, keep text aligned to the left for easier reading.
• Design for scale: Does your text resize without elements overlapping or clipping? Except for captions and images of text, ensure text can be resized without assistive technology up to 200 percent without loss of content or functionality.
• Embrace space: Adding space between elements, and adequate line-height makes it easier for those with visual or cognitive impairment to scan your content. 
• Remove unnecessary content: Remove content that could be disruptive or distracts from the intended purpose of the page, such as flashing animations, moving images, or auto-playing sounds.

Plain language helps minimize barriers by making your content easy to understand.

• Use shorter words and sentences where possible.
• Limit the length of paragraphs to three sentences, and consider how your text would look when resized on a mobile device.
• Plain language also improves ease of interaction, as clear headings and labels make it easier to navigate and operate a website or web application.

Make sure your links describe what they do or where they go.

• Write descriptive links: Avoid using phrases like “click here” or “read more”. The purpose of the link should be understood by the text alone or within the context of the sentence.
  • Sample 1. Text alone: See examples of descriptive links.
  • Sample 2. Link within context: This information on descriptive links was very helpful.
  • What not to do: This information on descriptive links was very helpful. Read it here.
• Identify links: Text links should be identified by an underline. If the link is also coloured, or in a button, be sure the text colour is in contrast with the background by at least 4.5:1.

As everyone interacts with your content differently, both text and images can be used in a complimentary way to add meaning and equivalent experiences for your users. 

• Include alt text: Including alternative text adds meaning to images for those with limited sight. Be sure to use a concise description that describes the image in relation to its purpose on the page. Find out when to include Alt text.
• Indicate linked images: if the image is also a link, for example the logo on a website linking to a homepage, be sure to indicate that in the alternative text.
• Have a text alternative for Infographics: Infographics summarize complex concepts visually. Be sure to include a link to the text version of your graphic to meet accessibility requirements. See the WebAim sample.
• Use graphs and charts: Graphs assist with understanding complex information provided in text. Make sure to accompany complex data with a graph, and a graph with a text description of the data.