Over 2014, Higher Logic and eConverse Social Media worked with the International Association of Accessibility Professionals to launch their community, IAAP Connections. Through this process, Higher Logic made a large number of technical changes and upgrades to make the platform accessible to those with vision impairments or who may be using assistive technologies such as screen readers.

Although you may not know it, these changes have been applied product-wide to your Higher Logic sites and will continue in future releases.

This page serves as an example for how an accessible website should be formatted for those using assistive technologies  - everything from the technical changes that have been made, to what colors and design elements are necessary and how to write documentation that will help make your site accessible to all of your members.

A few things to remember:

1. No website is perfectly accessible
2. Your members are using all sorts of computer / browser / device / version configurations, so it can be difficult to account for older technology
3. While we typically think of complete visual impairment first when dealing with web accessibility, there is a whole spectrum of kinds and degrees of disability. 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.

Typically, we use paragraph styles for aesthetic reasons, but for accessibility they need to be used in a consistent and deliberate manner as they indicate not only content, but context. The size, font and color of tags can be changed universally using CSS.

Use H1 for all Page Headings

Use H2 for all Subtitles

Use body for all paragraph text

The formatting of pages and correct use of common web page elements can go a long way in increasing web accessibility:

Do:

1. Use a one-column layout when possible
2. Keep things simple
3. Make clickable areas as large as possible so that those with diminished motor skills can navigate and get the information they need. It is easier to click on "This is a map of North America" than on "Map"
4. Do not depend on color for context. For example, if I make something green to indicate it's correct and red to indicate it's incorrect, an assistive device won't pick up on this
5. Label buttons to indicate where it will lead a user. "Read More Discussion Posts" is better than "More"
6. Use a Sans Serif font
7. Use Navigation and Page Titles that reflect what is on the page. "New information for Members" is better than "What's New"

Do not:

1. Use tables - data in tables is difficult to navigate when it is read aloud.
2. Have a complicated multi-level navigation. Main navigation items with a sub-menu should be all that's necessary
3. Have low contrast between page elements or hover states
4. 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 
5. Do not make anything blink or strobe. There is a whole section of the WCAG disability guidelines specifically about not causing seizures
6. Use different fonts to indicate context

For additional information about web accessibility visit:

webaim.org

w3.org/WAI/WCAG20/glance

Latest Higher Logic release notes

When uploading all images, be sure to add in all three fields: alt text, common_description and long description. In different browsers, assistive devices, versions, parts of a website, etc. different fields will be read, so fill them all out.

For the photo below:

The Alt Text and Common_Description would both read: A Yellow Labrador Retriever chews a toy frog.

The Long description reads: 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.

For users with visual impairments or color blindness, color contrast is particularly important. Have a look at the two examples below:

Example 1: Low Contrast

Example 2: High Contrast

You can use an online tool, such as Contrast Checker, to ensure your page, font and button colors have an appropriate contrast. Note that the 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.