All websites must be accessible to all, but it is especially important for your online engagement portal to be accessible because it is one way to ensure that the insights you gain come from all members of your community.
EngagementHQ was built as an accessible platform. This includes ensuring that it is responsive to all device sizes and that elements like tools, widgets, homepage templates, and text editor elements are WCAG-compliant.
However, you must still create accessible content. Various built-in tools, including those listed below, can help you do this.
Heading Levels
Elements of your site that include a text editor with predetermined heading levels to structure your content (H1, H2, etc.). You should use these heading levels for two reasons:
Screen readers use the heading structure as a form of navigation; it allows users to skip to the content they need and understand what’s on the page.
Using heading levels leads to more structured and readable content for everyone, including those using screen readers for whatever reason.
You should never use a heading for aesthetic purposes; instead, follow the correct heading hierarchy. Here are some guidelines:
Choose the correct level for your heading instead of using bold text or a larger text size.
Your primary project title will always be a <H1> and you should avoid using it anywhere else on the page, including in your project description.
Headings should follow the correct heading level hierarchy, and you should never skip a heading level. Your <H2> will be your main headings in the project description, and you can use <H3> for subheadings.
Heading level hierarchy can go up or down, but you cannot skip levels. For example:
Page title: H1
First heading in the project description: H2
First subheading: H3
Second subheading: H3
Second heading in the project description: H2
Third heading in the project description: H2
Alt Text
Alt text is metadata attached to images that screen readers will read to describe the image and that will display if the image doesn’t load.
Any images that convey information, accompany your text, or link anywhere must have alt text. Decorative images should have an empty alt text attribute.
When writing alt text, consider the following:
Alt text should convey the image’s purpose, not necessarily just the description, but should also be kept concise. Built-in alt text fields in EngagementHQ, excluding images inserted into text editors and the Photos widget, have a maximum of 125 characters
You don’t need to use phrases like “image of” or “photo of” as most screen readers will already state the format.
Complex images, such as charts or graphs, should be accompanied by a detailed description of their content in the body and simple alt text for the image itself. These images should be placed near the text they reference.
If you have images with text, your alt text should read the text aloud.
Linked images should have alt text describing where the link goes and the image’s content.
Descriptive Link Text
Hyperlinks are the backbone of every website. They create navigation paths for users to find the content they need and explore more of your engagement site.
Link text should describe the link’s destination so it’s easier for users to know if they want to follow it. You should never use phrases like “click here” or “more information.” When writing link text, think about what information you are trying to convey with the link.
For example, when including a link to a concept design for a new park, your link text could be:
“We have created a concept design for St. John’s Park and invite you to take a look before completing the survey.”
Instead of:
“Click here to see the new concept design.”
Accessible Colors
It’s likely that your organization has brand colors that you must incorporate into your site. If they don’t, or if you must choose shade variants, remember to ensure you select the correct contrast for online content.
Choosing the correct contrast ratio ensures that elements on your site are easy for all users to see. This is also necessary when you’re creating and publishing images or infographics.
We've found the WebAIM Color Contrast Checker to be an excellent tool for checking color ratios.
Clear and Concise Writing
Use plain English to write content that is readable across different literacy and language barriers. It is tempting to explain every nuance of your consultation, but you must keep it simple to appeal to the broadest possible audience.
Follow these tips:
Avoid organization jargon, technical terms, unexplained acronyms, and long sentences.
Use the built-in bulleted or numbered lists to simplify your project descriptions.
Use words and phrases commonly understood in your community. Tools like Hemingway can help you determine the complexity of your content and identify difficult sentences and words.
Titles, headings, and field labels should be simple and descriptive. This will help ensure that screen reader users have the same cues as all users and participants understand what they will find on the page.
Read your content aloud to ensure it makes sense and is easy to read.
Tables should only present data. Using tables for layout purposes can confuse screen readers and make it difficult for those using them to understand your content.
HTML and Third-party Tools
Your project and tool descriptions contain a code view, which lets you add HTML or CSS directly into the content. You can add CSS to your page to style elements or affect the layout, but we recommend having experience using CSS before adding anything.
Third-party embeds are also common, but we cannot guarantee that external plugins or widgets will be accessible. It is your responsibility to confirm third-party embeds are accessible.
Provide Additional Support
Even if your content is perfect, your community members may still need support. Here are some ideas:
Use the Who’s Listening widget to provide contact details for those seeking information.
Provide alternative methods of contributing, such as hard-copy surveys, in-person locations, or a mailing address.
Use a translation, interpretation, or relay service to combat language barriers or for those who need help accessing the content.