Over the years, Higher Logic has made a number of technical changes and upgrades across the online-community product to make it more accessible to those with vision impairments and those who use assistive technologies, such as screen readers.

If web accessibility is important to your organization, this article discusses some examples for how an accessible website should be formatted for those using assistive technologies. We'll discuss the technical changes that have been made to the community product; what colors and design elements are necessary; and how to write documentation that will help make your site accessible for all of your members.

A few things to remember

• No website is perfectly accessible.
• Your members are using myriad computer / browser / device / version configurations, so it can be difficult to account for older technology.
• While complete visual impairment is often the first thing that comes to mind when thinking about web accessibility, an entire spectrum of types and degrees of disability exist. Hearing impairments, color blindness, partial visual impairment, temporary or permanent physical disability, neurological conditions, and cognitive impairments can all impact how a user interacts with your website.

Paragraph styles

Typically, we use paragraph styles for aesthetic reasons, but for accessibility paragraph styles must be used in a consistent and deliberate manner because they indicate not only content, but context. The size, font, and color of tags can be changed universally 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 greytones.

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.

Additional resources

For additional information about web accessibility, visit:

• webaim.org
• w3.org/WAI/WCAG20/glance