Accessibility Toolkit

What are WCAG design principles?

Web Content Accessibility Guidelines (WCAG) 2.0 Level AA are an internationally recognized set of recommendations for improving web accessibility. They explain how to make digital services, websites and apps accessible to everyone, including users with impairments to their:

  • Vision - like severely sight impaired (blind), sight impaired (partially sighted) or colour blind people
  • Hearing - like people who are deaf or hard of hearing
  • Mobility - like those who find it difficult to use a mouse or keyboard
  • Thinking and understanding - like people with dyslexia, autism or learning difficulties

WCAG 2.0 is based on four design principles:

  • Perceivable - any user can perceive the content
  • Operable - any user can operate the navigation and interface
  • Understandable - any user can understand the information and the interface
  • Robust - assistive technologies can interpret the content

Information from Gov.UK's Understanding WCAG is licensed under the Open Government Licence 3.0.

Incorporate the following steps to create accessible materials that reach the widest range of users.

 

Consider the diversity of your audience so that you can develop content that all users can use and understand.

 

Visit the Government of British Columbia's Audience Diversity web page to learn more about diverse groups in the province.

 

  • Consider using gender-neutral design – such as colours, text, icons, and shapes – and ensure media choices demonstrate a wide diversity of people and roles

Use the GOV.UK's Digital Service's accessibility user profiles as you discuss ideas and concepts.

 

  • Consider whether what you're thinking about will meet WCAG design principles and will be used by people with impairments to their site, hearing, movement, memory and thinking.
 

 

‎Consider accessibility at every stage in the design process. Use Universal Design for Instruction (UID) principles to address barriers in instruction, materials and content.

 

Ask yourself:

 

  • Do I have visual materials that present core concepts that not all learners may be able to see or understand?
  • Do I have multimedia materials (e.g., audio, video) that present core concepts that not all learners may be able to be hear, see, or otherwise access?
  • Do I have documents that present core concepts in a format that not all learners may be able to access?

Working this way helps identify and fix issues early rather than address expensive time-consuming fixes at a later stage.

 


 
 

‎There are fundamental writing and formatting techniques that are simple to do and make a huge difference for your audience.

Write for the web

Review the Government of British Columbia's Inclusive language and terms page to learn more about using language free from prejudice, stereotypes or discriminatory view of specific peoples and groups.

 

Visit the Web Accessibility Initiative's Writing for Web Accessibility to learn how to:

Make audio and video media accessible

Visit the Government of British Columbia's Using video and multimedia page.

Learn how to add captions in videos using the following applications:

 

Learn how to add transcripts with audio files using the following applications:

 

Provide sufficient colour contrast

Visit the Government of British Columbia's Using colour and contrast page to learn about appropriate contrast between text and background.


Visit Carnegie Museum's Color & Contrast page to find colours with maximum contrast.


Add ALT-tags to informative and decorative images

Visit the Australia Government's Content Style Guide for tips to add ALT-tags to informative and decorative images.

Add accurate links

Visit the Australia Government's Content Style Guide for tips to write accurate links rather than using 'click here', 'read more' or 'useful links'.


Ensure keyboard accessible interactions

Visit the University of Toronto's Accessible Learning Object Design site for steps to ensure keyboard accessibility with Articulate Storyline.

 

Visit the University of Washington's Designing for Keyboard Accessibility page for tips to test content through keyboard commands.

 

Make electronic documents accessible

Visit the Government of British Columbia's Create accessible documents page for information to make Microsoft Word, PowerPoint, and Excel documents, and Portable Document Formats (PDFs) accessible.

 

Make virtual meetings accessible

Visit Queen's University's Accessible Virtual Meetings page for practical strategies to improve learning experiences for everyone, and specific accessibility features in Zoom and Microsoft Teams. 

 

‎Use the following checklist to align your web content and electronic documents (Microsoft Word, PDFs) with WCAG 2.0 Level AA.

 

It's important to do manual and automated testing to uncover issues with design and content. You'll miss some issues if you only do automated testing.

Automated testing

Use tools such as the Wave web accessibility evaluation tool and Google Color Contrast Analyzer to catch some accessibility issues before manual testing.


Manual testing

Use the accessibility checklist created by 18F to find problems, including:

  • Lack of keyboard accessibility
  • Link text that's not descriptive
  • Lack of colour contrast for text and important graphics and controls
  • Images not having meaningful alt text

You should also do some testing with common assistive technologies. When possible:

  • Do some testing with assistive technologies yourself
  • Find user research participants who use assistive technologies to vet your content before it is published.

Information from Gov.UK's Testing for accessibility is licensed under the Open Government Licence 3.0.

 


 
 

‎You should add an Accessibility Statement after you have tested your content and it's ready for go-live.

 

Accessibility statements provide learners with an overview of accessibility features available in your content and contact information in case there are any problems.

 

Review an example course with an accessibility statement at the Washington State Department of Labor & Industries.

 

Review the following resources for more information about embedding accessibility and inclusion into your design and development processes.

Accessibility

Inclusive Design