Website Feedback Accessibility

Website Feedback Accessibility Features

Website Feedback projects have many features built in to make accessibility effortless. Here are some of the accessibility features you can expect to find across the platform:

• All Creative elements are tab-able and clickable via keyboard. We support TAB, ESC, and Enter (and return, for Mac Users), but do not support arrow keys or others.
• For Pop Over and Responsive Dialog creatives, users cannot tab outside the Creative until it is closed. Furthermore, it does not allow tabbing into the underlying page.
• For Pop Over and Responsive Dialog creatives, focus is applied directly to the Creative once it is displayed.
• If embedded targets are being used, then users can right click on the embedded target and add an iframe title.
• If embedded windows are being used in the Intercept advanced options, users can add an iframe title.

Next, we’ll cover accessibility features unique to the needs of each Creative’s design.

Responsive Dialog Creative

• Easy to define Alt Text: If a custom icon is used within the dialog, we allow users to specify Alt Text to indicate the text that the screen reader should read when the focus is on the icon.
  Qtip: If you select to Include an icon to dismiss the intercept, the alt text for the X button that appears in the upper-right of the Creative is “close.” This alt text is also localized.
• ARIA labels for button controls: By default, screen readers will read the text that you specify for the button label. However, in some cases, you may want the screen reader to read additional context, such as, “Click on this button to open up a new survey window.” In this case, you can specify the ARIA label for the button controls.
• Color contrasts for elements within the Creative itself: While Qualtrics cannot provide direct contrast guidance, users have full control to pick and choose the appropriate color for  Creative elements.

Feedback Button Creative

• Iframe titles: Ability to specify an iframe title in the Animation section.
• Custom Button Alt-Text: Ability to specify alt-text for an image if a custom button is being used.

Pop Over, Slider, InfoBar, and Custom HTML Creatives

• Color contrasts for elements within the Creative itself: While Qualtrics cannot provide direct contrast guidance, users have full control to pick and choose the appropriate color for  Creative elements.

Mobile App SDK

• Accessible to mobile screen readers:
  • Makes it easy for screen readers to navigate and exit the dialog.
  • Allows text within buttons and also the type of the item (e.g., button) to be read.

Adding Alt Text and Roles to Target Buttons

If your Target is in the form of a button image you’ve uploaded, adding alt text and a role attribute helps the screen reader understand what the button’s supposed to say and do.

1. Open your Creative in the Creatives tab.
2. Double-click into the Target element that contains the image.
   
3. Click Source.
4. Inside the <img> tag, add an alt attribute to the tag and set the value equal to the text of the image.

   <img alt="Sign Up Now" ... />

   Qtip: Screen reading software will read aloud what is contained in the alt attribute when it arrives at the picture.

   

5. Surround the <img> tag with a <span> tag.
   
6. Add a role=”button” attribute to the <span> tag.

   <span role="button"><img .../></span>

   Qtip: The role attribute tells the visitor using a screen reader that this element is a button that can be activated.

   

Standard Targets (Link Text)

1. Open your Creative in the Creatives tab.
2. Double click into the Target element that contains the text.
   
3. Click Source.
4. Add a role=”button” attribute to the <span> tag.

   <span role="button" ... >Textbox content</span>

   

Adding Alt Text and Roles to Close Buttons

Close Button as Image

1. Open your Creative in the Creatives tab.
2. Double click into the Close element that contains the image.
   
3. Click Source.
4. Add the alt=”close” attribute to the <img> tag.

   <img alt="close" ... />

   Qtip: Screen reading software will read aloud what is contained in the alt attribute when it arrives at the picture.

   

5. Surround the <img> tag with a <span> tag.
   
6. Add a role=”button” attribute to the <span> tag.

   <span role="button"><img .../></span>

   Qtip: The role attribute tells the visitor using a screen reader that this element is a button that can be activated.

   

Close Button as Text

1. Open your Creative in the Creatives tab.
2. Double click into the Close element that contains the text.
   
3. Click Source.
4. Add a role=”button” attribute to the <span> tag.

   <span role="button" ...>Textbox content</span>

   Qtip: The role attribute tells the visitor using a screen reader that this element is a button that can be activated.

   

FAQs