When adding a third-party survey (or other document), such as a User Heroes survey, to your site it is important that it is linked to in an accessible way; if the link is not accessible then access to the survey will be denied to some people.
The simplest way to provide access to a third-party survey is with a native HTML link:
<a href="[url of the survey]">Take our User Heroes survey</a>With this approach, the link is accessible to everyone, whether they are using a mouse, touch screen, screen reader, keyboard, voice control software, or any other method of access. You will need to make sure that the link has a clear focus style, i.e. that it is obvious when it receives focus, and its appearance makes it obvious that it is a link, but, beyond those visual aspects, browsers will handle the accessible interactions for the link.
You can change the text of the link to whatever makes sense for the content it is linking to, but it should describe the link's purpose on its own without relying on context from other page content.
Using a link in this way will load the survey in the current browser tab. While it may be tempting to open it in a new browser tab or window, we recommend not forcing this with a target="_blank" attribute or JavaScript that opens a new window. To do so takes away choice from your site visitor; if they wish to open the link in a new tab or window then they are able to do so using standard browser interactions, but they are not forced to do so. This reduces the chance of confusion that can be caused by new windows opening automatically.
You may wish to open the survey within your site, in a modal dialog. It is possible to progressively enhance the basic link with JavaScript to add this functionality.
First, the modal dialog must be accessible. You can find a complete guide to implementing an accessible modal dialog at W3C WAI-ARIA Authoring Practices 1.1 Dialog (modal). You must ensure that the modal dialog:
- has the correct roles and properties, i.e. a dialog role and an accessible name. We recommend "User Heroes survey" for the accessible name.
- content outside of the dialog is not available to screen readers or other assistive technologies, or to keyboard users. There are several methods that can be used to achieve this, but we recommend including the dialog as a child of the element, with the inert attribute added to all other child elements of the element. While the inert attribute does not have universal support at the time of writing, the inert polyfill can be used.
- when the dialog opens, focus is set to the dialog container and when the dialog is closed focus is returned to the control that opened the dialog.
Note that we do not recommend opening the dialog on page load or on any other event other than explicit interaction by the site visitor. Bombarding visitors with pop-up dialogs and windows is likely to prejudice them against taking the survey.
Within the dialog, the survey can be included using an <iframe> element. As with the modal dialog, the <iframe> element must be accessible. This is achieved by adding a title attribute to the <iframe> element, with text that describes the contents of the <iframe>. This can repeat the name of the modal dialog, so we again recommend using "User Heroes survey".
This will look something like:
<div role="dialog" aria-label="User Heroes survery">
<iframe title="User Heroes survey" src="[url of the survey]" frameborder="0"></iframe>
</div>The link can be progressively enhanced to behave like a button, which is a more appropriate element for opening a dialog, rather than a link. First, add a role="button" attribute to the link; this will change how the control is announced with a screen reader from "link" to "button". Second, use JavaScript to trigger the opening of the modal dialog when either the ENTER or SPACE key is pressed; by default only the ENTER key will trigger the link. The result will be:
<a href="[url of the survey]" role="button">Take our User Heroes survey</a>By following these steps, whether you include a link to the survey or use a modal dialog to display it, the survey will be accessible to all visitors to your site.