Knowledge Base

Best Practices - Accessibility

  • Updated

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

You should make sure that your web pages 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 pages 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 pages are 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.

NOTE: The size, font, and color of your styles (which are managed by HTML tags such as <h1>, <h2>, and <p>) can be universally changed (i.e., "find and replace all") using CSS.

A few basic rules:

  • Use H1 for all page headings.
  • Use H2 for all subtitles.
  • Use body for all paragraph text.

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. For example, it's much easier to click This is a map of North America than it is Map.
  • Label buttons and links to indicate where it will lead a user. For 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. For example, "New information for Members" is better than "What's New."

Do not

  • Use tables; data in tables is difficult to navigate when it is read aloud.
  • 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 or hover states.
  • Depend on color for context. For example, if you use green text to indicate that something is correct and red text to indicate that something is incorrect, an assistive device won't pick up on this.
  • Use images of text without labels or context. A picture of an exit sign is not a substitute for the words "exit sign" either in the body text or as a label.
  • Do not make anything blink or strobe. There is a whole section of the WCAG disability guidelines specifically about not causing seizures.
  • Use different fonts to indicate context.

Image tags

When uploading images, it's recommended that you add text to all three fields: Alt Text, Common_Description, and Long description. This is because, in different browsers, assistive devices, versions, and parts of a website, any one of these fields will be read aloud to the user. There's no way of knowing which will be the read-aloud source, 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. Compare the two examples below:

Low contrast

High contrast

You can use an online tool, like Contrast Checker, to ensure your page, font, and button colors have an appropriate contrast. Note that font size affects contrast, measuring at above and below 18pt fonts. You can also use this site to view how your site looks with graytones.

For those with color blindness, red and green, which are typical action-button colors, are not recommended. Also, check the contrast between button, hyperlink, and menu colors and their hover colors so that their hover state is clear.

Sites with accessibility information and guidance

There are numerous websites that offer guidance and best practices on web-based colors and design. More importantly, many countries have websites that offer guidelines and recommendations and, in some cases, their accessibility laws 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?
3 out of 3 found this helpful
Return to top

Can’t find what you’re looking for?

Create a Case Call US Support