Web Accessibility Guide

Why It Matters?

Higher Logic is a community-first platform. It’s important to make sure all content can be useful for every member of your community, regardless of how they are consuming the content on your community site. This guide will help make sure you are doing everything in your power to get your content to EVERYONE!

Text Styles & Structure

Style and structure gives your text accessible stability.

DON’T: Just make text Bold and increase the font size. Just underline random text.

Why It Matters?: Random bolded text doesn’t mean anything to screen readers. Underlined text implies a link and can be confusing if it doesn't.

What To Do: Use the "Styles" or "Format" dropdown in your editor to select the right tag for your content. This creates semantic structure.

Image Demonstrating the Benefits of Proper Structure in HTML for Assistive Devices

<h1> = Most important / Page Title (Use only once)
<h2> = Main Section
<h3> = Sub-section

This creates a "table of contents" for assistive technology, allowing users to easily navigate your content.

DON’T: Have headings that are empty or have no text in them.

Why It Matters?: Some users, especially keyboard and screen reader users, often navigate by heading elements. An empty heading will present no information and may introduce confusion.

What To Do: Ensure that all headings contain informative content.

top

Image Descriptions

Images need descriptions, also known as alternate text or alt text, with context.

Why It Matters?: Images are great for conveying complex concepts, but screen readers will skip them entirely without alt text. Use alt text to allow the image’s message to be conveyed to screen reader users.

What To Do: When you upload an image using the "Insert/edit image" button, look for a field labeled "Alternative text" or "Description.":

Example Image:

Good Example: "A bar chart showing a 20% increase in member engagement for Q3."

Bad Example: "Chart.png" or "image"

If an image has text in the image itself, then that text should be included in the alt text if possible.

top

Link Text

Write links that make sense (No more "Click Here").

DON’T: Use vague phrases like “Click Here” or “Learn More.”

Why It Matters?: Screen reader users often navigate by pulling a list of all links on a page. Hearing "Learn More" or "Click Here" one after the other doesn’t help them find the content they are looking for.

An Image highlighting the use of descriptive links on Memberhome

What To Do: Make the link text descriptive of *where the user is going.*

Good Example: "You can read the <a href="...">2024 Annual Report</a> for more details.”

Bad Example: "To see the annual report, <a href="...">click here</a>."

DON’T: Have links that are empty or have no text in them.

Why It Matters?: If a link contains no text, the function or purpose of the link will not be presented to the user. This can introduce confusion for keyboard and screen reader users.

What To Do: Remove the empty link or provide text within the link that describes the functionality and/or target of that link.

top

Video & Audio

Videos & Audio should have captions & transcripts if possible.

Why It Matters?: If you're embedding a video (like from YouTube or Vimeo) or posting a podcast, you should provide an alternative for people who are deaf or hard of hearing.

youtube video transcript example

What To Do:

- Videos: Use the platform's built-in tools (YouTube and Vimeo both have excellent, free captioning tools) to add accurate, synchronized captions.
- Audio: Provide a full-text "Transcript" on the page right below the audio player.

top

Lists

Lists are for... Lists

DON'T (as plain text): Just type a hyphen or a number at the start of a new line - for example:

- Thing one
- Thing two

Why It Matters?: Ordered and unordered lists, when properly defined, provide useful information to users, such as an indication of the list type and number of list items. When text alone is used to present list structures and content, these benefits are lost.

What To Do: Use the Bulleted List (<ul>) or Numbered List (<ol>) buttons in the editor. This tells a screen reader, "You are now hearing a list with X items," which provides crucial context.

top

Background Images

Background images are meant to be purely decorative.

DON'T: Have informational content or text inside of a background image

Why It Matters?: Background images are not readable by screen readers so any information inside a background image would be hidden or lost for screen readers and users with visual impairments. Additionally, content or text in a background image may become cutoff on smaller screen sizes like mobile devices.

What To Do: Never rely on background images to convey essential information. Place important content in HTML text so assistive technologies can read it. If the background conveys meaning (e.g., a chart, text embedded in an image, or a photo critical to understanding content), then it should be placed as a static image in an HTML widget instead so you can include an alternative text for the image's content/text.

Good Example:
good background image example

top

Color Contrast

Text should always have a high or "acceptable" color contrast from it's background.

DON'T: Very low contrast between text and background colors.

Why It Matters?: Adequate contrast of text is necessary for all users, especially users with low vision.

What To Do: Increase the contrast between the foreground (text) color and the background color. Large text (larger than 18 pixel or 14 pixel bold) does not require as much contrast as smaller text.

You can utilize this Color Contrast checker as well to see if your foreground (text) and background colors either pass or fail the color contrast test!