Ideal Accessibility

Overview

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 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.

Approximately 19% of Americans self-identify as having a disability and this number is only expected to grow with an aging population.

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 types 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 types 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.

1. Paragraph Styles

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 both content and context. The size, font and color of tags can be changed universally using CSS.

If you'll notice the top of this page, the orange "Ideal Accessibility" is the main title of the page and uses the H1 tag. There should only be one element using the H1 tag on a page. "Overview" uses the H2 tag, and should be used exclusively for subtitles to indicate the separation of content items. The text immediately below is body text and is the content of the page.

2. Image Tags

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:

A Yellow Labrador Retriever chews a toy frog

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.

 

  

  

  

 

 

 

 

 

3. Page Formatting

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 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 an entire section in the WCAG disability guidelines specifically about not causing seizures.
  6. Use different fonts to indicate context.

 

4. Color and Contrast

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

An example of a profile field with low contrast

Example 2: High Contrast

An example of a profile field with 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 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, the colors 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.

5. Additional Resources

For additional information about web accessibility visit:

webaim.org

w3.org/WAI/WCAG20/glance

Latest Higher Logic release notes