Interactive questions are used to present people with a sequence of simple questions that leads to the specific answer they need to continue with or complete their task.

Interactive questions may also be referred to as decision trees or wizards.

On this page

• Considering user needs
• When to use
  • Alternative way to provide answers
• When to consider alternatives
• How to implement
  • Creating interactive questions
  • Introducing interactive questions on the page
  • Presenting questions
  • Adding supportive statements
  • Presenting answers
  • Presenting the text version
• Design options
  • Configuration options
• Meeting accessibility requirements
• Supporting blog post
• Complementary components and functions

Considering user needs

Using this pattern with UCD guidance supports:

• People’s understanding of what is expected of them by providing clear instructions at each step
• People navigating the content with a screen reader and keyboard-only inputs
• A logical and intuitive order to questions, giving people the information they need to respond to a question
• Visual cues to show progress, which is especially helpful for people with cognitive disabilities
• Providing people with multiple ways to access information

When to use

Use interactive questions to help people find an answer to their specific situation or condition.

This component is well suited to helping people understand:

• Compliance requirements that depend on specific situations or conditions
• Applicability of rules

Alternative way to provide answers

The content should already exist in a text format. This text version is the authoritative content, and the interactive questions are the supportive feature.

People who need a full text equivalent are those who:

• Cannot run scripts on their device, including instances where scripts are not performing properly
• Need to scan the entire scope of all situations (e.g. lawyers, accountants, call centre agents)
• Prefer not to interact with interactive questions

When to consider alternatives

If most answers can be reached in 1 or 2 questions, consider one of the following ways to present the information:

• Expand/hides (for mutually exclusive options)
• Tabs (alternative ways to get to the same answer)
• Eligibility checklists
• Lists
• Other types of content restructuring

These other ways of presenting the information remove the requirement of providing a full text equivalent as they do not hide content with scripts.

How to implement

Interactive questions should follow these fundamental principles:

• Use clear and easy to understand questions and options
• Require as few questions as possible to reach an answer
• Prioritize the most common scenarios instead of providing answers for every situation

On Canada.ca, interactive questions use the GCWeb component field flow, which has not been optimized for complex interactive questions. Be cautious when designing content as there are limitations on how the code can function or be displayed.

Creating interactive questions

Focus on the majority of the audience

• Prioritize keeping interactive questions as simple and short as possible
• Consider only including answers for the most common situations
• For situations that affect a smaller number of people, refer them to the full text version or other governance provided
• Get people to an answer as quickly as possible
  • For example, if all Canadians are exempt from something, start with "Are you a Canadian citizen?"
• If most answers are found after the first question, move those situations out of and before the interactive questions
  • Use interactive questions for those who need to provide more information about their situation

Keep options unique

Each option in the same question should lead to different answers or next questions. Consider using the options Yes/No/Unsure for questions where multiple options may have the same answer.

If multiple options in one question must lead to the same result, each result or answer should be personalized to each option.

Map out interactive questions

For most situations, you can map interactive questions out as a nested list.

Refer to the logic map tab in the design options.

Common actions that are used after a choice has been made are:

• Show another question and a new set of options
• Show a result or an answer
• Redirect people to another web page
• Add or remove a specific visual cue to dynamically change the page

Introducing interactive questions on the page

• The heading for a set of interactive questions should state the task
  • For example: "Find out if you can renew your passport online" or "Confirm you have completed the calculations"
• Avoid using terms like "wizard", "decision tree" or even "interactive questions" in the heading title
• Provide a brief overview of what to expect from completing the task, along with instructions (if needed) to simplify answering the questions
• Help people with navigating by providing an opening statement on what to expect
  • For example: "Make a selection and then scroll down to see the next set of options or your result"

Placement of interactive questions within existing content

If the interactive questions are part of the content on the page (a step in a larger task), use headers before and after interactive questions to separate the rest of them from the rest of the content.

Additionally to headers, consider using visual indicators to show when the interactive questions start and stop (for example, tabs, icon, indenting, border and well are all acceptable options).

Presenting questions

• Add any important information, concepts, or explanations before the interactive questions.
• Use radio buttons as shown in the design options, to show the choices:
• It is better to have less options to choose from and more questions to ask when using radio buttons, especially when using a mobile device
• When there are a lot of options use the select (dropdown) method
• Avoid using lightboxes and overlays as they do not always perform as intended
• Links should open in a new tab or window
• Having more questions is better than "front-loading" a lot of information in a single question
• Order the more commonly chosen options (based on evidence) towards the top of the list, or sort alphabetically
  • This does not apply to default choices like Yes/No/Unsure; keep their order consistent
• Avoid introducing new terms or concepts within interactive questions; provide this information before the questions
  • To remind people of terms or concepts use rescues such as links or AJAX pulls
• Only create interactive questions for parts of a task that require decision making and place them in between the rest of the process

Adding supportive statements

If a specific question requires additional information and it cannot be added before the interactive questions, consider these options:

• Add a short plain text statement above or below the question
  • Use aria-describedby or aria-labelledby to bind the question and statement (in correct order), so a screen reader device will read them together
• To add information that includes structured content such as lists, or interactive elements like links, place the content inside an expand/hide element with a descriptive summary
  • This allows those who navigate with keyboards to focus on the content when going through the interactive questions' form elements
• To add information after the question has been asked, add an expand/hide below the question
  • Screen reader devices will read the question, the expand/hide summary and then the person can navigate to the options

Refer to: Design options

Presenting answers

Use alerts to provide answers

Use alerts to show that a series of questions has ended and a conclusion has been made.

Use the correct alert based on the type of answer:

• Default results: use info alert
• Positive and negative results: use success and warning alerts

Add a header to the alert to provide an overview of what the answer is. Start with a clear statement, such as "The result is" or "Your answer is " to help people understand that it is the end of the questions.

Refer to: Design options

Use attributes to allow navigation out of the questions

There are different ways to code for accessibility depending on if the answer is shorter or longer. You can help persons using screen readers, navigate out of the form elements in 1 of 2 ways:

• Wrap the set of answers with a block element (e.g. <div> or <section>) and use the aria-live="polite" attribute so that the answers are announced to the person through the screen reader
• Alternatively use the tabindex="0" attribute to the header of the answers so the person can tab to the answer if using keyboard navigation (or the entire answer if it's short)
  • Do not use aria-live="polite" if you are wrapping tabindex="0" around the entire answer
• If putting the interactive questions in a tab design (to support the full text equivalent), consider adding a link to navigate to the next header

Presenting the text version

The full text version can be displayed:

• As part of a tab design with interactive questions on the first tab and the full text on the second
  • Provide links within both tabs for navigating between tabs
  • Keep the formatting in the full text version simple, similar to a publication (e.g. no expand/hides or stylized components)
• On a different page, accessed by a link near the interactive questions
• On the same page, but in a different location
  • It should be clear (visually or contextually) that the information is mutually exclusive and a person does not need to interact with both parts

Design options

Due to limitations, the appearance examples may not be fully accessible. Copy the code from the HTML code tab.

Things to consider:

• Use <!--code comments--> to identify questions and answers and keep the field flow readable
• Wrap your content in an additional <div> tag if the content order is reversed
• Lead in statements should only appear after an initial question has been answered

<div class="wb-frmvld fieldflow-lg">
              <form>
              <div class="wb-fieldflow gc-font-2019" data-wb-fieldflow='{"noForm": true, "isoptional": true, "renderas":"radio", "gcChckbxrdio":true, "reset": {"action": "addClass", "source": ".alert-result", "class": "hidden"}, "attributes": {"aria-describedby": "q1-desc"}}'>
              <!--Question 1 --> <div class="wb-fieldflow-header"> <p class="wb-fieldflow-label">[Question 1]</p> <p id="q1-desc">[Supportive statement here if necessary]</p> <details>
                <summary>[Summary statement here if necessary]</summary>
                <p>Content, links, tables, etc. go here.</p>
                </details> </div>  <ul>
              <li>Yes
              <div class="wb-fieldflow-sub gc-font-2019" data-wb-fieldflow='{"renderas": "radio", "gcChckbxrdio":true, "isoptional": true, "reset": {"action": "addClass", "source": ".alert-result", "class": "hidden"}, "attributes": {"aria-describedby": "q2-desc"}, "attributes": {"aria-labelledby": "q2-desc q2"}}'> <!--Question 2 -->  
                <div class="wb-fieldflow-header">  <p id="q2-desc">[Lead in statement here if necessary]</p> <p class="wb-fieldflow-label"><span id="q2">[Question 2]</span></p> <p id="q2-desc">[Supportive statement here if necessary]</p> <details>
                <summary>[Summary statement here if necessary]</summary>
                <p>Content, links, tables, etc. go here.</p>
                </details> </div> <ul>
              <li data-wb-fieldflow='{"action": "removeClass", "source": "#answer-2", "class": "hidden", "live": true}'>Yes</li>
              <li data-wb-fieldflow='{"action": "removeClass", "source": "#answer-3", "class": "hidden", "live": true}'>No</li>
              </ul>
              </div>
              </li>
              <li data-wb-fieldflow='{"action": "removeClass", "source": "#answer-1", "class": "hidden", "live": true}'>No</li>
              </ul>
              </div>
              </form>
              </div>
              <div id="answers1" aria-live="polite">
              <!--Answer 1 -->
              <div id="answer-1" class="hidden alert alert-warning alert-result">
              <h3><small>The result is</small> <br>[Answer 1 header]</h3>
              <p>[Answer 1 statement]</p>
              </div>
              <!-- Answer 2 -->
              <div class="hidden alert alert-info alert-result" id="answer-2">
              <h3><small>The result is</small> <br>[Answer 2 header]</h3>
              <p>[Answer 2 statement]</p>
              </div>
              <!-- Answer 3 -->
              <div class="hidden alert alert-success alert-result" id="answer-3">
              <h3><small>The result is</small> <br>[Answer 3 header]</h3>
              <p>[Answer 3 statement]</p>
              </div>
              </div>