[Released] We’re making changes to surveys for accessibility!

1

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!

Cheers,

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.

In support of this effort, we have made changes to the underlying HTML of our surveys. These HTML changes may affect your survey if you are using JavaScript in your surveys or custom CSS code in your themes.
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.

If you, or your fellow SurveyGizmo users, use custom CSS code in the survey themes your theme may need to be adjusted after these changes. In addition, if you are using JavaScript in your surveys you should check to make sure your survey still behaves how you want it to.

How to check for CSS or JavaScript in your surveys

Not sure if your surveys use custom CSS code or JavaScript? It’s easy to check!

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.

To check for JavaScript go to the Build tab and look for JavaScript Actions. If there are none, you are all set
What is the timeline for these changes?
Update (Friday 2/8): These changes are now live.
What HTML changes are being made?
Once you have determined that your surveys might be affected, the below is a list of all changes that have been made to the HTML structure of our surveys should help you to fix up your surveys. This content is meant for power users or if you’re not a power user, the web developer on your team that helped you to create your surveys’ custom themes or JavaScript.

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
  • NPS
  • Rating (Likert Scale)
  • Checkboxes
  • 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
  • Slider
  • Signature
  • 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>. 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 <div>).

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 <thead> and <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 <label> elements.

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.
If you determine if your CSS is no longer being applied properly or your JavaScript selectors need to be updated. If this is the case we recommend following these steps to make changes to your surveys to accommodate these changes.

  1. Make a copy of your survey.
  2. Find and test new selectors.
  3. Once you’ve found the appropriate selectors, return to your live survey and add these new selectors to your existing selectors.
  4. Test to ensure that everything is working properly.

Can SurveyGizmo help me update my themes or JavaScript?
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.

https://help.surveygizmo.com/help/accessibile-surveys

Community Admin edited question
    0

    Thank you so much for continuing to improve the surveys for Accessibility; we really appreciate the hard work that goes into improvements like this. 

    It would be helpful to know when bigger updates like this are scheduled so that we can work ahead of time to address custom CSS and JavaScript changes that are needed. I’ll subscribe our team to the RSS feed for this forum, however outside of that, is there any other way to stay informed of major revisions to structural HTML or CSS or other functionality like this? 

    Admin - SurveyGizmo commented
      • Hi Micah,

        Thank you so much for your kind words and feedback! I’m very sorry that these changes caught you by surprise.

        For major releases such as these accessibility updates, we send out email communication to all SurveyGizmo users.

        An email communicating this change was sent in December (and linked to this post). I’m very sorry that this email did not reach you. There are a couple of things that could lead to this:

        – Perhaps the email was filtered into a spam/junk folder and did not reach your inbox
        – There is a chance that the email associated with your user in SurveyGizmo could be incorrect. We encourage confirming this in your account

        Please don’t hesitate to follow up with our Support team if you have any questions or concerns about these changes.

        Thank you again for the kind words!

        David Domagalski
        Documentation Specialist | Customer Experience
        SurveyGizmo | http://surveygizmo.com

      0

      Has this release been completed for today?

       

      Community Admin commented
        • Hi Debbie: This has been released as of 12pm MT.

          Bri Hillmer
          Documentation Coordinator
          SurveyGizmo Customer Experience Team

        ×

        Login

        Question stats

        • Active
        • Views30564 times
        • Answers2 answers
        • Followers2 followers