萌妹社区

Digital Accessibility

萌妹社区 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鈥痮f colour, size, typeface and sound.
  2. Operable: all users must be able to simply and accurately manipulate all interface and navigation components,鈥痶aking in account how they鈥痮perate their computers.
  3. Understandable: content and interfaces must be clear so that all people鈥痗an understand a website. Consistency of interface elements, intuition in appearance and operation, and鈥痯lain language鈥痑re part of this principle.
  4. Robust: robust鈥痺ebsites 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鈥檚 destination.
  2. Write Alt text for your images where required.
  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.

  • : The web page has a descriptive title tag that communicates the purpose and content of the page.
  • :  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. 

  • : Ensure your content is understandable without relying on a single sensory characteristic such as shape, size, visual location, orientation, or sound for meaning.
  • : 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.

  • : Identifying headings, lists, and tables provides important structural information, and allows assistive technologies like screen readers to locate and navigate these features.
  • Include : 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鈥檚 important to provide enough contrast between text and its background so that it can be read by people with moderately low vision.

  • : 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.
  • for assistance.

Make your content easier to read by following these rules.

  • Limit fonts:  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鈥檛 underline text: Underlines identify text as a link.
  • Use left-aligned text: Where possible, keep text aligned to the left for easier reading.
  • : 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.
  • : Adding space between elements, and adequate line-height makes it easier for those with visual or cognitive impairment to scan your content. 
  • : Remove content that could be disruptive or distracts from the intended purpose of the page, such as , 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.

  • : Avoid using phrases like 鈥渃lick here鈥 or 鈥渞ead more鈥. The purpose of the link should be understood by the text alone or within the context of the sentence.
    • Sample 1. Text alone: .
    • Sample 2. Link within context: This was very helpful.
    • What not to do: This information on descriptive links was very helpful.
  • 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. 

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

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

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

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

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