Qualaroo is now 508 compliant! This article details how to enable functionality that makes interacting with Qualaroo nudges using assistive technology like screen readers possible.
Features include:
- Uses native form controls for checkboxes and radio buttons
- Adds proper labels to form elements
- Buttons have button role and respond to return key presses
- When displaying the nudge as a model (in the center of the page):
- Focuses on first form control on open
- Adds dialog role to containing element and has a label of “Survey”
- Focus traps tabbing to different elements on the survey and prevents focusing outside of it
- Pressing the esc key closes the survey
In order to enable Accessibility Mode, call the following at the very beginning of the Qualaroo snippet before runtime:
window._kiq.push(['enableAccessibilityMode']);
For example, the following snippet:
<!-- Qualaroo for qualaroo.com -->
<!-- Paste this code right after the <body> tag on every page of your site. -->
<script type="text/javascript">
var _kiq = _kiq || [];
(function(){
setTimeout(function(){
var d = document, f = d.getElementsByTagName('script')[0], s = d.createElement('script'); s.type = 'text/javascript';
s.async = true; s.src = '//s3.amazonaws.com/ki.js/39241/8vb.js'; f.parentNode.insertBefore(s, f);
}, 1);
})();
</script>
turns into:
<!-- Qualaroo for qualaroo.com -->
<!-- Paste this code right after the <body> tag on every page of your site. -->
<script type="text/javascript">
var _kiq = _kiq || [];
_kiq.push(['enableAccessibilityMode']);
(function(){
setTimeout(function(){
var d = document, f = d.getElementsByTagName('script')[0], s = d.createElement('script'); s.type = 'text/javascript';
s.async = true; s.src = '//s3.amazonaws.com/ki.js/39241/8vb.js'; f.parentNode.insertBefore(s, f);
}, 1);
})();
</script>
We hope this information has been helpful. If you ever have any questions or need anything at all, please reach out to us at support@qualaroo.com!
Comments
0 comments
Article is closed for comments.