"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:
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.
1. 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.
2. When placing images with raw HTML, be sure to include the alt="description" attribute in the code.
3. 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>
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. The best way to hide an element like this is to include a purposefully empty alt description. This indicates the image is decorative and does not need to be focused on.
<img src="[Image URL]" alt="" />
This is not currently something that can be applied in default HubSpot modules.