Knowledge Base

Best Practices - Accessibility

  • Updated

Higher Logic recommends that, when you are designing web pages and web-based collateral in Higher Logic Thrive Community (Thrive Community) and Higher Logic Thrive Marketing (Thrive Marketing), you consider the readability and accessibility of the pages — as well as how they will function for those who use assistive technologies, such as screen readers.

In Thrive Community and Thrive Marketing, web-based collateral that you might work with includes:

You should make sure that your web pages and web-based collateral are designed with background and font colors, images, fonts, and font sizes that:

  • complement one another,
  • are visually/aesthetically pleasing,
  • are easy to read for those with sight/vision impairments and other disabilities, and
  • maximize the benefits of assistive technologies.

TIP: Your audience is using myriad combinations of devices, browsers, and versions, so it's a good idea to preview your web-based content on a variety of these, while keeping in mind that older technologies might present challenges.

This article provides high-level, best-practice information on basic web-accessibility practices. The knowledge base articles have product-specific details on design options and settings that you can use in order to make sure your web-based content is as accessible as possible for as many people as possible.

Paragraph styles

Typically, we use various paragraph-based styles for aesthetic and organizational reasons, mostly to group related content and to separate unrelated content.

For accessibility, however, paragraph styles must be used in a consistent and deliberate manner because they indicate not only content, but context.

Keep in mind that, as regards accessibility, screen readers and other assistive technologies use HTML heading hierarchy in order to know what to read first, second, third, and so on. Your use of proper heading-and-text structure can better ensure that your content is:

  • presented (i.e., read aloud) as you intend it and
  • in an order that makes sense to the user.

Alternative states

It's important that user interactions with your web-based elements are obvious to the user.

Elements such as buttons and links to content have to have an alternative state (e.g., an underline or a color change) that clearly indicates an action is taking place or will take place.

For example:

  1. A text-based hyperlink is blue: This is a hyperlink.
  2. When the hyperlink is hovered on, an underline appears: This is a hyperlink.
  3. After the link has been clicked, the hyperlink text is purple: This is a hyperlink.

Page formatting

The formatting of pages and the proper use of common web page elements goes a long way to increase web accessibility.

Do

  • Use a one-column layout whenever possible.
  • Keep things simple.
  • Make clickable areas as large as possible to help those with diminished motor skills navigate and get the information they need.
  • Label buttons and links to indicate where it will lead a user.
    • Example: "Read more discussion posts" is better than "More."
  • Use a Sans Serif font because these are generally easier to read on electronic devices.
  • Use navigation and page titles that reflect what's on the page.
    • Example: "New information for Members" is better than "What's New."

Do not

  • Have a complicated, multi-level navigation. Main navigation items with a sub-menu should be all that's necessary.
  • Have low contrast between page elements and their hover states; refer to Color & contrast, below.
  • Depend on color for context.
    • Example: An assistive device will not pick up on your use of green text to indicate that something is correct and red text to indicate that something is incorrect.
  • Use images of text without labels or context.
    • Example: A picture of an exit sign is not a substitute for the words "exit sign," either in the text or as a label for the image.
  • Do not make anything blink or strobe. There is a section of the WCAG disability guidelines specifically about not causing seizures.
  • Use different fonts to indicate context.

Images

When you include images, it's important to keep in mind that text that has been embedded in the image is not identified as text; it, essentially, becomes part of the image. As such, it's very likely that assistive technologies will not even be aware of the text.

NOTE: Avoid putting text into/on images, especially if the text is intended to convey important information.

TIP: If you add text to an image, precede the image with explanatory text and/or use the tags features that are described below.

Image tags

When including images, it's recommended that you add text to:

  • Alt Text
  • Common_Description
  • Long description

This is because, in different browsers, assistive devices, versions, and parts of a website, any one of these fields could be the read-aloud source for the user; there's no way of knowing which, so it's best to complete all of them to ensure there's read-aloud material.

For the photo below:

  • Alt Text and Common_Description could read: "A dog chews a toy frog."
  • Long description could read: "A yellow Labrador retriever lies on a brown dog bed and chews on a green tree frog stuffed toy."
  • These three fields can be accessed via the Properties tab in the image uploader or by right-clicking the image in the editor and selecting Properties.

Color & contrast

For users with visual impairments or color blindness, color contrast is particularly important.

NOTE: Higher Logic strives for a color contrast ratio of at least 4.5:1 between text and background, as recommended by WCAG 2.0 AA.

In the following examples, the high contrast example is easier to read because the black text stands out on the gray background better than the gold text on the pale yellow background.

Low contrast

High contrast

Check your content

Use an online tool, such as WebAIM's or Contrast Checker, to ensure that the colors of your pages, fonts, and buttons have appropriate contrast. Note that font size affects contrast, measuring at above and below 18pt fonts. You can also view how your site looks with grayscales.

NOTE: While red and green are often-used action-button colors, they are not recommended because these colors are not easily discernible to all users.

POUR it on...

The Web Content Accessibility Guidelines (WCAG) recommend using the POUR Principles. This is a set of four guiding principles that you should review and remember to better ensure that your web content is accessible.

  • Perceivable - All users can experience your website, irrespective of visual and auditory impairments.
  • Operable - All users can interact with your website, even if they can't use a keyboard or mouse.
  • Understandable - All users can understand your website content and operation.
  • Robust - All users can access your website content on a wide variety of device types and versions, and across the scope of assistive technologies.

This is an introduction to the POUR principles. To learn more, see Introduction to Understanding WCAG 2.0.

Higher Logic resources

Higher Logic is committed to promoting accessibility and supports your efforts to do so.

  • HUG Connect is a series of live, monthly presentations; accessibility tips are sometimes the main topic.
  • The HUG Connect Resource Library has past presentations, some of which are dedicated to accessibility and/or community design.

NOTE: While much of these materials are geared toward Higher Logic communities, most of the concepts and practices are also applicable to Thrive Marketing (e.g., templates and messages).

Sites with accessibility information and guidance

There are numerous websites that offer guidance and best practices on web-based colors and design; many of them focus on the very accessibility considerations that are discussed in this article.

More importantly, many governments have websites that offer not only guidelines and recommendations, but information about their accessibility regulations and how such regulations apply to web-based collateral used in certain scenarios.

Government sites

Other sites

For additional information about web accessibility, check out:

  • World Wide Web Consortium (W3C), Web Accessibility Initiative (WAI)
  • Web Accessibility In Mind (WebAIM)
    • On their homepage, webaim.org, there are links to accessibility training, evaluation, and certification

 

Was this article helpful?
4 out of 4 found this helpful
Return to top

Can’t find what you’re looking for?

Create a Case Call US Support