Ensuring your online engagement portal is accessible for all members of the community is an essential responsibility for organisations who engage online.

By implementing a few simple techniques, you can easily ensure that all members of your community can get involved in your consultations via an accessible online engagement portal.

This article looks at 10 ways to to make your online engagement portal accessible.

There are a plethora of content management systems and single use engagement tools available for hosting and running online engagement activities.

The problem with having such availability of tools and platforms, is that it can often get messy trying to plug them all together in an accessible way.

Using EngagementHQ overcomes this problem by ensuring all themes, templates and engagement tools are accessible.

This also applies to in-built elements of EngagementHQ, including information widgets, accessible tables and even video players which support closed captioning.

As a dedicated online engagement portal, EngagementHQ is compliant with all WCAG standards and is regularly run through accessibility testing to ensure its compliance.

This makes it the easiest and most accessible online engagement tool available to government and private sector organizations.

If you would like a copy of our latest report, please contact us support@engagementhq.com.

Participants who use screen readers will use heading structures in order to navigate the content on your site.

While EHQ already has built-in heading structures for its page templates, you should also use pre-defined heading styles in project descriptions when engaging online.

By using headings (<h1>, <h2>, etc.) correctly and strategically, the content of your website is better organized and easily read by a screen reader for people with a visual impairment.

It’s important that you do not simply pick a header just because it looks good visually (which can confuse screen reader users); instead, use your headings to organize content.

Some things to consider;

You should also use alt-text anywhere online where you are using images.

This is to enable participants using screen readers to easily understand the messages being conveyed in those images.

To ensure your images have appropriate alt-text, you should think about the message you are trying to convey through your images.

If the image includes text you will also need to include that text in your alt-text description.

If an image is the only content of a link, the screen reader will read the filename if alt-text is not provided.

Always provide alt-text for images that are used as links.

You don’t want people using screen readers to see your poorly named image files. ie. image45_girl.jpg

Alt-text for images should be included in the following places in EngagementHQ;

When including a hyperlink in a project description for one of your projects, ensure you use text that properly describes where the link will go.

Simply using “click here” is not considered descriptive and is ineffective for a user of a screen reader.

The best way to include descriptive links is to ensure the most important content related to the link is presented first.

For example, if you are pointing visitors to a page called “Project Overview”:

While most organizations have clearly defined brand colors, which will need to be incorporated into your site, it’s essential you select the right combination and contrasts of colors to help participants with a visual impairment.

The most common form of colour deficiency, red-green color deficiency, affects approximately 8% of the population.

Using ONLY colours such as these (especially to indicate required fields in a form) will prevent these individuals from understanding your message.

There are several tools you can use to evaluate colour contrast, which help you ensure you’re making your community engagement site as visually usable as possible for participants with low vision or varying levels of colour blindness.

If you need help changing colours on your EHQ site, please contact our support team via email support@engagementhq.com.

Ensuring that you have clearly labeled all form fields across your site is essential for creating an accessible site.

When this is not done, a screen reader will not have the same audible cues as a participant with no visual impairment and it could be extremely difficult for your users to understand what information to enter into a form field.

In EngagementHQ, forms field labels are most important on your registration form and wherever you are using a survey.

Ensure your form fields have a clear descriptive label.

For example, if the field is for a person’s name, it should be labeled appropriately as either “Full Name” or have two separate fields labeled as “First Name” and “Last Name.”

A participant using your survey should be able to tab through the form and fill out all the fields before getting to the “Submit” button, or they may not even realize that additional fields exist.

If you have fields that are related, consider grouping them together using conditional logic.

Organizing forms with section headings can help participants using a screen reader to keep track of their progress and can provide extra context that might otherwise be lost.

It is also a best practice habit for developing a well-structured survey so you can kill two birds with one stone.

All required fields in EngagementHQ are automatically marked with an Asterix indicating to the participant using the screen reader that they are required.

While you can easily organise content inside of tables using EngagementHQ’s WYSIWYG editor, they shouldn’t be used to layout information on your project page.

Doing this can create confusion for screen readers and make it difficult for visually impaired participants to understand your content.

Instead, only use tables for setting out data that needs to be presented in a table format.

If you do utilise tables, you should always use headers for rows and columns to ensure there is a clear relationship between the cells.

For laying out project description information on your page we recommend using CSS and inline styles to achieve your desired outcomes.

This can be done using the HTML toggle (<>) on the WYSIWYG editor.

If you don’t understand CSS, we highly recommend you take this free course from Code Academy on “How to learn CSS”, found here.

Although EngagementHQ allows you to plugin third party embeddable widgets and tools, we cannot guarantee that those tools will be accessible.

Since you already have access to the best range of online engagement toolsand widgets already as part of  EngagementHQ we recommend you don’t use other tools that might affect the accessibility of your site.

If you are going to use other tools, it’s up to you to understand whether they are compliant to accessibility standards.

Not only should your site be accessible for people using screen readers, but you should also be aware of the different literacy and language barriers faced by your community.

Writing in plain English is the simplest way to make your project description text and instructions accessible for the widest audience possible.

This means avoiding jargon and long sentences and providing clear and concise instructions on your projects.

You can easily check the complexity of the web copy you have written using tools such as Hemmingway App, found here.

These tools can help you identify hard to read sentences and show you how to make them more simplified for your participants.

Having easily accessible information on how to get further phone support will help your participants get further support if they need.

These services might be for language translation and interpretation or you might looks at ways of adding chat functionality to your EHQ site through third party plugins such as Intercom or Zendesk.

If you don’t have access to a translation or phone support service you might consider using a Who’s Listening widget.

Providing simple contact information in an already WCAG compliant widget means that your participants will be able to get help and support if they need it.