COS Reference

Table of contents
Close

Making your content accessible

As websites continue to become more and more critical to businesses, ensuring that content on websites is accessible to all visitors has become more vital than ever. In the United States, this is often called section 508 compliance, which refers to the section of the Reauthorized Rehabilitation Act of 1998 that requires federal agencies to make electronic and information technology accessible to people with disabilities. While section 508 compliance is a good baseline, increasingly the Web Content Accessibility Guidelines (WCAG) 2.0 are being used as the standard for creating accessible content on the web.

HubSpot is committed to making sure that we have provided the necessary tools to help you make your content accessible. While not a definitive guide, here are some steps that you can take to make your content accessible.

Provide text alternatives for any non-text content

All images, icons, videos, and buttons should have a text alternative. Not only is this good for visitors that are consuming your content via a screen reader, it is also great for search engines. The alternative text should describe the content of the image. You can read detailed instructions on how to add alt text to an image here.

alt-text.png

For videos, use a service that supports captions and consider including a transcript. Some services that support uploading transcripts include Youtube, Vimeo, and Wistia.

Make sure that all links and form inputs have descriptive text

If using an icon, provide screen reader text. For example, some standard HubSpot themes use a icon shortcode:

<a href="https://www.facebook.com">[fa icon="facebook-square"]<span class="hs-screen-reader-text">Facebook</span></a>

Don’t use 'display: none' to hide form labels and other descriptive text. Instead use CSS that makes the text invisible without hiding it from screen readers or add the '.hs-screen-reader-text' class.


.screen-reader-text {
   clip: rect(1px, 1px, 1px, 1px);
   height: 1px;
   overflow: hidden;
   position: absolute !important;
   width: 1px;
}

Adding a skip to content link

CSS-ID declaration

When a visitor is navigating using a screen reader, it is super helpful if there is a way to skip over the portions of the page that are repeated. We can do this by adding a link that points to the main content of the page.

In your header, add a custom HTML module with the following content:

<a href="#content" class="hs-screen-reader-text">Skip to content</a>

Then, in every template ensure that there is a module or group with a Custom CSS ID. Adding an id can be done via CSS Declarations (Gear Icon > Edit CSS).

Use semantic markup

Use links (<a />) or buttons for all clickable controls.

Use <th> in tables for column and row headings and <thead>, <tbody>, and <tfoot> to denote sections.

Keyboard navigation

Some visitors must use the keyboard or some sort of assistive device that emulates a keyboard to navigate websites.

  1. Make sure that ':focus' is styled so that when a user is navigating via the keyboard they can see what is focused.
  2. When hiding/showing portions of the page with ':hover' or via Javascript, make sure that users are also able to navigate those controls via Javascript or that there is alternative path to the information.

Add roles to denote landmarks

Adding landmarks makes it easier for users that are using screen readers to jump between the major sections of a web page. HubSpot includes 'role' attributes to the Simple Menu, Advanced Menu, and Google Search modules.

When creating templates or coded files, you should also add role attributes for the header (role=”banner”), footer (role=”contentinfo”), and main content block (role=”main”). This can be done using wrapping html in the design manager.

Wrapping HTML role attribute

Additional design tips

  1. Make sure that when a user zooms their browser to 200% content remains visible and readable.
  2. Avoid using color as the only way of communicating information. A surprising percentage of the world population is color blind.
  3. Make sure that there is sufficient contrast between the color of text and the background so that users with limited vision are able to read the content
  4. Avoid animations that flash rapidly (more than three times per second) as it could trigger seizures in some visitors.

More accessibility information