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 Online 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.
Typically, we use paragraph styles for aesthetic reasons, but for accessibility paragraph styles need to 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.
The formatting of pages and the proper use of common web page elements goes a long way to increase web accessibility.
- 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."
- 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 make something green to indicate it's correct and red to indicate it's 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.
When uploading all images, be sure to add text to 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 to account for all of them.
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.
Color & Contrast
For users with visual impairments or color blindness, color contrast is particularly important. Compare the two examples below:
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.
For additional information about web accessibility, visit: