Verify your HubSpot CMS Site is Built for Accessibility

Inbound marketers are frequently proud of their ability to be empathetic in life. We understand that we live in a global society with multiple stories, backgrounds, and experiences. When developing marketing plans, keep in mind that consumers frequently face barriers to entry and that it is your duty as a marketer to remove those barriers and provide more equal access for your target market. The goal of working online is to be productive, and anything that makes the task more difficult is a barrier. Accessibility, according to HubSpot, isn’t a feature; it necessitates a considerate approach and careful planning.

A Brief Background of the ADA

The Americans with Disabilities Act of 1990 (ADA) was passed to ensure that disabled individuals are not discriminated against. Before we get started, I’d like to offer some definitions for a few terms that might be confusing.

The ADA defines disability as “a physical or mental impairment that substantially restricts one or more significant life activities; a history of such an impairment; or being perceived to have such an impairment.” The ADA’s requirements for nondiscrimination in the workplace pertaining to accessibility. (Web content is generally most accessible to digital marketers.)

 

Web Content Accessibility Guidelines

The Web Content Accessibility Guidelines (WCAG) were created to establish a global standard for web accessibility. WCAG 2.1, which was released in 2018, was developed with four principles in mind for online content: perceivable, operable, comprehensible, and robust. It’s worth noting that while accessibility is evaluated on a page-by.

LEVEL A

A website must meet 25 criteria in order to attain Level A conformance. The following are some examples of Level A conformity criteria: giving alt-text for all non-text content, ensuring that the site is accessible via a keyboard and that meaning is not derived solely from shape, size, colour, or other visual characteristics. Level A is the lowest level of compliance, and if your site’s pages do not meet this standard, disabled users will have a hard time if not an impossible task interacting with it.

LEVEL AA

Level AA is the next level of WCAG compliance, and it should be the goal for any website to achieve.

To achieve AA compliance, you must first meet all of the Level A criteria as well as an additional 13 criteria. The level A and AA requirements differ significantly in terms of colour contrast ratio and some mobile accessibility factors.

LEVEL AAA

The WCAG’s highest conformance level is AAA, which builds on the AA requirements you must meet another 23 criteria in order to attain AAA. This isn’t the industry norm because not all types of content may achieve this conformance degree. The differences between A and AAA are comparable to those between AA and AAA in terms of colour contrast ratios requirements and the number of mobile accessibility issues addressed.

Working Draft of WCAG 2.2 Scheduled for Spring 2022. 

Lawsuits for ADA non-compliance typically involve physical barriers to the entrance (e.g., failing to provide a wheelchair-accessible ramp), but in recent years, private business websites have been considered “places of public accommodation,” making website accessibility issues fall under the umbrella of the ADA. 

 

Accessibility Resources for Developers 

Developers who are savvy use the methods and techniques outlined in this article to create a website that is fully accessible. Here are some developer tools that may be used to improve web accessibility.

ARIA TAGS

The semantics or exposed meaning of HTML elements may be altered using accessible rich internet applications (ARIAs). The objective of utilizing ARIA is to make web content and programs more accessible to persons with disabilities.

ALT TEXT

The alt text gives context to search engines as well as people who use a screen reader when reading your material. This is frequently presented as a string of text that explains photographs or the video’s transcript on your site. It’s a common misconception that alt text should be used for EVERY element of non-text content on your website, especially if an image serves.

CONTRAST/BOLDING

One of the most prevalent WCAG compliance mistakes is failing to provide contrast/bolding. Depending on the type of text, there are various levels of conformance for colour contrast and bolding in order to achieve AA standards. For normal text, the objective is a contrast ratio of 4.5:1, while for big or bold text.

SCREEN READING TECH

Developers must comprehend how screen reading technology interprets web material differently than humans do. Screen readers turn HTML files into speech or braille so that people with visual impairments can read your website. Using semantically rich HTML tags to organize your code helps screen-reading technologies gain the context they need to correctly interpret your site.

 

How Can I Test My Website’s Accessibility? 

There are a lot of apps and tools for testing and improving accessibility available on the market. You may take many routes to assess your site’s accessibility and see how you can improve it. Here are some alternative ways we suggest evaluating and improving the accessibility of your website.

Lighthouse via Chrome DevTools

Open a Google Chrome browser, right-click on the page you wish to audit, and select “Inspect.” DevTools’ Lighthouse tab should be selected. To run a report on a specific website, choose “Accessibility” for Categories and then “Generate Report.” Lighthouse reports provide a thorough analysis of the current page and an accessibility score for it, as well as a list of tests that succeeded and failed. This report, as well as the other Lighthouse reports, can offer important information about the overall health of the site and its accessibility.

WAVE Extension

The WAVE tool was developed as a resource for web content developers specifically. Our developers are big fans of this tool for auditing accessibility for the following reasons: 

  • Errors are visually overlaid on the page to help developers easily decipher issues 
  • WAVE differentiates between contrast and parsing errors. 
  • WAVE links to the WCAG documentation and provides plain English explanations and best practices for addressing that specific issue. 

To get a comprehensive site audit, install the WAVE Browser Extension.

 

Manual Site Audit

However, any type of automation is only a small portion of the equation. The various accessibility measures described above might get you started, but nothing can compare to the human touch for properly assessing and optimizing your website. An accessibility audit is a very hands-on process that needs careful preparation. Work with a knowledgeable partner who will adapt their approach to your unique business demands while taking an empathetic and thorough approach to accessibility. 

Increasing the usability of your website can help you reach a wider audience, improve your SEO, and avoid legal issues.