The Manitoba Government has formalized their roadmap for implementing Accessibility Standards on the web with the key dates of May 1, 2023, 2024, and 2025 for Government, public sector, and private sector respectively to make their websites compliant. While two or three years may seem like plenty of time, the exercise of getting existing websites to meet Web Content Accessibility Guidelines (WCAG) 2.1 AA standards can be daunting — and in some cases a new build may be the easier and cheaper choice.

There are some straightforward signs that your website may not be compliant, and this article should be able to help you determine what to pay attention to when looking at accessibility solutions. These new standards can either hold your web presence back or propel it forward, based on your implementation strategy.

In general, accessibility on the web refers to the WCAG version 2.1 laid out by the World Wide Web Consortium (W3C), which can be a lot to parse. The guidelines lay out multiple requirements that digital content should meet with the intention of allowing people with different visual, auditory, physical, speech, cognitive, language, learning, and neurological abilities to have the same access to online information. Compliance can target the A, AA, or AAA level with each level having stricter criteria then the last. Most legislation requires compliance to the WCAG 2.1 AA guidelines, which ensures a broadly accessible web, but still allows for freedom in design and the use of complex interactive components.

If you are trying to remember the key points of accessibility implementation on the web, what could be more memorable than ABBA? In this case ABBA stands for Access, Barriers, Bridges, and Anti-patterns, which are outlined below. To help relate the accessibility concepts we will be using a fictional company that sells eyeglasses to help illustrate each point throughout this article.

Who has access to your website and how do they use it? If you are serving internal tools or other authenticated platforms, they may not need to be meet the compliance standards outlined by the Manitoba Government, since the information is not available to the public. Though having a compliant public-facing website and an inaccessible authenticated experience wouldn’t be ideal for any visitor.

To relate this to our fictional eyeglasses company, let’s say they allow users to log in to track the status of the eyeglasses they have ordered. The ‘Account Management’ section, which is only accessible after a user has logged in, may not strictly have to meet the WCAG 2.1 AA standards, but it really should. The more people that can comfortably access the information your business makes available online, the better it is for everyone. If the visitors to your website are there primarily to read the content, you should make sure access and readability are what your website does best.

For our fictional eyeglasses company, we will choose to target the visual standards set forth by WCAG 2.1 AAA instead of AA, since the visitors of these websites skew toward having poor eyesight. This update will involve using larger text that has sharp contrast with the background; they will be using a gray which is indistinguishable from black for their text on a white background through most of the site. These visual updates will be carried into both the public-facing and authenticated sections of the site to maintain a constant look and feel through a visitor’s journey.

The next part of our exercise is to look for any barriers that your web presence is currently putting up for those who can access it. The web is accessible by default, but as we add layers of complexity, keeping that accessibility intact is important.

On the most basic level, your website needs to use the correct tags and syntax for the overall structure of the page. If your page uses many varied sizes of text without any rhyme or reason it could mean that your heading tags are not following semantic order, which may cause assistive devices and search engine crawlers to get stuck on your page. The information on your pages must be laid out clearly to meet accessibility standards but also to rank your page more predominantly in search engine results, which can drive more traffic your way. Displaying your website as an outline can help visualize how your page is parsed programmatically, so you can assess if your headlines are clear and page content flows like you would expect it to.

Another easy test is simply trying to use your page without a mouse. Pressing the tab button should allow you to highlight every interactive section on the page, though arrow keys should be used for menu navigation and radio button selection. If you’re unable to tell which element currently has focus while tabbing through your site, or your browser highlights elements that cannot be interacted with, then you may need some updates. Browsers will add large glowing outlines to keyboard focused elements by default, so if you can’t navigate your website with a keyboard, it could mean the wrong tags are being used or some default functionality and styles are being overridden.

The fictional eyeglasses company from our example has decided that all interactive elements should undergo a state change when the mouse cursor moves over them. Specifically, this update will make all the buttons on their site invert colours when a visitor hovers over them, going from white text on a dark blue background, to dark blue text on a white background with, a dark blue border. It is also adding a line underneath links that are in line with text. When moused over, this line will thicken and move a bit closer to the text link. Additionally, they will also be combing through each page to ensure that headings do not jump in levels.

The bridge refers to the steps that your website takes to reach out to visitors that may prefer to interact with it in a way that is more comfortable for them. This can range from something as simple as enlarging the text to offering a full accessibility suite for visitors to customize their experience. These suites will allow users to highlight all interactive elements, use sharp contrast mode, and prevent any videos from auto-playing. Pay attention to usability issues that you come across while using the web; these small issues can be absolute stopping points for visitors that interact with content using a magnification tool, screen reader, or keyboard only. Any steps that your website can take to let its visitors know you are interested in supporting their preferred navigation methods can go a long way.

Our fictional eyeglasses company has decided to override the browser default focus outline with a 4px wide solid pink border around the focused element when a keyboard is being used, since pink is not part of its colour palette otherwise. They will also avoid baking text into images so that assistive tools which increase text size will impact all text across the site.

The technical term “anti-pattern” is loosely defined as a series of well-intentioned decisions that end up working counter to a known and common way of completing a task.

When building new complex interactive pieces for your website, like our fictional eyeglasses website’s ‘Frame Customization’ feature and ‘Financing Calculator’ tool, we could see these arise. When a visitor interacts with a button or link on the website and the result differs from their expectation, that’s an indicator that a common pattern has been subverted. An example may be clicking on a button labelled “Next” and having a menu pop up with “Proceed”, “Skip to last” or “Cancel” options as this subverts the user’s expectation as to the next step in their journey. Inconsistencies through the interactions on your website can cause mental fatigue in visitors, especially those that are neurologically divergent or do not spend much time browsing online.

For our fictional eyeglasses company, the different options from the “Next” buttons were functionality ported over from the earlier version of the tool and the company has no data on usage. It has decided to install analytics tracking on the different options and will monitor which choice visitors are selecting most often. It will then use A/B testing to serve a version with the most popular choice as the default behaviour for the “Next” button and monitor drop off rates. Then, it will stick with the choice that performs best.

The first step toward an accessible web should be an audit of your current site, to understand if you meet the compliance guidelines. Browser extensions like AxE can be an excellent starting point, but please remember that at the end of the day your business can be held accountable if guidelines are not met. Trying to keep up with compliance can be a losing game as legislation and consumer needs continue to evolve.

As legislation becomes tighter there is an opportunity for your business to be heralded for not only meeting but exceeding requirements and providing the best experience to everyone that visits your website.