Update (2/7/18): The updates discussed below are live as of February 7th, 2018. Please contact our Support Team with any questions or concerns!
The SurveyGizmo Team
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.
What is the timeline for these changes?
Update (Friday 2/8): These changes are now live.
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.
- 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.
- Test to ensure that everything is working properly.
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.
Thank you so much for continuing to improve the surveys for Accessibility; we really appreciate the hard work that goes into improvements like this.
Has this release been completed for today?