Do not use a question as a heading unless a user can answer it on the page
Design
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
<span class="govuk-caption-xl">
Original version
</span>
<h1 class="govuk-heading-l">
Can you apply?
</h1>
<form class="form" action="/content/original-explanation" method="post">
<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
</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>
<span class="govuk-caption-xl">
Original version
</span>
<h1 class="govuk-heading-l">
Can you apply?
</h1>
<form class="form" action="/content/original-explanation" method="post">
<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
</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>
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
<span class="govuk-caption-xl">
Improved version
</span></span>
<form class="form" action="/content/original-explanation" method="post">
<div class="govuk-form-group">
<fieldset class="govuk-fieldset" aria-describedby="countries-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="countries-hint" class="govuk-hint">
Select all countries that apply
</div>
<div class="govuk-checkboxes" data-module="govuk-checkboxes">
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="countries" name="countries" type="checkbox" value="france">
<label class="govuk-label govuk-checkboxes__label" for="countries">
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="countries-2" name="countries" type="checkbox" value="portugal">
<label class="govuk-label govuk-checkboxes__label" for="countries-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="countries-3" name="countries" type="checkbox" value="spain">
<label class="govuk-label govuk-checkboxes__label" for="countries-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="countries-4" name="countries" type="checkbox" value="something">
<label class="govuk-label govuk-checkboxes__label" for="countries-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="countries-6" name="countries" type="checkbox" value="none" data-behaviour="exclusive">
<label class="govuk-label govuk-checkboxes__label" for="countries-6">
None of these
</label>
</div>
</div>
</fieldset>
</div>
<button type="submit" class="govuk-button" data-module="govuk-button">
Continue
</button>
</form>
<span class="govuk-caption-xl">
Improved version
</span></span>
<form class="form" action="/content/original-explanation" method="post">
{{ govukCheckboxes({
name: "countries",
fieldset: {
legend: {
text: "Are you doing any of these activities?",
isPageHeading: true,
classes: "govuk-fieldset__legend--l"
}
},
hint: {
text: "Select all countries that apply"
},
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"
}
]
}) }}
<button type="submit" class="govuk-button" data-module="govuk-button">
Continue
</button>
</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
<span class="govuk-caption-xl">
Improved version
</span></span>
<h1 class="govuk-heading-l">
Check if you can apply
</h1>
<form class="form" action="/content/original-explanation" method="post">
<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
</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="changedName" name="changedName" type="radio" value="yes">
<label class="govuk-label govuk-radios__label" for="changedName">
Yes
</label>
</div>
<div class="govuk-radios__item">
<input class="govuk-radios__input" id="changedName-2" name="changedName" type="radio" value="no">
<label class="govuk-label govuk-radios__label" for="changedName-2">
No
</label>
</div>
</div>
</fieldset>
</div>
<button type="submit" class="govuk-button" data-module="govuk-button">
Continue
</button>
</form>
<span class="govuk-caption-xl">
Improved version
</span></span>
<h1 class="govuk-heading-l">
Check if you can apply
</h1>
<form class="form" action="/content/original-explanation" method="post">
<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
</ul>
{{ govukRadios({
classes: "govuk-radios--inline",
name: "changedName",
fieldset: {
legend: {
text: "Do you meet the conditions to apply?",
classes: "govuk-fieldset__legend--m"
}
},
items: [
{
value: "yes",
text: "Yes"
},
{
value: "no",
text: "No"
}
]
}) }}
<button type="submit" class="govuk-button" data-module="govuk-button">
Continue
</button>
</form>
This still allows the page to have a question that can be answered.