Accessibility Demo

Issue 1: Color Contrast

Flagged with WAVE

Flagged with axe

People with color blindness or low vision can have trouble reading text when the colors feature insufficient contrast relative to the background.

The Web Content Accessibility Guidelines (WCAG) identifies an acceptable color contrast ratio for body copy and headlines to ensure those used are perceivable.

Ratio of 3:1 for text larger than 24px (headlines)
Ratio of 4.5:1 for text smaller than 24px (body copy)
Ratio of 3:1 for non-text content (icons)

To test color ratios, use a color picker browser extension such as ColorPick Eyedropper (opens in a new window) and capture the color value you want to test. Paste that into an online color contrast checker such as Polypane (opens in a new window). You will also want to set the background color you are testing against.

If the color you are testing does not meet the required 3:1 ratio for larger text, or 4.5:1 for smaller text, Polypane suggests similar colors that do meet the acceptable standards. We can then go through our CSS and update colors universally.

In this demo, we will test the font colors used on this page, and update them to meet compliance.

Issue 2: Link Style

Not Flagged with WAVE

Not Flagged with axe

Links and other interactive elements are often accidentally made inaccessible for design reasons. The universally accepted underline style on text links can be overridden, relying solely on color change, such as on this sample link. If color change is the only indication a link is in focus, this will be lost on anyone who doesn't perceive color. A very bright blue turning very bright pink upon hover may appear as the same two colors for someone who is colorblind.

Including an additional hover effect that doesn't rely on color alone ensures interactive elements are better communicated.

In this demo, we will update the link style to change color and underline when hovering.

Issue 3: Hover & Focus Effects

Not Flagged with WAVE

Not Flagged with axe

Hover effects are helpful for those exploring a website with a mouse, but if you are using assistive technology or other means to navigate, interactive elements might never get hovered over. This is where focus comes in.

Focus style can be tested by simply clicking the tab key and observing how elements react while moving around a page.

Interactive elements should react when in focus similarly as when hovered over—by adding a :focus criteria to CSS anywhere :hover is declared.

In this demo, we will update all hover styles to also apply to focus events.

Issue 4: Link Context

Flagged with WAVE

Flagged with axe

Links are often used without including descriptive context. For example, this link here will only read as "here" when someone skips through using assistive technology. If there are multiple links with this same description, a user risks engaging with the wrong link destination.

This is also a common issue with e-Commerce product pages and blog listing sections. If every item in a list uses the same "Buy Now" or "Read More" link description, users may have a hard time selecting the correct link.

When possible, be more descriptive with the text you choose to hyperlink, or the way you label buttons.

Safe Display: None

For situations where you cannot provide better link text or button labels, there is a way to include additional context for assistive technology that does not change the appearance of links and buttons. Similar to how "display: none" can be utilized in CSS to hide elements, a safe, assistive tech-friendly CSS class can be used.

Before

<h5>Boots</h5> <a class="buyNow" href="..."> Buy Now </a>

With Hidden Text

<h5>Boots</h5> <a class="buyNow" href="..."> Buy <span class="atOnly">Boots </span>Now </a>

This hidden text instructs the link to read "Buy Boots Now."

In this demo, we will add additional context to the Sample Blog Listing "Read Now" links for assistive technology users.

Assistive Technology-Friendly CSS Class

This CSS class can include text for assistive technology users that others can't see.

.atOnly {
display: inline-block !important;
height: 1px;
left: -9999px !important;
line-height: 0px;
overflow: hidden;
position: absolute !important;
top: 0;
white-space: nowrap;
width: 1px !important;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

Issue 5: Icon Labels

Flagged with WAVE

Flagged with axe

Icons are often used without providing an appropriate description or text alternative. Font Awesome (opens in a new window), for example, is a popular library of icons that can be easily embedded on any website. Unfortunately though, the code provided does not include a description of what the icon is, resulting in invisible icons for some users.

One way to fix this is by inserting an "aria-label" in the embed code. This describes the icon even though it doesn't contain actual text.

Original Embed Code

<i class="fab fa-facebook"></i>

Embed Code With Aria Label

<i class="fab fa-facebook" aria-label="Facebook"></i>

This icon will now read "Facebook. Icon" when engaged with assistive technology.

Wrapping the icon in a link presents a new challenge. Links with no text inside—only images or icons—tend to cause errors for assistive technology. Instead of utilizing an Aria Label, we again have a chance to use the atOnly class to add text to the link, without its visibility.

Embed Code With Hidden Text

<a href="..."> <i class="fab fa-facebook"><span class="atOnly">Facebook</span></i> </a>

In this demo, we will add descriptions to social icons for assistive technology users.

Issue 6: Image Descriptions

Flagged with WAVE

Not Flagged with axe

Images must have an adequate description for screen reader users to understand what they are.

In HubSpot, an alt description is automatically set for images using the standard image module. This defaults to the name of the file, which is unlikely an actual description. It is up to the HubSpot user to update the description to something more appropriate.

Pro Tip: Alt descriptions can be long, but value your visitor's time. An image description should not be a barrier itself.

Because an alt description is applied by default, this is one of those issues that may not be caught by testing tools. Most check if an alt description is present, not if a description is acceptable.

In this demo, we will update the alt text in a HubSpot image module.

Issue 7: Heading Order

Flagged with WAVE

Flagged with axe

The visual design of a sentence may call for certain styles, but does that make it a section heading?

Heading tags control the size and style of different headings on a webpage, which help people understand its structure. Assistive technology users may skip through a page by <h3>s when they realize all listed products are using it.

When headings are only used for their visual attributes, and their structural value ignored, pages become very disorienting and difficult to navigate. This page uses <h3> tags as both section headings and pro tips. Imagine how hard that makes this to navigate if you are relying on headings to anchor each section.

Pro Tip: When structuring a page's heading relationships, remember: Progress without skipping heading levels. When returning back up, you can skip levels as needed.

This page is using an <h4> on the subhead directly under the <h1>, but it is not actually a heading. Rather than using a heading tag, the same design attributes can be applied with similar CSS classes. After adding the classes to your CSS file, we can replace <h4> with <p class="heading4">.

Before

<h1>Accessibility Demo</h1> <h4>A webpage built with accessibility issues to demonstrate how they can be fixed</h4>

After

<h1>Accessibility Demo</h1> <p class="heading4">A webpage built with accessibility issues to demonstrate how they can be fixed</p>

Another way to use heading tags but prevent them from messing up the page architecture is to add role="none". This tells assistive technology that the <h> tag can be ignored.

Using Role=None

<h1>Accessibility Demo</h1> <h4 role="none">A webpage built with accessibility issues to demonstrate how they can be fixed</h4>

In this demo, we will create heading style CSS classes, and replace those that are not actually headings on this page.

Issue 8: Form Labels

Flagged with WAVE

Not Flagged with axe

Forms present one of the most common sets of accessibility barriers for users.

HubSpot users accidentally cause missing form labels. The ability to remove field labels on published forms results in those fields becoming hidden to assistive tech users—even if there is placeholder text appearing to serve the same purpose.

Rather than removing the label from the form settings, it is better to hide the label with CSS, again, with an assistive technology-friendly CSS class. Target the specific form field label you want to hide, and add the atOnly CSS attributes.

.hs_email label {...

Note, because error messages are also labels, this class would also accidentally hide error messages from users. To avoid this, we can set the CSS class to not apply to error messages.

.hs_email label:not(label.hs-error-msg) {...

In this demo, we will fix a form with missing labels and hide them with CSS.

Issue 9: Landmarks

Not Flagged with WAVE

Flagged with axe

Assistive technology users rely on properly coded landmarks to efficiently navigate around a page. These are the main sections of webpages, and when defined, users can easily jump to their desired sections.

The following are landmark roles commonly used:

Banner: top of a webpage typically containing the main navigation
Navigation: main and secondary navigations on a page
Main: primary content of a page
Content Info: footer section
Complementary: page sidebar
Form or Search: form sections

A landmark can be defined by wrapping an entire section of content in the appropriate HTML tag, or setting a role. The main section of a webpage, for example, could be wrapped with <main>...</main>. This can be set in the design manager Wrapping HTML section.

Markup to Wrap Sections

<main role="main">
{ html }
</main>

<div role="form">
{ html }
</div>

In this demo, we will review how to set all content within appropriate landmarks.

Issue 10: Skip to Links

Not Flagged with WAVE

Flagged with axe

Once landmarks have been set, we can include "Skip to Links"—enabling assistive technology users to quickly jump to main sections of content without having to switch their device to Landmark mode.

Skip to Links are hidden navigation items only accessible via non-mouse interaction. Clicking the tab key will reveal the landmark options, and focus moves to the one selected. This is achieved with simple anchor links and section IDs.

Markup to Wrap Sections

<main id="main" role="main">
{ html }
</main>

<div id="form" role="form">
{ html }
</div>

Anchor Links

<a class="skipto" href="#main"> Skip to Main Content </a> <a class="skipto" href="#form"> Skip to Form </a>

In this demo, we will create Skip to Links to quickly move focus to main sections.

Accessibility Demo

Accessibility Testing Tools

Issue 1: Color Contrast

Issue 2: Link Style

Change of Color & Underline Upon Hover

Issue 3: Hover & Focus Effects

Before

After

Issue 4: Link Context

Safe Display: None

Before

With Hidden Text

Assistive Technology-Friendly CSS Class

Sample Blog Listing

Everything You Need To Know About Content Hub, HubSpot’s Newest Software

Understanding HubSpot's Upcoming Pricing Changes: A Comprehensive Guide

Leveraging HubSpot Service Hub for Your Business

Issue 5: Icon Labels

Original Embed Code

Embed Code With Aria Label

Embed Code With Hidden Text

Examples of Social Icon Links

Issue 6: Image Descriptions

Issue 7: Heading Order

The visual design of a sentence may call for certain styles, but does that make it a section heading?

Pro Tip: When structuring a page's heading relationships, remember: Progress without skipping heading levels. When returning back up, you can skip levels as needed.

Before

After

Using Role=None

Standard Heading Styles

Additional Heading Classes

Issue 8: Form Labels

Subscribe Form Example

Assistive Technology-Friendly CSS Class

Issue 9: Landmarks

Markup to Wrap Sections

Issue 10: Skip to Links

Markup to Wrap Sections

Anchor Links

CSS Styling

About

Our Work

Solutions

Resources

Partner With Us