Back

Website Optimization Tips For Accessibility & AODA

person navigating a site

Site Accessibility & AODA

Accessibility is a big part of making websites accessible for everyone which is why the Ontario government has created an act called “Accessibility for Ontarians with Disabilities” which aims to make the web more user-friendly for those with limited access to the internet. Which they describe through their purpose and definition on their website.

Purpose and definition

1. Recognizing the history of discrimination against persons with disabilities in Ontario, the purpose of this Act is to benefit all Ontarians by,

(a) developing, implementing and enforcing accessibility standards in order to achieve accessibility for Ontarians with disabilities with respect to goods, services, facilities, accommodation, employment, buildings, structures and premises on or before January 1, 2025; and

(b) providing for the involvement of persons with disabilities, of the Government of Ontario and of representatives of industries and of various sectors of the economy in the development of the accessibility standards.

https://www.ontario.ca/page/accessibility-ontarians-disabilities-act-annual-report-2020

Because there are many people who use the internet on a daily basis with visual impairments it can be a massive obstacle to navigating websites that have not considered these components in their sites. 

This article will teach you some of the basics of how to design websites that are accessible to all users. One great resource to check out is Accessibe to improve the accessibility of your website. With expert auditing, testing, and a powerful access widget this tool is a great option for websites looking to improve their accessibility. 

Quick Tips On Making Your Site More Accessible 

To ensure that your site is accessible, check out these four easy ways to make your website more accessible.

  1. Utilize Accessibe’s AI simulated audit to fine comb through the website and find areas for opportunities on improving your site accessibility.
  2. Provide alternative text also known as “alt text” for images. This will allow screen readers to describe what each image represents. 
  3. Make sure the body font is set to a minimum size that is still easily legible for people who are partially blind. If you know a large number of site visitors are older consider using font sizes between 17px to 19px for your body font rather than the typical range between 11-14px.
  4. Use sans serif fonts on the site. These fonts are easily recognizable and are easier for elderly & visually impaired users to read on your site.  While some fonts seem like a greater option due to the accents on the characters it will have an impact making it less legible for some of your users. 
  5. Run your site through a screen reader tool. These tools will ensure that your site is matching the standards of accessibility for your users 

Add alt text to images.

Alt text is used by screen readers to describe images. As an example the image below of the laptop on a desk you can put an alt text “Laptop beside a mug on a desk” that describes the image. If you use images on your website, make sure to add alt text to them so that they are still visible to those with visual impairments.

Laptop beside a mug on a desk

Include captions on videos.

Captions are also helpful for people who are deaf or hard of hearing. They allow them to hear what is being said even if they cannot see the speaker.

Ensuring Your Body Font is Accessible 

You should also ensure that the font is large enough for people with low vision to see clearly. This means making sure that the text is at least 16 points (or larger) in size as a general guideline. 

We recommend to businesses to be ensuring that their main body fonts are within the range of 17-19px and for the heading fonts to be approximately 1.5-2.5 times larger depending on the heading to be on the safe side.

Deciding Between Serif & Sans Serif Fonts

Another way to address accessibility in your site is to choose fonts that are easier on the eyes. While some people prefer serif fonts because they look more professional they have lost more popularity due to sans serif fonts because they’re easier on the eyes.

In general, sans serif fonts are more readable because they’re less distracting. If you would like to find some fonts for inspiration you can visit the Google Fonts link to see some web-optimized sans fonts. 

Using Colour on your website 

Many businesses use color as a way to get a user to understand where to click or perform other necessary actions on the site. However, AODA recommends that color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. 

Some great ways you can convey an action is by adding icons or text that tells a user the action we want them to take on the site. Check out a great example below on how to better optimize your buttons to be more accessible for your visitors. 

Before optimization 

After optimization 

Provide alternative ways to navigate your site.

If you use Flash on your site, make sure there are alternatives available. You should provide links to other sites that do not require Flash. Also, consider providing text descriptions of images so that users with visual impairments can still view your website.

Screen Reading Tools

Website accessibility tools allow people who cannot see to access information on websites. They include screen readers, which read aloud web pages for users; magnifiers, which enlarge text so that it’s easier to read; and other tools that provide audio descriptions of images and videos.

We recommend two tools to check out when running through your site accessibility 

Accessibe

Even though we brought up this tool earlier this is definitely still a great tool for testing the accessibility of your website. The industry-leading AI Auditing tool can automatically recognize areas of your website that can be improved such as the menu, forms, page landmarks, and more. This tool also provides some great training resources to help you ensure your site is accessible.

Click here to check out accessibe

VoiceOver – Apple’s built-in screen reader.

VoiceOver is an easy-to-use screen reader designed by Apple specifically for Mac OS X. It reads out loud what’s happening onscreen, making it possible for visually impaired users to navigate websites and apps.

NVDA

This free open-source screen reader was created by the National Federation of the Blind to help those with visual impairments to access the web. However, it is also a great tool for developers to use when testing the accessibility of their website. 

In conclusion, website accessibility optimization is important for both site visitors and businesses. By following the guidelines above, you can make your website more accessible to all users, which will improve their experience and lead to an increase in conversions through your site.