Do not use a question as a heading unless a user can answer it on the page
If you put a question in a form page, it needs to have a way for a user to answer it.
Typical example that causes barriers
Contents
<form class="govuk-!-width-two-thirds" action="#" method="post">
<span class="govuk-caption-l">Original version</span>
<h1 class="govuk-heading-l">
Can you apply?
</h1>
<p class="govuk-body">
You can only apply if you are:
</p>
<ul class="govuk-list govuk-list--bullet govuk-list--spaced">
<li>
constructing, altering, repairing, extending, demolishing or dismantling
buildings or structures (whether permanent or not), including offshore
installation services
</li>
<li>
constructing, altering, repairing, extending, demolishing of any works
forming, or planned to form, part of the land, including (in particular)
walls, roadworks, power lines, electronic communications equipment,
aircraft runways, railways, inland waterways, docks and harbours
</li>
<li>
pipelines, reservoirs, water mains, wells, sewers, industrial plant and
installations for purposes of land drainage, coast protection or defence
</li>
<li>
installing heating, lighting, air-conditioning, ventilation, power
supply, drainage, sanitation, water supply or fire protection systems in
any building or structure
</li>
</ul>
<p class="govuk-body">
If you are not eligible you can <a class="govuk-link" href="#">return to GOV.UK</a>.
</p>
<button type="submit" class="govuk-button" data-module="govuk-button">
Continue
</button>
</form>
<form class="govuk-!-width-two-thirds" action="#" method="post">
<span class="govuk-caption-l">Original version</span>
<h1 class="govuk-heading-l">
Can you apply?
</h1>
<p class="govuk-body">
You can only apply if you are:
</p>
<ul class="govuk-list govuk-list--bullet govuk-list--spaced">
<li>
constructing, altering, repairing, extending, demolishing or dismantling
buildings or structures (whether permanent or not), including offshore
installation services
</li>
<li>
constructing, altering, repairing, extending, demolishing of any works
forming, or planned to form, part of the land, including (in particular)
walls, roadworks, power lines, electronic communications equipment,
aircraft runways, railways, inland waterways, docks and harbours
</li>
<li>
pipelines, reservoirs, water mains, wells, sewers, industrial plant and
installations for purposes of land drainage, coast protection or defence
</li>
<li>
installing heating, lighting, air-conditioning, ventilation, power
supply, drainage, sanitation, water supply or fire protection systems in
any building or structure
</li>
</ul>
<p class="govuk-body">
If you are not eligible you can <a class="govuk-link" href="#">return to GOV.UK</a>.
</p>
{{ govukButton({
text: "Continue"
}) }}
</form>
In this example, ‘can you apply’ is just a heading. The only options are to ‘continue’ or ‘return to GOV’UK’ - neither of which answers the question. Another better option is to turn this into an actual question with answers.
Improved versions
Improvement 1
If possible, ask multiple conditions with multiple questions that people can work through.
Contents
<form class="govuk-!-width-two-thirds" action="#" method="post">
<span class="govuk-caption-l">Improved version</span>
<div class="govuk-form-group">
<fieldset class="govuk-fieldset" aria-describedby="activities-hint">
<legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
<h1 class="govuk-fieldset__heading">
Are you doing any of these activities?
</h1>
</legend>
<div id="activities-hint" class="govuk-hint">
Select all activities that apply
</div>
<div class="govuk-checkboxes" data-module="govuk-checkboxes">
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="activities" name="activities" type="checkbox" value="france">
<label class="govuk-label govuk-checkboxes__label" for="activities">
Constructing, altering, repairing, extending, demolishing or
dismantling buildings or structures (whether permanent or not),
including offshore installation services
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="activities-2" name="activities" type="checkbox" value="portugal">
<label class="govuk-label govuk-checkboxes__label" for="activities-2">
Constructing, altering, repairing, extending, demolishing of any
works forming, or planned to form, part of the land, including (in
particular) walls, roadworks, power lines, electronic communications
equipment, aircraft runways, railways, inland waterways, docks and
harbours
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="activities-3" name="activities" type="checkbox" value="spain">
<label class="govuk-label govuk-checkboxes__label" for="activities-3">
Pipelines, reservoirs, water mains, wells, sewers, industrial
plant and installations for purposes of land drainage, coast
protection or defence
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="activities-4" name="activities" type="checkbox" value="something">
<label class="govuk-label govuk-checkboxes__label" for="activities-4">
Installing heating, lighting, air-conditioning, ventilation,
power supply, drainage, sanitation, water supply or fire protection
systems in any building or structure
</label>
</div>
<div class="govuk-checkboxes__divider">or</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="activities-6" name="activities" type="checkbox" value="none" data-behaviour="exclusive">
<label class="govuk-label govuk-checkboxes__label" for="activities-6">
None of these
</label>
</div>
</div>
</fieldset>
</div>
<button type="submit" class="govuk-button" data-module="govuk-button">
Continue
</button>
</form>
<form class="govuk-!-width-two-thirds" action="#" method="post">
<span class="govuk-caption-l">Improved version</span>
{{ govukCheckboxes({
fieldset: {
legend: {
classes: "govuk-fieldset__legend--l",
text: "Are you doing any of these activities?",
isPageHeading: true
}
},
hint: {
text: "Select all activities that apply"
},
name: "activities",
value: activities,
items: [
{
value: "france",
text: "Constructing, altering, repairing, extending, demolishing or
dismantling buildings or structures (whether permanent or not),
including offshore installation services"
},
{
value: "portugal",
text: "Constructing, altering, repairing, extending, demolishing of any
works forming, or planned to form, part of the land, including (in
particular) walls, roadworks, power lines, electronic communications
equipment, aircraft runways, railways, inland waterways, docks and
harbours"
},
{
value: "spain",
text: "Pipelines, reservoirs, water mains, wells, sewers, industrial
plant and installations for purposes of land drainage, coast
protection or defence"
},
{
value: "something",
text: "Installing heating, lighting, air-conditioning, ventilation,
power supply, drainage, sanitation, water supply or fire protection
systems in any building or structure"
},
{
divider: "or"
},
{
value: "none",
text: "None of these",
behaviour: "exclusive"
}
]
}) }}
{{ govukButton({
text: "Continue"
}) }}
</form>
Rewriting the header to be a sentence makes it clear that the user does not have to answer anything.
Improvement 2
If the question cannot be made into multiple input fields (for example because the information cannot be used again, therefore breaking other WCAG rules) the question can be changed into a complex question.
Contents
<form class="govuk-!-width-two-thirds" action="#" method="post">
<span class="govuk-caption-l">Improved version</span>
<h1 class="govuk-heading-l">
Check if you can apply
</h1>
<p class="govuk-body">
You can only apply if you are:
</p>
<ul class="govuk-list govuk-list--bullet govuk-list--spaced">
<li>
constructing, altering, repairing, extending, demolishing or dismantling buildings or structures (whether permanent or not), including offshore installation services
</li>
<li>
constructing, altering, repairing, extending, demolishing of any works forming, or planned to form, part of the land, including (in particular) walls, roadworks, power lines, electronic communications equipment, aircraft runways, railways, inland waterways, docks and harbours
</li>
<li>
pipelines, reservoirs, water mains, wells, sewers, industrial plant and installations for purposes of land drainage, coast protection or defence
</li>
<li>
installing heating, lighting, air-conditioning, ventilation, power supply, drainage, sanitation, water supply or fire protection systems in any building or structure
</li>
</ul>
<div class="govuk-form-group">
<fieldset class="govuk-fieldset">
<legend class="govuk-fieldset__legend govuk-fieldset__legend--m">
Do you meet the conditions to apply?
</legend>
<div class="govuk-radios govuk-radios--inline" data-module="govuk-radios">
<div class="govuk-radios__item">
<input class="govuk-radios__input" id="elibible" name="elibible" type="radio" value="yes">
<label class="govuk-label govuk-radios__label" for="elibible">
Yes
</label>
</div>
<div class="govuk-radios__item">
<input class="govuk-radios__input" id="elibible-2" name="elibible" type="radio" value="no">
<label class="govuk-label govuk-radios__label" for="elibible-2">
No
</label>
</div>
</div>
</fieldset>
</div>
<button type="submit" class="govuk-button" data-module="govuk-button">
Continue
</button>
</form>
<form class="govuk-!-width-two-thirds" action="#" method="post">
<span class="govuk-caption-l">Improved version</span>
<h1 class="govuk-heading-l">
Check if you can apply
</h1>
<p class="govuk-body">
You can only apply if you are:
</p>
<ul class="govuk-list govuk-list--bullet govuk-list--spaced">
<li>
constructing, altering, repairing, extending, demolishing or dismantling buildings or structures (whether permanent or not), including offshore installation services
</li>
<li>
constructing, altering, repairing, extending, demolishing of any works forming, or planned to form, part of the land, including (in particular) walls, roadworks, power lines, electronic communications equipment, aircraft runways, railways, inland waterways, docks and harbours
</li>
<li>
pipelines, reservoirs, water mains, wells, sewers, industrial plant and installations for purposes of land drainage, coast protection or defence
</li>
<li>
installing heating, lighting, air-conditioning, ventilation, power supply, drainage, sanitation, water supply or fire protection systems in any building or structure
</li>
</ul>
{{ govukRadios({
classes: "govuk-radios--inline",
fieldset: {
legend: {
text: "Do you meet the conditions to apply?",
classes: "govuk-fieldset__legend--m"
}
},
name: "elibible",
value: elibible,
items: [
{
value: "yes",
text: "Yes"
},
{
value: "no",
text: "No"
}
]
}) }}
{{ govukButton({
text: "Continue"
}) }}
</form>
This still allows the page to have a question that can be answered.