Making Your HubSpot Website WCAG 2.1 Compliant

1.1.1 Non-text Content

MCS Accessibility Team

MCS Accessibility Team
Last Updated July 23, 2020

The following directions are part of a full step-by-step guide to making a HubSpot website WCAG 2.1 AA compliant. These recommendations are intended for websites managed on the HubSpot CMS but can be adapted for other content management systems. In addition to explaining the WCAG Success Criteria and how to address them, this guide also describes how the AudioEye Managed solution may address each issue.

LEVELA
Success Criteria

1.1.1 Non-text Content

  • Resolved
  • Partially Resolved
  • Manually Managed
  • N/A - Level AAA
Principle: Perceivable
Information and user interface components must be presentable to users in ways they can perceive.
Guideline: Text Alternatives
Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.

All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed below.

  • Controls, Input: If non-text content is a control or accepts user input, then it has a name that describes its purpose. (Refer to Guideline 4.1 for additional requirements for controls and content that accepts user input.)
  • Time-Based Media: If non-text content is time-based media, then text alternatives at least provide descriptive identification of the non-text content. (Refer to Guideline 1.2 for additional requirements for media.)
  • Test: If non-text content is a test or exercise that would be invalid if presented in text, then text alternatives at least provide descriptive identification of the non-text content.
  • Sensory: If non-text content is primarily intended to create a specific sensory experience, then text alternatives at least provide descriptive identification of the non-text content.
  • CAPTCHA: If the purpose of non-text content is to confirm that content is being accessed by a person rather than a computer, then text alternatives that identify and describe the purpose of the non-text content are provided, and alternative forms of CAPTCHA using output modes for different types of sensory perception are provided to accommodate different disabilities.
  • Decoration, Formatting, Invisible: If non-text content is pure decoration, is used only for visual formatting, or is not presented to users, then it is implemented in a way that it can be ignored by assistive technology.

View Official WCAG 2.1 Compliance Techniques

  • This criteria is partially resolved and/or detected with AudioEye Managed but may require some manual intervention and/or collaboration with AudioEye.

Understanding 1.1.1 Non-text Content

"All non-text content that is presented to the user has a text alternative that serves the equivalent purpose."

This can simply be thought of as providing an appropriate alt-text description for screen readers. We typically think of this for images, but this applies to all elements other than actual text. For example, graphic icons like a shopping cart symbol also need an appropriate label or description. 

Let's consider what "appropriate" or "equivalent purpose" means. The following are a few examples of what you might find set as the alt text for an image:

  1. alt=" Image-085445789.jpg "
  2. alt=" Main_Hero_Image_03 "
  3. alt=" Black-Friday-Sale-Animated.gif "
  4. alt=" Keyword Keyword Keyword "

None of these do an acceptable job of communicating exactly what the actual image is. When the alt text is the only way a person using a screen reader can experience an image, it's important that we are as descriptive as possible.

alt="Animated hero image of a woman with shopping bags jumping over people. Black Friday Sale: 30% Off Everything" 

This may seem like an unusually long description from what we are accustomed to, but when this level of detail is appropriate, it should be presented. Keep in mind, though, people leveraging a screen reader should not be punished with unnecessarily long descriptions. In fact, certain screen readers limit image alt descriptions to 150 characters. Staying concise is key. If you are just setting a label for a graphic checkout icon, don't feel obligated to describe the color, size, stroke width, and so on. Use your discretion and describe with care.

How AudioEye Helps

Web accessibility software AudioEye identifies and addresses 1.1.1 failures in a number of ways. Certain images may be remediated through automated processes, while others may be manually observed and fixed by AudioEye testers and developers. The reason this success criteria is only set to partially resolved is because:

Most site owners will benefit from authoring their own alt text and, over the long run, will not want the AudioEye solution or AudioEye personnel authoring site content that impacts the way images are conveyed to users relying on screen readers or the descriptions that might have an impact on a site’s SEO score. This is particularly true for online retailers. Relying on any 3rd party to author image descriptions isn’t advised.

While AudioEye is effective at keeping images optimized to meet the Success Criteria, we always encourage site owners to take the little bit of time required to author short, meaningful descriptions on their own.

As you can imagine, there are instances where the AudioEye solution comes in very handy (especially with regard to non-critical images and those that require a deeper understanding of the Success Criterion in order to determine whether the image should be determined decorative or not), but generally, 1.1.1 is something that needs a significant amount of manual control and attention. Even though AudioEye’s managed service can be effective at managing your descriptions, site owners are encouraged to author their own site content.

Where AudioEye is incredibly helpful here is with adding icon descriptions, which are often overlooked and, in many cases, optimized as decorative, which keeps them ignored by screen readers and yields a more efficient screen reader user experience. 

Recommended Solutions

  • HubSpot gives you the ability to add alt text for all images and icons when placed within a standard HubSpot image module or inserting an image in text. Use this area to appropriately describe images and graphics with the screen reader in mind.
    HubSpot-Alt-Text-Control-On-Images
  • When placing images with raw HTML, be sure to include the alt="description" attribute in the code. 
  • If the element you are trying to add a description to does not have a way to add alt text, you can insert a span element and apply an aria-label.

    Example 1: Social Media Icon
    <i class="facebookIcon">
    <span aria-label="[description]" ></span>
    </i>

    Example 2: Div with and Image placed with CSS

    <div class="teamPhoto">
    <span aria-label="[description]" ></span>
    </div>

 

Exceptions

1.1.1 has the following exceptions: Decoration, Formatting, Invisible: If non-text content is pure decoration, used only for visual formatting, or not presented to users, then it is implemented in a way that it can be ignored by assistive technology.

It could be argued that graphic icons above a blurb of copy are "decorative" as long as it is not communicating something additional to the copy it is paired with. Hiding these elements from screen readers is a better experience than the screen reader having to stop on them. 

To hide an element like this, you would need to add aria-hidden="true" to the image code. 

     <img src="[Image URL]" aria-hidden="true" />

This is not currently something that can be applied in default HubSpot modules.

 

For more information, please visit the official W3C article: Understanding 1.1.1 Non-text Content


Download the WCAG 2.1 Compliance Checklist

What to expect if you download this checklist

Video: What to Expect If You Download this Checklist

Checklist Download

Questions?

Let us know if we can help you address this specific WCAG Recommendation.

Recent Morey Creative Studios Blog Articles