Make Your Website Accessible Now

Here’s what you need to know

You may be missing out on a larger audience that could be contacting you this very moment. Awareness of the need for online accessibility on websites is increasing, and the Canadian government has made the move to update its accessibility laws to include the online content of large organizations.

 Their website explains that, “by law, you must make new and significantly refreshed public websites accessible if you are:

  • a private or non-profit organization with 50+ employees; or

  • a public sector organization

The organization that controls the website must meet the accessibility requirements.”


The Ontario government has concluded that, by 2014,  the above organizations needed to have complied  with new accessibility legislature if their sites have been created or “significantly refreshed” post-2012, and all of the above websites need to observe the accessibility requirements by 2021. Basically, all websites need to “meet [Web Content Accessibility Guidelines] WCAG 2.0 Level AA...”

 

So, what does this mean?

Apart from memorizing every section and subsection, here’s what you really need to know:

A bunch of international website experts created 3 different levels (or grades) of compliance. Just like with beef,  AAA is the most delicious, but there are more rules that farmers need to follow to achieve this level. With websites, AAA is complete accessibility for everyone (which doesn’t have a required date at this point). A, which is enforced today still, means that you have to have alternatives for text and for non-text, if requested. AA is where sites need to be by 2021 if your site was created prior to 2014 and now if your site is new, which includes a few more changes that need to be made to make it even easier for everyone to use your site.

 The WCAG have been separated into 4 principles (in the acronym of POUR)  that make them easier to remember:

  1. Perceivable: Users must be made aware of the components of your website in the ways that they need (such as alternative texts for photos and videos).  

  2. Operable: Users must be given the right amount of time to absorb the content on your page and to use your website in other methods than just with a mouse (all content should be accessible via keyboard)

  3. Understandable: Websites should be understandable to people with any impairments (making your website navigation predictable and have input boxes and errors clearly labelled).

  4. Robust: Websites should be adaptable to accessible technologies and aids.

You can find out all of these WCAG principles and their sections on the W3 website.

 

Some ways that you can make your website more accessible now:

ALT TAGS

Use alt tags (alternative text) on photos. One of the easiest things you can do is take the time to describe the photos you’re posting on your website.

CAPTIONs

Make subtitles and captions for your videos. It’s easy and makes it possible for people with hearing disabilities to be able to enjoy your content. This is one of the most needed additions (with 357,000 fully deaf Canadians and over 3 million Canadians who are hard of hearing) and yet so many websites continue to post videos without adding subtitles.

Larger font SIZE

Make your text big enough (we recommend a heading size of at least 16-18 depending on the lowercase x height) so that people can read it easily, especially on a mobile phone, but even for desktop. It’s also a big help for people who are farsighted or are seeing-impaired.  Here is a change on our site we made to make it more readable for our visitors:

 
 

You can see how even the smallest change in font can make a sentence accessible to readers.

periods

Put periods in abbreviations. Screen-readers won’t be able to interpret abbreviations like F.B.I if you don’t add the periods in. Also, short forms such as Can. for Canada, may not be read properly either.  

COLOR

Be careful with colour. Some colours are hard to see for some people, so make sure you use more than just colour to convey meaning.  Try using more than just blue to highlight links. The use of colour is also great for readers with learning disabilities.

USE CONTRAST

Do not have the same colour for your text as you do for your foreground (1.4.3). This means don’t put dark grey over light grey.  When we first created our new version of sparkslc.ca, we had initially used a dark shade of grey over a lighter one. We fixed this by changing the font colour so that the contrast is easier to read.

To check if your website has the right contrast ratio of at least 4.5:1, try WebAIM’s tool on their website.

 
AccessabilityChange2.png
 

You can see that the words are much more clear to read even without an impairment.

Links

Make links easy to find. underline, change the colour, and change the font of your links so that people can find them easily without having to go searching for it. Also, instead of saying “click here” with a link, try saying “read our information page” and link that instead, so that if they can’t quite find the link, they can still find the page elsewhere.

SEARCH

If you have tabs at the top of your website that link to other pages, provide a search option, table of contents or some second way of finding webpages within the site (This will have it adhere with AA rules).  Let your visitors know where they are on your website also by highlighting that specific tab. Here is an example we did with our website:

 
 

Our visitors will now know that they are on the “Our Team” page of the website because it changes colour when hovered or clicked.

The future is here and it’s a good idea to be first at developing content for everyone instead of the business that joins the movement when it seems you had no choice.

 

If you need help making your site more accessible, visit our services page. To read more about the legislation visit the Ontario government’s website.