Hopefully, the coronavirus pandemic hasn’t caught you off guard, and we’re talking about more than the rush to buy toilet paper. Is your digital content accessible to everyone? If you’ve been ignoring the elephant in the room and have failed to make your website and digital documents accessible, you may find yourself scrambling to remove accessibility barriers faster than Costco sells out of the next toilet paper shipment.
To help you test your business website for accessibility, we’ve listed three easy checks below to help you evaluate your website’s accessibility. Please note that this is not an inclusive testing list. However, these simple accessible checks will give you a hint of how good or bad your website’s accessibility may be. Be sure to check out our Free Resources page for an extensive list of WCAG checks.
Test keyboard navigation
Keyboard accessibility is vital to a website’s accessibility. Assistive technologies use keyboard interactions to navigate a web page. Follow these steps to test keyboard accessibility:
- Click on the address bar. This will place focus at the top of the webpage.
- Put your mouse aside and resist clicking on anything else.
- Use the TAB key to start tabbing through the links and interactive elements. Use SHIFT+TAB to move the focus backward. You should see a visual focus indicator showing you where you are on the page. The image below is an example of an outline used as a visual focus indicator:
- If focus indicators are present, ensure the means used to display focus pass color contrast requirements. For example, if you use a black outline, be sure that the black has enough color contrast on each of the various background colors it overlays.
- For each link, button, or other interactive elements, use the SPACEBAR or RETURN/ENTER keys to activate the links. If you are unable to activate the links, further investigate to see what the keyboard is actually focusing on and correct the link or other interactive elements.
By ensuring your business’s website is accessible, you provide keyboard-only users a way to interact with your website. When your employees are forced to telecommute, preventing them from selling your goods or services, they will have a better user experience that improves your business’s efficiencies. After all, what is the point of a buy now button if it doesn’t actually allow everyone to buy now?
Test color contrast
Visual focus indicators are not the only thing to worry about when it comes to color contrast. Today’s digital world is full of colors. You also need to test text and graphic images that include text or other important information present with color. This includes all headings, subheadings, paragraph text, and important graphic text.
If you don’t already know the HEX or RGB values used on your website, there are a couple of easy ways to get them. The first technique we recommend is to use your browser’s developer (dev) tools to view the CSS. To access dev tools, simply right-click on the element you need to test and select Inspect if you are using Chrome or Edge and Inspect Element if you are using Firefox or Safari.
You will notice the option to use CTRL+SHIFT+I (OPT+CMD+I) if you’re on a Mac) to access dev tools. However, accessing them this way will not bring you directly to the element you need to test so we recommend accessing the dev tools by using your mouse to right-click on the element if possible.
Once you have dev tools open, as long as you right-click on the right spot, you should see the color used for the element. If not, try again and be sure you click on the element you need to test. For the screenshot below, I right-clicked on the h1 text, and you can see the HEX code #1761a2 for the blue h1 element.
We can use another technique to quickly grab the background color. We like the ColorPicker Eyedropper browser extension. This is a free tool available as a Firefox add-on or a Chrome extension. Select the tool and click on the color you need. The screenshot below shows the light blue background selected and we see the HEX code #CD8FE.
Now that we have our HEX codes, we can use the free SBF Color Contrast Checker/Analyzer to test the color contrast ratio. Using this tool, I entered both the foreground and background colors. We follow WCAG color contrast ratios recommendations, and you can see in the screenshot below these colors have sufficient color contrast.
You’ll want to follow these similar steps to test all of the text on your website, including text within graphics images. As a side note, we do not recommend using images of text if it’s possible to include the content as real text. Real text written in the HTML of your website is always the best option for accessibility.
If any of your colors do not have sufficient color contrast, you need to update your CSS or graphics to ensure users with low vision or color vision deficiencies can see all of the content of your website.
Check for text alternatives
Text alternatives are an alternative way of presenting content. Typically, text alternatives refer to video captions and alternative (alt) text on images. Thankfully, both image alt text and video captions are easy to implement. Not only will alternatives such as this increase your website’s accessibility, but they will also improve your SEO. Search engines can only crawl and index what they can see. This means if the text is not presented as actual text in the structure of a website, search engines such as Google or Bing will not index the content.
If you have video content, simply play the video and check to see that captions are available and accurate. If your videos do not have captions, consider using a free captioning tool such as YouTube’s free automatic captioning. Be sure to review the captions for accuracy, and include punctuation.
To check image alt text, you can use your dev tools again and view each image element to confirm the presence and accuracy of alt text. The screenshot below shows the alt text of a Facebook icon as a “Facebook icon.”
Alt text should accurately explain the image and not be too verbose.
If you have a lot of images on your business website, you can imagine that this will take some time. There is another free extension/add-on that can help speed things up. Chrome’s Web Developer extension (Firefox add-on) will display all of the alt text on each page of your website. After installing the extension/add-on, select it and then select Images > Display alt attributes. With the alt attributes displayed, you can quickly verify alt text is present and accurate for each image.
If your alt text is missing or the alt text is not accurate, most CMS systems have an easy way to add it. For example, in WordPress, select the image you want to edit from the Media library. While in the attachment details view, add a description in the alternative text field. The screen shown below shows the attachment details view on an image in WordPress with the alt text as New York cityscape.
If you have a web store and use Shopify to manage your website, you can use a CSV file to upload all of your product images and include the alt text as a column labeled Image alt text. If your products are already in Shopify. Export the products to a CSV, add the alt text descriptions and then reupload your products. Shopify will update your products to include the alt text from the new CSV file.
Next steps to complete web accessibility
Once you have an idea of how much accessibility your website provides, it’s time to take the next steps. We recommend completing the full web accessibility of your entire website. As mentioned above, our Free Resources page offers a couple of resources to help understand everything that needs to be tested on your website. If you need assistance performing an accessibility test, ADA compliance audit or remediating the errors you’ve already found, use the form below to contact us, and one of our accessibility experts will reach out to you right away.
We may not be able to prevent the coronavirus or any other viral pandemic, but we can definitely ensure your website is accessible ready for telecommuting. The increase SEO and faster speeds you can expect from an accessible website will not only bring more traffic to your website and provide high-quality user experience, but it will also keep you protected from viral lawsuit pandemic currently on the rise.
Please complete all fields.
What Web Design Agencies Should Know About Web Accessibility
The best web design agencies know how to create stunning websites that engage all users with intuitive designs. This includes users with disabilities.
WCAG 3.0: An Exciting WCAG Update
WCAG 3.0 will be easier to understand, cover more needs, and be more flexible. It will be similar yet very different from previous WCAG versions.
ADA Compliance for School Websites
Schools must understand web accessibility requirements, remove accessibility barriers, and prevent legal action due to poor website accessibility.