Accessibility involves making websites easier to use for persons with disabilities (such as vision and physical impairments). Accessibility laws require that a person with disabilities be able to use a website with software that reads aloud the site's content and/or using only a keyboard.
Higher Logic Vanilla (Vanilla) is committed to making our platform as accessible as possible, and making it easier for you to maintain accessibility-compliance in your Vanilla community throughout its lifespan.
Accessibility information and guidance
There are numerous websites that offer guidance and best practices on web-based colors and design; many of them focus on the very accessibility considerations that are discussed in this article.
Vanilla provides the following links as a courtesy to aid you in being accessibility-compliant. We encourage you to:
- become familiar with these regulations and policies,
- use the appropriate guidelines to ensure your community sites are accessible, and
- periodically review the applicable guidelines for updates.
📝 NOTE: Vanilla is not responsible for the content of the following links.
For information about web accessibility, check out:
- World Wide Web Consortium (W3C), Web Accessibility Initiative (WAI)
- Web Accessibility In Mind (WebAIM)
- The homepage, webaim.org, has links to accessibility training, evaluation, and certification.
Government sites and regulatory links
Many governments have websites that offer not only guidelines and recommendations, but information about their accessibility regulations and how such regulations apply to web-based collateral used in certain scenarios.
Canada
United States
📝 NOTE: Higher Logic believes Vanilla to be Section 508 and WCAG Level AA compliant.
Europe & Australia
Accessibility measures
Vanilla takes the following measures to ensure compliance in our interface. Feel free to use these measures as a starting point for your accessibility program.
📝 NOTE: If you notice an area in which Vanilla could improve its accessibility, contact Vanilla Support or file an issue.
- Our default user interface is primarily text-based and high-contrast.
- Our interface is keyboard-friendly.
- We limit the use of colors, images, and symbols as navigation aids and as primary content.
- We use modern HTML5 markup and accessible forms.
📝 NOTE: Vanilla does not regulate the content of customers' Vanilla communities and cannot control the accessibility of user-generated content therein.
Accessibility in your theme
Most Vanilla communities have a customized theme. Keep in mind that customizations can have a large, and possibly detrimental, impact on the accessibility of the community.
The choices of fonts, font colours, and font sizes are obvious considerations, but because our theming engine also allows for the override of HTML markup, it’s important to consider that individual communities may vary wildly in their degree of accessibility.
Conversely, themes can also augment the interface to improve Vanilla’s core accessibility.
Higher Logic Vanilla resources
Higher Logic is committed to promoting accessibility, and supports your efforts to do so.
- Vanilla Accessibility Statement describes Vanilla's commitment to meeting or exceeding the requirements of the Web Content Accessibility Guidelines 2.1 Level AA (WCAG 2.1 AA) in order to ensure that our software is usable by all people.
- HUG Connect is a series of live, monthly presentations; accessibility tips are sometimes the main topic.
- The HUG Connect Resource Library has past presentations, some of which are dedicated to accessibility and/or community design.
Best practices
Higher Logic recommends that, when you are designing the various pages (Posts, Category) of your Vanilla community, you consider the readability and accessibility of those pages — as well as how they will function for those who use assistive technologies, such as screen readers.
You should make sure that your web pages are designed with background and font colors, images, fonts, and font sizes that:
- complement one another,
- are visually/aesthetically pleasing,
- are easy to read for those with sight/vision impairments and other disabilities, and
- maximize the benefits of assistive technologies.
✔️ TIP: Your audience is using myriad combinations of devices, browsers, and versions, so it's a good idea to preview your web-based content on a variety of these, while keeping in mind that older technologies might present challenges.
This article provides high-level, best-practice information on basic web-accessibility practices. The knowledge base articles have product-specific details on design options and settings that you can use in order to make sure your web-based content is as accessible as possible for as many people as possible.
Paragraph styles
Typically, we use various paragraph-based styles for aesthetic and organizational reasons, mostly to group related content and to separate unrelated content.
For accessibility, however, paragraph styles must be used in a consistent and deliberate manner because they indicate not only content, but context.
Keep in mind that, as regards accessibility, screen readers and other assistive technologies use HTML heading hierarchy in order to know what to read first, second, third, and so on. Your use of proper heading-and-text structure can better ensure that your content is:
- presented (i.e., read aloud) as you intend it and
- in an order that makes sense to the user.
Alternative states
It's important that user interactions with your web-based elements are obvious to the user.
Elements such as buttons and links to content have to have an alternative state (e.g., an underline or a color change) that clearly indicates an action is taking place or will take place.
For example:
- A text-based hyperlink could be blue.
- When the hyperlink is hovered on, an underline appears.
- After the link has been clicked, the hyperlink text is purple.
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.
- Label buttons and links to indicate where they will lead a user, rather than just "click here."
- Example: "Read more posts" is better than "More."
- Use a Sans Serif font because they are generally easier to read on electronic devices.
- Use navigation and page titles that reflect what's on the page.
- Example: "New information for Members" is better than "What's New."
Do not
- 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 and their hover states; refer to Color & contrast, below.
- Depend on color for context.
- Example: An assistive device will not pick up on your use of green text to indicate that something is correct and red text to indicate that something is incorrect.
- Use images of text without labels or context.
- Example: A picture of an exit sign is not a substitute for the words "exit sign," either in the text or as a label for the image.
- Do not make anything blink or strobe. There is a section of the WCAG disability guidelines specifically about not causing seizures.
- Use different fonts to indicate context.
Images
When you include images, it's important to keep in mind that text that has been embedded in the image is not identified as text; it, essentially, becomes part of the image. As such, it's very likely that assistive technologies will not even be aware of the text.
📝 NOTE: Avoid putting text into/on images, especially if the text is intended to convey important information.
✔️ TIP: If you add text to an image, precede the image with explanatory text and/or use Alt Text as described below.
Alternative text
When adding images in your content, it's recommended that you always include alternative text for images. The text is an "alternative" to the image, and this text is very often used as the read-aloud source for the user in different browsers, assistive devices, versions, and parts of a website.
📝 NOTE: Alternative text is typically inputted and editable via an image's properties. The field might be labeled Alt Text, but this might vary across various products.
Example
For the photo below, the alternative text could be: "A dog chews a toy frog."
Color & contrast
For users with visual impairments or color blindness, color contrast is particularly important.
📝 NOTE: Higher Logic strives for a color contrast ratio of at least 4.5:1 between text and background, as recommended by WCAG 2.0 AA.
In the following examples, the high contrast example is easier to read because the black text stands out on the gray background better than the gold text on the pale yellow background.
Low contrast
High contrast
Check your content
Use an online tool, such as WebAIM's or Contrast Checker, to ensure that the colors of your pages, fonts, and buttons have appropriate contrast. Note that font size affects contrast, measuring at above and below 18pt fonts. You can also view how your site looks with grayscales.
📝 NOTE: While red and green are often-used action-button colors, they are not recommended because these colors are not easily discernible to all users.
POUR it on...
The Web Content Accessibility Guidelines recommend using the POUR Principles. This is a set of four guiding principles that you should review and remember to better ensure that your web content is accessible.
- Perceivable - All users can experience your website, irrespective of visual and auditory impairments.
- Operable - All users can interact with your website, even if they can't use a keyboard or mouse.
- Understandable - All users can understand your website content and operation.
- Robust - All users can access your website content on a variety of device types and versions, and across the scope of assistive technologies.
To learn more about the POUR principles, see:
Additional reading
