1/5 of people in the world have a disability. Whether permanent or temporary, a disability can prevent a person from accessing information on the world wide web. At the same time, you want everyone, regardless of their physical or mental abilities, to be able to easily use your website. The best way to do this is to make sure your website meets at least WCAG 2.1 AA standards. Learn more about those accessibility guidelines here.

How do I get compliant?

First, let’s make one thing clear, there is “compliant” or “non-compliant.” If your website is non-compliant, updating it to meet AA standards is easier than you may think.

Let’s go through some of the “big fish” to consider when starting this process.

Keyboard operability

Can your website users reach the bottom of the page they are on (yes, this includes the “Privacy Policy” and “Terms of Service” pages) using only a keyboard? A user should be able to navigate through every page of your site with the Tab key on their keyboard.

As a user tabs through the page and reaches a link on your page or an operable object like an arrow in a carousel, is that link outlined? Users with impaired vision may have trouble discerning shades of red or green, so they may not be able to understand what they have tabbed to unless a screen reader has read it to them, or an outline is present around the link.

Does using the keyboard to navigate your webpage happen in a logical order? If a user is meant to consume information in a certain order, make sure they can get to it that way.

Forms

Forms are frequently overlooked website components. If your forms are not compliant, you are alienating potential leads.

The biggest compliance factor to look out for is the type of validation. Users often incorrectly fill in a form field due to user error or unclear instructions. Being able to alert a user when a field is incorrectly filled out, point out where it is incorrectly filled out, and potentially touch on what needs to be fixed, are the gold standards for form validation.

Alt Tags

Nearly every website has an image of some sort whether it’s a logo, icon, hero photo, or a simple picture. Understanding when to fill out an alt tag and when to leave it blank is essential to providing users with context to what they are looking at. The bottom line is all images must have an alt tag, regardless of whether the tag is blank or contains words.

Like images, videos have their own unique set of compliance standards. There must be closed captions or a transcript of what’s being said in the video. Additionally, videos or images that contain flashing imagery must allow for the user to pause the motion on the screen.

Color Contrast

The most common flag for compliance issues is strange color combinations between text and background colors. The WCAG 2.1 standard states that text must possess a 4.5:1 color contrast ratio to the background behind it or it will not pass the minimum AA level of compliance. Even the simplest of color combinations such as certain shades of black on grey may not pass their contrast ratio. This is something nearly anyone can look for on a website.

Enlarged Text

A simple test anyone can do to test the minimum compliance of a page is to bump the browser text size up. If text size increases to up to 200% and page content and functionality are not lost, the website passes. Notice content disappearing, buttons flying off-screen, or even losing a chunk of the page altogether? This is a compliance problem.

The need for accessibility

All websites should be at least WCAG 2.1 AA compliant nowadays, but most are not. With the rise in court cases involving ADA compliance issues, website accessibility is at the forefront of becoming a requirement for building a website.

Looking to check your website accessibility, or redesign your site to meet compliance? The Imarc team is here to help! Let’s talk!