Is your site accessible, and is there a quick fix if it’s not?

Every single person with a website should be checking to make sure everyone who visits it can use it. Everyone who comes to the site should be able to get the same information, meaning, and as similar experience as possible from it.

So how do you go about figuring out if your website is accessible? How are you supposed to know if everyone can use your site?

Well, that’s where things get interesting.

How do you know if your site is accessible?

It’s a safe bet that your site isn’t accessible. It’s nearly impossible to get a “100% accessible” site. There will always be room for improvement. That’s where an accessibility statement comes in handy, so you can let people know what you’re doing to improve your site and how to report issues they have with your site.

This may seem like a monster task, but just like with anything else, if you break it down, it becomes much easier to understand and improve. So let’s break this up in a way that’s easier to digest.

The good news is that when you account for accessibility, you also end up benefiting things like SEO and user experience in the process.

One of the really interesting things about accessibility is that what you do for one of these groups of people benefit people in other groups, including people who may not have a disability, have temporary accessibility needs, or not use any assistive technology.

This isn’t an exhaustive rundown, but it’s an excellent place to start. These are all things that most website platforms allow you to control. You can also dive in to the post about accessibility testing tools to learn how to test for some of these things.

Mouse Users

You probably already know about people who primarily use a mouse to navigate websites. So let’s go over some things you’ll need to take into consideration when reviewing your website for mouse users:

• Your elements should have the right amount of contrast. You want to make sure your background and font colors contrast enough and are easy to read for anyone with color blindness, for example. This also means you’ll want to keep an eye on using text over images.
• Don’t rely on just color to convey meaning. This includes links like links, error messages, notifications, and so on.
• Links should have some other indication, like an underline. It should be clear what people should click to follow a link.
• Use big enough font sizes. Small fonts for your main text make your website content hard to read. And color contrast will be different depending on your font size and weight, too.
• Check your hover effects. Things should change enough so that it’s clear what you’re hovering over, while keeping in mind that color contrast mentioned earlier.
• Don’t autoplay audio or video, and don’t overuse animation. Don’t make someone hunt for what’s playing to stop it, and don’t make people dizzy.
• Text should be text, not images.
• Your form elements need labels that don’t disappear when you type into it. This makes it easier to remember what field you’re typing into.

Touch Devices

Now, what about people who are using mobile or touch devices? It’s common to review a website to make sure it looks good and actually works on different device sizes, but there are some additional accessibility considerations, too:

• Make sure there’s a big enough space to tap on things. People with big fingers or low dexterity should be able to tap things without accidentally tapping something else.
• Fonts should be big enough, and you should be able to pinch and zoom your site.
• Animation should be at a minimum. Everything you do on your site needs to be tested on various mobile and touch devices. Things act differently, and you might need to make some adjustments.

Visual Impairments

There are also people who may visit your website and use only their keyboard, use a screen reader, change color, font, and other settings on their computer, or use a combination of all of these. Some things to keep in mind here:

• Your heading order should make sense. One H1 as the first text on a page, followed by H2s. H3s only show up after H2s, H4s only come after H3s, and so on. Don’t choose a heading level based on style, choose it based on the right order.
• Be smart with your font choices. Try to limit your use of script and fancy fonts to decorative elements.
• Images, charts, and graphs need alternative text. Describe the image, and skip words like “image of” or “picture of”. There are a lot of things that go into writing good alt text, but at the very least, some kind of descriptive text conveying the purpose of the image should be there.
• Don’t use CAPTCHAs on your forms whenever possible. And if you do, don’t use ones that require someone to visually see and choose the options, and provide access to a human to bypass the CAPTCHA.
• Make sure any error messages that display, especially for forms, are clear and specific.
• Captions are great for someone with a hearing impairment, but you’ll also want to provide a transcript for your audio and videos.
• Limit your use of slideshows, accordions, popups, and other types of elements that hide content. They’re much harder to make accessible, and most of the time your content is easier to consume for everyone when you don’t use them.
• Try not to open links in a new window. It can be disorienting, and it’s best to let the user decide when they want to open a link in a new tab or window. If you do need a link to open in a new window, that should be indicated both visually and via screen reader.
• When you are creating links, put the link on text that describes where the link goes. Avoid only using words like “click here” or “learn more” as your link.
• Just like you did with checking hover changes for the mouse, you’ll check for focus changes for the keyboard.

Additional Considerations

Some other things to keep in mind when reviewing your website:

• Infinite scrolling makes it difficult to get to the footer of your website, which usually has some important information, including things like your accessibility statement, privacy policy, and other important links and information. So avoid it whenever possible and use pagination instead.
• Keep your navigation simple, and make sure there’s a “skip to content” link available for screen readers. The skip link is a little harder to implement if it’s not already there, but you can make sure your navigation is simple and that you can get to any subnavigation items using only your keyboard. Also make sure it’s easy to get to using a mouse. Sometimes the subnavigation items are actually incredibly hard to get to because you have to hover and move your mouse just right.
• Be mindful of what external resources you’re adding to your site. Anything you embed using scripts needs to be tested for accessibility just like your website does. A scheduling embed, a podcast player, a map — anything you add to your site should be reviewed.
• Review the reading level of your content. You want it to be easy to understand.

Is there an faster or easier way to make your site accessible?

There are tools out there known as “accessibility overlays” that promise to make your site accessible — all you have to do is add this one script to your site! This script then “fixes” issues by changing the site code to be “compliant” and adds a slide out menu that lets someone change different settings on the site.

There are a number of of issues with this, so let’s take them one at a time:

• These tools do not fix your site. They change the page when it loads. Remove the script, and your site is back to what it was.
• The slide out menu often ends up making your site harder to use for people not using a mouse.
• The settings that are available in that slide out menu sound great, but most of them are completely unnecessary, and these settings actually can sometimes end up making your site more inaccessible than it was before. And the one or two settings that may be helpful are usually done through browser or computer settings anyway.
• Because the script is easily identifiable in the code, it’s easy for a bot or automated tool to scan for a site using these tools. This means it’s easier to target these sites for lawsuits.

You can read more about the accessibility overlays at the Overlay Fact Sheet and Overlay False Claims websites.

There are some scanning tools that can help identify some issues with your site that you can then fix. There are free browser extensions from companies like Deque and Accessible Web that you can add to scan the site. There’s even a WordPress plugin you can install. These don’t change your site, but they do give you some guidance.

These tools won’t catch everything. Nothing replaces manually reviewing your site.

Where to go from here?

Review your site. You can click through the site and fix issues as you find them or learn about how to do a more formal audit. But you’re going to want to pick a method and start.

You’re never going to be able to predict every single way someone may use your website. Different zoom levels, color settings, computer settings, browsers, devices — there are so many variables to consider. But there are guidelines you can follow that help so many people better use your website.

The lists above help with the presentation of your site, what people see, hear, and interact with. When you’ve taken care of everything on this list, that’s when you can find someone to help you dive into the code part of accessibility review.

Some platforms might not give you access to the code of your site, but there still may be things you can do to improve it, including reporting the platform issues to the developers of it.

The most important thing is that you start, and that you make an effort to make sure your site is easy to use for everyone.