Accessibility Demo

This webpage features accessibility issues so we can demonstrate how to successfully resolve them.

Accessibility Testing Tools

This webpage has accessibility (a11y) issues. We will explore the barriers these present to visitors, and show how to fix them. To identify potential issues, testing tools can audit and report on programmatically discoverable errors. Two of those covered in this demo are WAVE by WebAim, and axe DevTools by Deque.

WebAIM Wave

WebAim WAVE is a suite of evaluation tools that checks individual webpages and identifies a11y issues.

axe DevTools

axe DevTools is a Google Chrome extension that inspects webpages in your browser for a11y issues.

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 and capture the color value you want to test. Paste that into an online color contrast checker such as Polypane. 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.

ColorPick-Eyedropper

ColorPick Eyedropper tool picking a color on this page

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.

Change of Color & Underline Upon Hover

a {
 color: #0C9DDE;
 text-decoration: underline;
}

a:hover {
 color: #dd09b8;
 text-decoration: none;
}

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.

Before

a:hover {
 color: #0C9DDE;
 text-decoration: none;
}

After

a:hover,
a:focus {
 color: #dd09b8;
 text-decoration: none;
}

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.

Buy-Now

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

Sample Blog Listing

Tips for Creating an Effective Landing Page

Critical for lead generation, increased conversion rates, and customer loyalty, an effective landing page should include persuasive headlines and copy, supporting images and video, calls to action (CTAs), customer testimonials, lead capture forms, and more.

Read Tips for Creating an Effective Landing Page Now

Morey Creative Studios CEO Featured on NYIT School of Management’s Podcast

Jed Morey was featured on New York Institute of Technology (NYIT) School of Management’s podcast In Reality: Lessons From Leaders & Entrepreneurs

Read Morey Creative Studios CEO Featured on NYIT School of Management’s Podcast Now

Key Takeaways From INBOUND 2021 About the Future of Marketing

From new sandbox functionality for developers to best practices on email, ABM and more, here are some of the key takeaways the Morey Team gleaned from INBOUND 2021.

Read Key Takeaways From INBOUND 2021 About the Future of Marketing Now

Issue 5: Icon Labels

Flagged with WAVE
Flagged with axe

Icons are often used without providing an appropriate description or text alternative. Font Awesome, 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.

Examples of Social Icon Links

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.

HubSpot Image Module: Automatically pulling file name as alt text.

A HubSpot image module with default alt text set to "image2309280-112.jpg." This description is pulled from the file name automatically, and demonstrates how important it is to update this manually.

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">.

Page Heading Screenshot

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.

Standard Heading Styles

h1 {
  font-size: 70px;
  margin-bottom: 25px;
}
h2 {
  font-size: 55px;
  margin-bottom: 25px;
}
h3 {
  font-size: 42px;
  margin-bottom: 25px;
}
h4 {
  font-size: 30px;
  margin-bottom: 4px;
}

Additional Heading Classes

h1, .heading1 {
  font-size: 70px;
  margin-bottom: 25px;
}
h2, .heading2 {
  font-size: 55px;
  margin-bottom: 25px;
}
h3, .heading3 {
  font-size: 42px;
  margin-bottom: 25px;
}
h4, .heading4 {
  font-size: 30px;
  margin-bottom: 4px;
}

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.

Subscribe Form Example

Assistive Technology-Friendly CSS Class

.hs_email label:not(label.hs-error-msg) {
  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 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. 

 

Wrapping-HTML-in-HubSpot-Design-Manager

Landmarks can be added in the HubSpot design manager by wrapping module groups and declaring an official landmark role.

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. 

 

CSS Styling

a.skipto {
  left: -999px;
  position: absolute;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: -999;
}

a.skipto:focus,
a.skipto:active {
  left: auto;
  top: auto;
  width: 30%;
  height: auto;
  overflow: auto;
  margin: 10px;
  padding: 5px;
  border-radius: 15px;
  text-align: center;
  font-size: 1.2em;
  z-index: 999;
}