Complex hint

Pattern Checker

What does this mean?

A hint is being used which contains more than just paragraph copy. This could be elements such as links or lists.

For example:

<label for="nhs">What is your NHS number?</label>
<div id="nhs-hint">
    Your NHS number is a 10 digit number that you find on any letter the NHS has sent you. For example, 485 777 3456. <a href="">Find your NHS number.</a>
</div>
<input type="text" id="nhs" aria-describedby="nhs-hint">

Impact on users

The impact is for screen-reader users, particuarly when navigating by form elements.

When a screen-reader user lands on the form input, the corresponding aria-describedby attribute is computed and announced. In the example above this is the hint.

However when aria-describedby is processed it only returns the plain content, no semantic information is conveyed.

This means the above example will be returned as:

"Your NHS number is a 10 digit number that you find on any letter the NHS has sent you. For example, 485 777 3456. Find your NHS number."

Notice how the fact that "Find your NHS number" is a link is not mentioned.

This is less of an issue if the user has previously read through the hint independently, but in a form a screen-reader user is likely to jump from field to field so they may not realise there is a link there at all.

When looking at lists, often a screen-reader will not announce all of the content.

For example:

<label for="event">Tell us about the event</label>
<div id="event-hint">
    Provide these details
    <ul>
        <li>Dates and times</li>
        <li>Location</li>
        <li>Entry fee</li>
    </ul>
</div>
<textarea id="event" aria-describedby="event-hint"></textarea>

In the above example the screen-reader user will only hear:

"Provide these details"

The rest of the hint is not announced so the user might miss out on important information.

How to fix

Hints should be restricted to simple text of a single paragraph.

In some cases you might be able to change the list to a paragraph, for example:

"Include information about dates and times, location and any entry fee."

If more text is required, or it includes markup such as lists or links, then you should look at using the "Complex question" pattern.

References

GOV.UK guidance on links in hints

Classification

Level: warn
Tagged: best-practice govuk

See all issues