It can be challenging and overwhelming to know where to start when ensuring your website is WCAG 2.0 compliant. If you're not fully up to speed, as of June 30, 2021, the AODA (Accessibility for Ontarians with Disabilities Act) requires all businesses and non-profits with 20 or more employees to comply with Web Content Accessibility Guidelines (WCAG) 2.0 Level AA.
If you're unsure where your website stands and whether it meets basic accessibility requirements, we've put together a few basic checks you can do.
1. Missing the "Skip to Main Content" button
Hard of sight or non-sighted users who use a screen reader should have an option to skip repetitive navigation or content. This hidden "Skip to Main Content" button allows them to go directly to the page's main body content without having to go through 10 menu items, social share buttons, and other navigations on the page.
Basic check: Load a page and SHIFT+TAB backwards through and past your main navigation.
2. Language Settings
If your site supports other languages, you should also set the language of the page, or in some cases, the paragraphs/quotes they appear. The shortlist on why this is helpful: screen readers read characters and words more precisely. This helps display characters and context for braille readers and helps those who aren't fluent in reading a language but can understand a language by interpreting the content presented.
Basic check: Inspect element on your page or paragraph and look for HTML span or div lang=en or lang=fr
3. Text & Background Contrast
Text on contrasting backgrounds is surprisingly one of the most common failures we encounter. When we use a light grey text on a white or blue background, our naked eye may tell us it's okay, but users with visual impairments would say otherwise. The best practice is to stick to extremes when setting text for styles or content. Avoid similar colours for text, backgrounds and hover effects on links and buttons.
Basic check: Using a colour contrast analyzer, compare the hex code of your text to the background and ensure its 4.5:1 ratio.
4. Matching Link Labels Directing to Different Pages
We often see websites defaulting to using clickable terms like "Read More" or "Learn More." Unfortunately, this creates problems for screen reader users who navigate sites via link lists because it will only read "Learn More" without any context. Instead, apply a visually hidden label that screen readers can read aloud that includes the title of what "Learn More" is about. For example, "Learn more about News Item Title."
Basic check: Turn on a screen reader, navigate to the "Read More" link, and listen to how it reads.
5. Alt Tag on Images
Alt tags not added to images are another common issue we see across pages, content and documents on websites. An alt tag is a text alternative applied to images that describes the image for those who cannot see it. All images, even decorative images without information, should be set to ensure site readers can interpret and translate them to a user. Decorative images should be set to null "" for their descriptor. Images that convey information should have a short alternate description tag set when uploading. For example, "Person signing a document."
Basic check: Have your website administrator open a page within your CMS and check the alt tag properties of the image.
These checks are a great start, but we recommend reviewing your website's accessibility in more depth. Industrial offers full site reviews, accessibility fixes, and even training to ensure your team is educated and updating your website with accessibility standards in mind. Our training sessions cover issues related specifically to your site, how to prevent these issues from recurring, and a collection of do's and don'ts when populating content.