Accessibility

The Ontario.ca Frontend team is committed to helping developers create websites that work for everyone. By making experiences that are accessible to people with disabilities, we can improve the reach and remove barriers for more people online in Ontario.

What is web accessibility?

"Web accessibility" describes creating websites, applications, and tools that are designed to be usable by as many people as possible. This is traditionally thought of as being about people with disabilities, but web accessibility benefits many types of different people, including those with slow network connections or non-standard device sizes.

Accessibility supports social inclusion for everyone and has a strong business case. In Ontario, the Accessibility for Ontarians with Disabilities Act, 2005 (AODA) sets out accessibility requirements for websites published by a designated public sector organization or organizations with 50 or more employees.

Accessibility with Ontario.ca Frontend

The static HTML pages generated by Ontario.ca Frontend means that JavaScript isn’t required to access and navigate through content. You can build dynamic experiences without requiring client-side scripting, which reduces the likelihood of compatibility issues and makes it easier for assistive technologies to interpret and interact with the content.

The lightweight nature of static HTML also improves page load speeds and enhances your application's reliability and availability, which helps support any end-users with slower internet connections or limited bandwidth.

Improving web accessibility

There are a number of best practices to help ensure your application is accessible:

• Use your keyboard to tab through the pages and check whether you can reach and interact with each interactive control (links, buttons, form inputs, etc.) on the screen.
• Use Lighthouse, axe or Accessibility Insights to find and fix common accessibility issues in web development.
• Test for sufficient colour contrast with the accessibility colour picker in Chrome Developer Tools
• Employ accessible headings, landmarks, and semantic structure
• Include image, video, and audio text alternatives
• Test for screen magnification and zoom
• Ensure accessibility of interactive menus, modals, and custom widgets

Accessibility resources

• WebAIM WCAG checklist
• WCAG 2.2 Guidelines
• The A11y Project
• Check color contrast ratios between foreground and background elements