HubSpot Dev Questions: Accessibility

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. 

Checking Tools

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.

WCAG Links

• This tester tool checks the pre-enhanced version of a website designed with progressive enhancement against Evaluera's "WCAG 2.0 Level-AA conformance statements for HTML5 foundation markup". What it does is creates a report that can serve as a broad and easily confirmed WCAG 2.0 Level-AA claim, even for enhanced versions.
• This website provides you with free color contrast analysis tools that will help you evaluate the possible color contrast problems by displaying the color contrast issues of a website or chosen color-pair according to WCAG 2.1 Guidelines. Color Contrast refers to how bright or dark colors appear when placed against each other on screens; particularly with regard to the relative, gray-scale luminosity as perceived by the human eye.
  
• A git repository that helps developers identify accessibility issues in HTML markup.
• Free Accessibility Audit. Get a summary and a detailed report. The summary web accessibility report will include plain-English descriptions of the top accessibility issues.

Lighthouse

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.

• In Google Chrome, go to the URL you want to audit. You can audit any URL on the web.
• Open Chrome Inspector (Right Click on the website > Inspect)
  
  
• Click the Lighthouse tab.
• Select Accessibility, choose device setting, and then Generate the report.
  
  

Install and run the Node command-line tool

• Install the Lighthouse. The -g flag installs it as a global module: npm install -g lighthouse

• To run an audit: lighthouse <url>
• To see all the options: lighthouse -- help

Run Lighthouse as a Chrome Extension

• Install the Lighthouse Chrome Extension from the Chrome Web store.
• In Chrome, go to the page you want to audit.
• Click the Lighthouse icon. It should be next to the Chrome address bar. If not, open Chrome's main menu and access it at the top of the menu. After clicking, the Lighthouse menu expands.
• Click Generate report. Lighthouse runs its audits against the currently-focused page, then opens up a new tab with a report of the results.

Accessibility in practice and using HubL effectively

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.

Provide text alternatives for any non-text content

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.

• Good example:
  <img src="" alt="">
  
• Bad example:
  <img src="">

Use a11y friendly lazy loading solutions

Lazy image loading is a common performance enhancement technique for building websites. The method used to actually lazy load matters for accessibility.

• Good example:
  <img src="" alt="" loading="lazy" height="200px" width="400px">
• Bad example:
  <img src="1px.gif" data-src=""  alt="">

Make sure that all links and form inputs have descriptive text

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;
}

Other tips and tricks

• Adding a skip to a content link: When a visitor is navigating using a screen reader, or just simply using their keyboard, it is super helpful if there is a way to skip over the sections of the page that are repeated such as a header.
• Use semantic markup: Semantic markup is HTML that conveys meaning. Some examples of the elements that are semantic are <header>, <main>, <footer>, <nav>, <time>, <code>, <aside>, and <article>. Some examples of the elements that are not semantic are <div> and <span>. Nonsemantic elements still have their place, but should be used primarily for presentation and not for conveying meaning.
• Fallback to roles if needed: When creating templates or coded files, you should use correct semantic elements (<header>, <main>, <footer>, <nav>, <dialog>, etc.) to communicate to web browsers and screen readers what type of content is inside your elements.