Is Your Website Accessible?

An open laptop displays a generic website landing page.

Is Your Website Accessible?

If you’re not sure of the answer to that question, your website is most likely not accessible. Public websites need to meet certain requirements by the ADA or they could be at risk of a web accessibility lawsuit. To prevent this from happening to you, it is crucial to test your website’s accessibility. This blog will provide a guide on how to effectively test your website. 

Check the Page Title

An open laptop displays a search engine website. On the table next to the laptop is a notepad with a pen on top.

When you test your website’s accessibility, the first thing you should do is check the titles on every page of your website. Each title should adequately and briefly describe the content of the page. The user should also be able to distinguish between each page of your website from the titles.

Make Sure There’s Alt Text for Every Image and Video

A Mac computer monitor displays four generic images in a webpage.

According to the Web Accessibility Initiative (WIA), “text alternatives (‘alt text’) convey the purpose of an image, including pictures, illustrations, charts, etc. and are used by people who do not see the image.” Alt text is necessary for blind and low-vision users to know what images and videos are on your website. If an image is interactive, it should describe what the user can do with it (ex. a magnifying glass search button should have “search” as its alt text.)

Check the Headings

A laptop displays a company webpage. On the table next to the laptop are various bottles with labels.

If your website has sections of information separated by headings, they should be big enough to distinguish that they are different from the rest of the text. This makes it easier to navigate your website without a mouse. The easiest way to make sure your headings are separate from the rest of the text is to put them into a hierarchy. 

For example: 

● Heading Level 1 <h1> 

○ Heading Level 2 <h2> 

■ Heading Level 3 <h3> 

● Heading Level 1 <h2> 

○ Heading Level 2 <h3> 

■ Heading Level 4 <h4> 

Check the Color Contrast Ratio

An open laptop displays a generic website article. On the table behind the laptop is a pitcher and empty glass.

If someone with low vision visits your website, they won’t be able to see the text if there isn’t enough contrast between the text and background. According to the Web Accessibility Initiative (WIA), “Web pages should also have a minimum contrast by default: a contrast ratio of at least 4.5:1 for normal-size text.” The most accurate way you can test this is by using the eye-dropper tool to select colors and see how much contrast there is between them.

Resize Text and Make Sure It Doesn’t Get Cut Off or Overlap Anything

A man holds a tablet device in his hands with a smart pen in his right hand interacting with the website displayed on the screen.

Along with color contrast, users with low vision need the text to be large enough to read it. Most browsers allow users to change the size of the text through text size settings, text-only zoom, and page zoom (which also zooms images, buttons, etc.) But you have to make sure that the text doesn’t get cut off or overlap anything when these settings are on. Try each of these settings on your website to see if the text is readable.

Test Your Website’s Keyboard Navigation

A woman sitting on a bed with an open laptop in her lap.

Many people with various disabilities rely on their keyboards to navigate websites, especially since assistive technologies rely on keyboard commands to work. Your website must be usable without a mouse for everyone to access it. To test your website’s keyboard navigation, try to use it with only the keyboard keys and see if it still works.

Check Your Website’s Forms, Labels, and Error Messages

An open laptop displays a generic user survey website with a coffee cup on the table next to the laptop.

Keyboard navigation also applies to every form, label, and error message on your website. All of them should be clear and usable without a mouse for your website to be accessible. To test if it’s accessible, try to access your website’s forms with only keyboard keys and make sure all of the labels and error messages clearly tell the user what to do.

Check Moving, Flashing, or Blinking Content

A dual monitor Mac computer displays various generic websites and image editing software.

It’s best not to put any moving, flashing, or blinking content on your website, including videos, carousels, ads, auto-updating stock tickers, scrolling news feeds, and more. But there are ways to make it accessible if you need to keep it. According to the Web Accessibility Initiative (WIA), “Users need to be able to control moving content, especially some people with attention deficit disorder or visual processing disorders.” Make sure that anyone who visits your website is able to pause, stop, or hide moving content and that nothing blinks or flashes more than three times in a row.

Check Your Website’s Basic Structure

A woman uses an open laptop that displays a generic webpage.

After all of the steps above are completed, the last thing to do is check the overall structure of your website. To make sure it’s completely accessible, check if the text makes sense if you read it in the order it’s shown, check if the alt text provides enough information for its corresponding images and videos, and check if every block of text has a clear heading above it. These steps are a great way to begin incorporating digital accessibility into your website.

If you have a hard time with any of these steps, Able IT Pros is happy to help you with testing your website and making sure it’s completely accessible! Able IT Pros utilizes test users for desktop and mobile sites and monitored testing with a minimum of 10 activities.