Digital Accessibility

About Web Content Accessibility Guidelines

Web accessibility requirements refer to the navigation, design, and coding considerations that help visitors using different types of web-enabled devices and visitors with disabilities use website. The requirements of WCAG 2.0 follow four principles which provide criteria to make websites perceivable, operable, understandable and robust for persons with various types of disabilities. 

  1. Perceivable: web-based content and interface components must be presented in ways that all users can perceive. This takes into consideration the effect of colour, size, typeface and sound.
  2. Operable: all users must be able to simply and accurately manipulate all interface and navigation components, taking in account how they operate their computers.
  3. Understandable: content and interfaces must be clear so that all people can understand a website. Consistency of interface elements, intuition in appearance and operation, and plain language are part of this principle.
  4. Robust: robust websites can be reliably interpreted by a wide variety of browsers, devices and assistive technologies.

Top 10 Digital Accessibility Tips:

Follow these tips to make your content more accessible, and avoid the most common digital accessibility errors.

  1. Make link text meaningful by describing the content of the link’s destination.
  2. Write Alt text for your images where required. Learn more about Alt text and when to use it.
  3. Do not use images of text if you can just use text. If you have text in your graphics, make sure the text is duplicated in the page or social media text.
  4. Avoid relying on colour or images to convey meaning.
  5. Make sure your text is readable on the background by using colours that contrast at least 4.5:1.
  6. Avoid using PDFs to share information. Create a webpage, or provide an equivalent experience that is accessible, such as a Word document.
  7. Organize your content by using descriptive headings, and use tables for data purposes, not as a layout tool.
  8. Avoid flashing, flickering, or scrolling content.
  9. Make media accessible by providing transcripts to accompany audio or video
  10. Keep your text readable by being conservative with colours, uppercase, italics, or bold text. Reserve underlines for links only.

Applying the Essentials to Your Digital Content

Keep these essentials in mind when adding content to your website, or when creating content or documents that will be shared online.  Follow the links for more details.

Being consistent helps users learn how to use your site.

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.

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

Additional Support

Online Service Hub

Visit our online service hub to submit a ticket for technical problems, or to make a request for IT support or resources. 

Virtual Service & Support

Drop-in on Zoom to connect with an Education Commons expert.

Monday to Friday
11:00 AM to 3:00 PM EST

Book a Consultation

Make an appointment to talk with an Education Commons expert at a time that works for you.