Ensuring WCAG Compliance | Enhancing Survey Accessibility in SurveySparrow – SurveySparrow

Learn how to make your surveys WCAG compliant.

At SurveySparrow, we understand the importance of accessibility on the web and strive to empower you to make surveys that are accessible to people with a diverse range of challenges like hearing, movement, sight, and cognitive ability.

Once we release the WCAG compliance update, you may not be able to use your survey builder or see the following prompts on your SurveySparrow account

Read this article to know how to make your surveys WCAG compliant and have a seamless experience.

Update themes to make your surveys WCAG compliant.

1.1. These are your surveys that are still using old CSS. You need to update each theme manually to get full access to your survey builder. Note that when you update one theme all surveys using that theme will also be updated.

1.2 If you see the following pop up, it means you are using a theme with advanced styling. And you need to update the CSS in the theme.

2. Follow these steps to make your surveys WCAG compliant.

On clicking the Review Theme button on either of the above popups, you will be taken to the Advanced Styling page.

3. Make the CSS changes and click on the Save and Apply button.

4. If at all you try to exit the page without saving, you will see the following pop up. Click on Save Changes so that your changes are saved.

5. You’ve successfully updated to the new WCAG compliance.

Custom CSS Selectors

Now let's see how certain selectors in the Custom CSS are affected and how you can update them.

Compare your CSS with the latest theme and add in your custom CSS styling.

Dropdown selectors

In general, all dropdown selectors will be affected.

Below are some standard selectors and their replaced values.

Dropdown Question type

.Select {}

.Select-placeholder {}

.Select-menu {}

.Select-option {}

Replace them correspondingly with

.ss-eui-dropdown {}

.ss-eui-dropdown__placeholder {}

.ss-eui-dropdown__menu {}

.ss-eui-dropdown__option {}

General dropdowns

.ss-button--dropdown {}

.ss-button--dropdown h3 {}

.ss-dropdown__main-list {}

.ss-button--dropdown ul {}

.ss-button--dropdown li {}

Replace with these styles

1. For language selector

.ss-language-selector__select {}

.ss-language-selector__select__single-value {}

.ss-language-selector__select__menu-list {}

.ss-language-selector__select__option {}

2. Phone number dropdown (Applicable for both phone number type question and contact type question with phone number)

.ss-phonenumber-dropdown {}

/* single-value not applicable */

.ss-phonenumber-dropdown__menu {}

.ss-phonenumber-dropdown__menu-list {}

.ss-phonenumber-dropdown__option {}

For targeting the button .ss-phone-number--flag can still be used. If you are using

div.ss-phone-number--flag change it to

button.ss-phone-number--flag

Question Title

If you are targeting p tags inside the headings, you will have to replace the selectors since p has been replacing with span

.ss_cl_survey_qstn h1.ss-survey-heading--text p {}

Replace with

.ss_cl_survey_qstn h1.ss-survey-heading--text span {}

Radio / Checkbox

.checkmeout-radio input + .checkmeout-radio-style {}

.checkmeout-checkbox input + .checkmeout-checkbox-style {}

input + .checkmeout-[radio|checkbox]-style will no longer work as a new element has been added in between them. Directly select the element using its class instead of using "+".

Text input with voice transcription

The icon container has been changed to a button instead of a div

div.ss-voice-input-mic__svg-container {}