Linking to third-party surveys

How to link to third-party surveys in an accessible and usable way.
Posted by Ab11y, on .

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:

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>

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.