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.
We’ve posted free resources to help you learn and apply web accessibility into your workflow.
How web accessibility benefits business owners
If you are a business owner, you may be familiar with the term bounce rate. The bounce rate of a website is the rate of how long users stay on a website. Unlike conversion rates that we want to be high, our goal is to have a lower bounce rate. The lower the bounce rate, the longer people are staying on the website.
On the contrary, a higher bounce rate indicates a poorly constructed site. A website that ignores the importance of accessibility and lacks necessary elements would be considered a poorly constructed site. A poorly constructed website includes things like non-responsive design, lack of color contrast, and missing form labels.
Our goal is to keep people on our website longer so that they discover more reasons why they should choose us over our competitors. A study found that 71% of disabled web users will leave a website when it is not accessible. This is a large enough percentage to have a significant impact against the overall bounce rate. Business owners must prioritize web accessibility to avoid potential loss of customers.
How web accessibility benefits developers and Google
If your web developer argues that web accessibility does not benefit them, then it may be time to find a new developer as it is just undeniable how vital web accessibility for developers is, especially nowadays. Developers aim to create high quality websites and know that the cleaner the code is, the faster their websites will run. If a website’s load time is slow or a website fails to rank high in search results, the development team is responsible. Cleaner code means faster, high quality code. Semantically correct code is cleaner code. Accessible code is semantically correct. This means that code is written according to specifications. HTML elements (code) have semantic meaning. Developers optimize a website’s accessibility and performance by using code as it is intended.
Aside from having fewer bugs and making a website load faster, semantic code also helps search engines such as Google and Bing to index the content and achieve higher search rankings. For example, let’s say that a web page is about comparing web development platforms such as WordPress and Shopify. The page visually uses headings to organize its content. The code of the page uses paragraph tags with classes (used for targeting styles) to create the visual appearance of headings like this:
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’s new in WCAG 2.2
Version 2.2 of the Web Content Accessibility Guidelines (WCAG) is here! Find our checklist for new success criteria and the guidelines of the latest version.
Accessibility in digital marketing: Things marketers should know
Check our guide to make your digital marketing efforts accessible! Unlock the power of web accessibility in marketing ensuring inclusive and user-friendly experiences.
The importance of color contrast in digital accessibility
In order for a website to be ADA compliant, text, user interface (UI) elements, and graphics that convey information must provide sufficient contrast ratios.