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.
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>
<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.