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 you do not see a visual indicator with each tab, you need to perform remediation to ensure users do not get lost trying to navigate your website. Sometimes this will be as simple as adding CSS focus styles and other times it will involve updated JavaScript or jQuery to allow focus. Let us know if you need assistance locating the issue and we will help walk you through it.
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.
If you are a business owner, you may be familiar with the term bounce rate. The bounce rate of a website is the version of a metric that measures 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. Following the web accessibility guidelines can significantly contribute to reducing this rate. The lower the bounce rate, the better, because it means people are staying on the website longer. This is often adhered to within various web entities and is incorporated within their policies pertaining to user retention.
On the contrary, a higher bounce rate indicates a poorly constructed site version, particularly if it fails to meet web accessibility standards. A website that ignores the importance of accessibility and lacks necessary elements would fit this description perfectly. Elements of a poorly constructed site include things like non-responsive design, lack of color contrast, and missing form labels.
Our primary aim 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 a staggering 71% of disabled web users will leave a website version that does not fulfill accessibility requirements. This is a large enough percentage to significantly impact the overall bounce rate. Hence, all business entities must incorporate accessibility requirements into their policies to avoid a potential loss of customers.
A recent study done in Canada shows people with disabilities make up a big part of Canada’s population. It says that about 1 in 5 people aged 15 and older have at least one disability. That’s over 6 million people in Canada alone!
As a business owner, you need to opt for a professional web design and development agency who is well-versed in creating accessible websites. By doing this, you avoid losing many potential customers by not being inclusive.
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 seek services elsewhere. The value of web accessibility for developers, especially in today’s digital version of the age, is undeniable. Developers take pride in crafting high-quality websites and understand that cleaner code paves the way for a faster and more proficient website. If a website’s load time is slow or it fails to rank high in search results, the development team is usually held accountable. HTML elements (code) have semantic meaning, and web entities optimize their website’s accessibility and performance by using code as intended.
Apart from reducing bugs and enhancing loading speed, semantic code also aids search engines such as Google and Bing in indexing the content, thus facilitating higher search rankings. Let’s imagine a webpage version constructed to compare web development platforms like WordPress and Shopify and how its organization of content using heads and visual elements can increase its potential visibility.
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.
By David Gevorkian
David Gevorkian started Be Accessible because of his passion for delivering exceptional customer service. Prior to Be Accessible, he spent much of his early career working for financial institutions in sales, treasury, and product management. David earned his Master’s in Business Administration from Salve Regina University in Newport, Rhode Island. He discovered a common need for web and mobile accessibility during his previous roles, and as a result, he created Be Accessible to make accessibility in reach for any type of business. David is a strong advocate for creating aesthetic and accessible products usable by all people across the world.
Contact Us
Please complete all fields.
Recent Posts
Guide to Mobile App Accessibility Standards
Posted: October 2, 2024
Wondering how to make your app accessible that complies with ADA and WCAG? Read our checklist about accessibility standards for mobile apps.
