We are making some changes to surveys to support accessibility. We’re providing you advance notice as this could affect your surveys.
Why is SurveyGizmo making these changes?
SurveyGizmo is serious about making sure that the surveys you create are usable for every single person you send them to. This includes individuals using assistive technologies like screen readers. SurveyGizmo has always strived to be the most accessible survey solution on the market and soon we are about to make another large step forward.
The Web Content Accessibility Guidelines (WCAG) 2.0 are an international standard that establishes best practices and requirements that ensure websites are accessible to people with disabilities. We are making some changes to SurveyGizmo surveys so that we will be compliant with the highest-level requirements (AAA) of the WCAG 2.0.
Will I be affected?
All customers will benefit from these changes! For one, you can be confident that users of assistive technologies (JAWS, NVDA, and VoiceOver) are able to take your surveys. Further, your surveys will continue to comply with government requirements like 508 and ADA (these standards are changing in January 2018).
The scope of customers who may be negatively affected is quite small. If you are using a pre-built SurveyGizmo theme and you only changed settings using the controls in the Style tab, you don’t need to worry about anything as we have tested these themes for you.
To check for CSS go to the Style tab of your survey. Scroll to the bottom of the survey preview on the Style tab and click the link to access the HTML/CSS Editor. Go to the Custom CSS tab; if there’s nothing there you’re home free! Be sure to check all surveys that use different themes. If you do have code on your Custom CSS tab you’ll need to test your surveys to ensure they are working properly.
How can I test my survey against the HTML updates?
We have set up a public testing environment that has the new updates for you to test your surveys. Just follow the steps below to take a look at your surveys:
- Grab the share link to your survey (if your survey has multiple share links that use different themes all links/themes should be tested). Let’s take this example share link: https://www.surveygizmo.com/s3/1234567/My-Survey.
- Replace the first part with: uatwww.surveygizmo.com
Our example link would look like so: https://uatwww.surveygizmo.com/s3/1234567/My-Survey
- Paste the newly constructed share link into the address bar of your web browser.
- You can then move through your survey and verify it is still working correctly.
- If you want to record a test response, you can add “?__sg_build_test=true” to the end of the URL or just open the survey in the Preview mode within the app.
- You can access the testing version of the application by logging in here: uat.surveygizmo.com
WARNING! This is a live production environment. Modifications made to your surveys will affect your live surveys. Learn how to make changes in support of these changes in a way that doesn’t negatively affect live surveys.
How do I test my surveys with private domain links?
Testing surveys with private domain links can be done by logging in the testing version of the SurveyGizmo application (use uat.surveygizmo.com) then use the in-app Preview button. Alternatively, if you have the ability to do so, you can create a non-private domain link in the testing environment in order to test your surveys.
What is the timeline for these changes?
The test environment will be available for testing the remainder of 2017.
We plan on pushing the changes to our live production site the first week of January 2018.
Update (Friday 1/5)
We’ve received some amazing feedback from our users and are finalizing our own QA testing. The changes will go out as soon as the feedback is addressed and the QA process is finished. We recommend you have your changes ready to go as outlined below so that your respondents won’t see any changes.
What HTML changes are being made?
1. Affected question types
Question types that use radio button or checkbox inputs have the most significant changes to their HTML. This list includes the following question types:
- Radio Buttons
- Rating (Likert Scale)
- Image Select (Single & Multi)
- Max Diff
- Ranking Grid
- Semantic Differential
- Radio Button Grid
- Checkbox Grid
- Star Rating Grid
- Custom Table
In addition to the above questions with radio button and checkbox inputs, the HTML for the following question types has been changed.
- Text Highlighter
- Image Heatmap
- Audio and Video Sentiment
- Custom Group
2. New Fieldset HTML Elements
The HTML structure of questions with radio button and checkbox inputs (the first list of question types above) have been most affected. This type of change should only affect you if you style your surveys using a custom CSS.
The HTML structure and attributes for these question types will remain the same, but the surrounding HTML has changed; instead of a
<div>, you will see a
<fieldset> element. The
<fieldset> tag is used to group related elements in a form.
A rather esoteric fact about fieldsets that our power users might benefit to be aware of: Fieldsets establish their own block context, so they don’t inherit styles from parent elements.
Previous HTML for a Radio Button Question:
New HTML for a Radio Button Question:
3. Added a <legend> element to follow each <fieldset>.
In proper HTML the first child of a
<fieldset> needs to be the
<legend> tag defines a caption for the
<fieldset> element. To support this, we moved the alerts and descriptions (e.g., sg-question-description, sg-question-has-errors) outside the
<fieldset> element (formerly the sg-question
Previous Placement of Descriptions and Errors
New Placement of Descriptions and Errors
4. Changes to answer option HTML
Because WCAG requires that all labels are meaningful we have made changes to the answer option HTML for all question types that are built out as HTML tables (Rating (Likert Scale), NPS, Max Diff, Ranking Grid, Semantic Differential, Radio Button Grid, Checkbox Grid, and Custom Table). The following changes have been made the HTML for answer options in these question types:
- We added a CSS class (sg-icon-skip) to the parent label.
- Added two children span elements:
- Screenreader-only text to describe the input: (span.sg-screenreader-only)
- Span for the custom input css rules (span.sg-icon-target)
Previous Label HTML:
New Label HTML:
- For Rating (Likert Scale) and NPS questions, we have removed the label element from the column and row headers. Now the text sits directly within the <th> element. We then applied the above changes for all inputs within the grid.
Previous NPS label HTML:
New NPS label HTML – no labels within columns/rows:
5. Changes to HTML of grid questions using the Repeat Column Headers feature.
For repeated column headers, we previously closed the
<tbody> element and added a
<thead> with the header elements, followed by opening another
<tbody>. We made the following changes to the HTML of grid question types that are using the repeated column header option:
- For each column header we now insert a
<tr>into the existing
<tbody>. This means there is a single
<tbody>for each table.
- Also, since each <th> can be repeated, we have changed an id attribute to a class.
Previous Repeat Column Header HTML
New Repeat Column Header HTML
6. Text Highlighter, Image Heatmap, Audio and Video Sentiment, Slider, Signature and Custom Group question titles are no longer wrapped in unnecessary
7. Text Highlighter and Image Heatmap tooltips are now wrapped in fieldsets. We also removed an unnecessary <h6> element from <legend>.
How to fix custom icons in your surveys
If you customized the icons in your surveys as per our Change Icons for Checkboxes and Radio Buttons tutorial you can add the below selector to your CSS to fix this up. The tutorial has been documented accordingly.
/*Old and new selectors for radio button and checkbox icons*/ .sg-replace-icons input[type=radio] + label:before, .sg-replace-icons input[type=radio] + label span.sg-icon-target:before, .sg-replace-icons input[type=checkbox] + label:before, .sg-replace-icons input[type=checkbox] + label span.sg-icon-target:before
How to make changes to your custom code in support of these changes.
- Make a copy of your survey.
- Login to our testing site
- Find and test new selectors.
- Once you’ve found the appropriate selectors, return to your live survey and add these new selectors to your existing selectors. This way, your survey will work with both the old a new HTML.
- Test in both the production environment (www.surveygizmo.com) and the testing environments (uatwww.surveygizmo.com) to ensure that everything is working properly. Now, you are all set for our January release of the HTML changes!
Our support team does not have the resources to support custom code. If you find your surveys are affected by this change and do not have the development resources on your end to make the necessary changes our Programming Services team can help. Learn more about Programming Services.
More about accessibility
If you are interested in accessibility or WCAG/508 compliance, please see our documentation on how to ensure your surveys are as accessible as possible.
can you elborate on the changes in the selectors?
we have some html intensive survies that no longer work,
I understand that I should add “.sg-fieldset” (and perhaps “sg-question-legend”), but I’m not sure where it goes (before or after which selector).
this is specially probelmatic becuase the errors appear only on the mobile version of the survey, and we can’t see the errors from the website.