Making Your Website Accessible to Everyone

Many separate accessibility standards development processes exist in Canada. Ontario, Manitoba, and Nova Scotia all have laws that mandate creation of provincial accessibility standards. 

As associations grapple with delivering services in a post-Covid world, it’s become more important than ever to ensure that our initiatives and communications are accessible and inclusive. This year’s CSAE Trillium Technology Day urges you to seize the opportunity to leave no one behind. This article examines one area where you can take concrete steps to be a more inclusive, welcoming association – CSAE. 

The AODA, or Accessibility for Ontarians withDisabilities Act, was created to ensure that everyone gets fair and equal access to programs and services by recognizing, eliminating, and ultimately averting barriers to entry wherever possible. By having your website comply with the AODA, you are not only providing better access to those who may not otherwise be able to use your services, but you are welcoming a greater number of members to your association!

There are many things to consider when designing your website to be accessible; we will go over some of the more common aspects below:

Navigation

Website navigation can be difficult for those who are blind, have low vision, or have difficulty using a mouse or trackpad. By implementing keyboard-only navigation functionality, users will be able to navigate the entire page without a mouse. An example of keyboard-only navigation could include allowing website elements to be highlighted by using the tab and arrow keys, while using enter to “click” a selection.

Colour

Using a minimum colour contrast ratio of 3:1 when designing text, images of text, or graphics can help those with low vision, colour blindness, and total colour blindness. This ratio can become more drastic for better clarity; for instance, ratios of 4.5:1 are recommended for audiences experiencing vision loss related to age, and ratios of 7:1 are recommended for high vision loss. The higher the colour contrast between elements, the easier it becomes to interpret.

For examples of colours and text, click here.

Font and Scale

Large text remains more visible even at
lower contrasts. For example, size 14 or 18 font will not have the same
contrast requirements as size 8; however, this does change depending on the
program in which the text is viewed, as the pixel density (and therefore
readability) may change.

Websites are recommended to accommodate for scaling up to 200%; if fields (e.g. headlines, text in a column, entire columns) disappear when a user scales text, this removes functionality from the user. However, if a user requires scaling about 200%, a zoom tool is recommended instead. You may want to offer your users a selection of scaling options and layouts in order to best display your website, regardless of scale.

Images

When it comes to images, it is best to always provide alternate text for those using screen readers—a brief description of the image will go a long way to provide clarity. Additionally, where possible, use text instead of images of text; not only will this facilitate screen readers, but images often resize poorly and pixelate if
scaling or zooming is used.

Audio

When possible, autoplay should be disabled, or else be limited to fewer than three seconds. Autoplay negatively affects those who use text to speech programs—especially if the screen reader is set at the same base volume as the user’s other media, which is typical. Ideally, sounds should play only on user request.

Forms

If your website has digital forms of any kind—from newsletters to member sign-up—you’ll want to ensure that they comply with the AODA. Use both colour and text when indicating required fields.

For instance, highlighting a field in red and adding * Required * next to it will make it obvious to everyone, including those with colour blindness and screen readers.

Additionally, disabled form elements should be greyed out and made inactive
(unclickable).

When it comes to indicating errors in forms, highlight and clarify the mistake while also indicating how to fix it. For instance, if the user uses the wrong date format, have your form indicate this by highlighting the field in red, adding ** beside it, and adding text that shows how to write the date instead (YYYY/MM/DD). This will help those with low vision, blindness, and colourblindness, and as well as offer an example that will help all users understand what the site is looking for.

Making a website accessible to everyone is a goal that all associations should strive for, big or small. After all, when you level the playing field, everyone benefits and has more fun.

Learn more about leveraging technology for success at CSAE Trillium’s Technology Day — it is open to everyone across the country!