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

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

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

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

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

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

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

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

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

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.