When developing or redesigning a website or a web application, accessibility should be evaluated and taken into consideration in early stages and throughout the entire development process. By paying attention to the accessibility during the entire process the possible problems can be identified and addressed at an early stage.
There are several different tools that help you with the evaluation. However, it’s important to bear in mind that no tool alone should determine if the website or web app meets the accessibility standards - comprehensive human evaluation is always required as well. This blog post discusses the different tools and how to make the most of them. The post is part one of the HubSpot Dev Questions blog series, written for everyone searching for answers to development related questions or simply interested in HubSpot development.
But before we move on to the evaluation tools, what are the accessibility standards, actually? The Web Content Accessibility Guidelines (WCAG) is an internationally recognized standard published by The Web Accessibility Initiative (WAI) of The World Wide Web Consortium (W3C). The guidelines are a set of recommendations for making web content more accessible, primarily for people with disabilities but also for different kinds of user agents, such as mobile devices.
In this section, we introduce you to a set of evaluation tools that will help you to evaluate the accessibility of any website according to the Web Content Accessibility Guidelines (WCAG). Website links to these tools are also provided below.
One of the most common tools for improving the quality and accessibility of websites is Lighthouse by Google. Lighthouse is an open-source, automated tool that can be run against any web page, public or requiring authentication. The Lighthouse tool can be used to audit performance, accessibility, SEO and more.
Lighthouse can be run from the command line in Google Chrome DevTools or as a Node module. What you do is give Lighthouse a URL to evaluate and it runs a series of audits against the page, generating a report on how well the page is performing. After the evaluation you can use the failing audits as indicators to see how to improve the page. Each of the audits has a reference doc explaining why the audit is important and how to fix it.
Lighthouse on Chrome Dev Tools
Here is a tutorial on how to run Lighthouse in Chrome DevTools.
Install and run the Node command-line tool
Run Lighthouse as a Chrome Extension
In this section, we discuss how to pay attention to the accessibility in practice and what are the main tasks and you should keep in mind when evaluating the accessibility of any website or web application. For more HubSpot-specific information, visit HubSpot's blog that provides you with a lot of useful tips and tricks for HubSpot developers.
All images, icons, videos, and buttons that convey meaning or are interactive should have a text alternative. Not only is this good for visitors that are consuming your content via a screen reader, but it is also great for search engines.
Lazy image loading is a common performance enhancement technique for building websites. The method used to actually lazy load matters for accessibility.
Links, buttons, and form elements all need to have actual text that indicates what it does or where it goes. Otherwise, screen readers will read out that the user has a link or button selected but will have no idea what it does.
Don’t use 'display: none' to hide form labels and other descriptive text. This prevents text from being read aloud for those with difficulty seeing, as well as harms users who can see but have trouble seeing the text due to lack of contrast on the placeholder text.
Use CSS that makes the text invisible without hiding it from screen readers or add the '.screen-reader-text' class.
screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
position: absolute !important;
width: 1px;
}