Hint for fieldset not announced if first input has hint

[NickColley]

We're using the Checkbox items with hints pattern in our service and I've noticed something in VoiceOver (can't comment on JAWS or NVDA). Here's an abbreviated version of the code from the example:

<fieldset aria-describedby="nationality-hint">
    <legend>
        <h1>What is your nationality?</h1>
    </legend>
    <span id="nationality-hint">
        If you have dual nationality, select all options that are relevant to you.
    </span>
    <div>
        <input id="nationality" name="nationality" type="checkbox" value="british" aria-describedby="nationality-item-hint">
        <label for="nationality">British</label>
        <span id="nationality-item-hint">
            including English, Scottish, Welsh and Northern Irish
        </span>
    </div>
    <!-- etc. -->

The hint text for the aria-describedby on the input type="checkbox" supersedes the hint text for the aria-describedby on the fieldset. So the user only gets one hint read to them when they jump to the input through the tab index – the one on the input, rather than the legend.

It doesn't feel right that the hint text on the fieldset isn't read out, when it would be if there was no hint text on the input, but maybe it's deliberate to reduce noisiness or for some other reason. Anyone encountered this before?

Originally posted by @tempertemper in alphagov/govuk-design-system-backlog#37 (comment)

[hannalaakso]

We did some testing. The main problems to look at are:

• NVDA with FF and Chrome, iOS VoiceOver and Mac VoiceOver read out the question, the input label, the input hint but not the fieldset hint
• NVDA with Edge and IE11 only reads out input label and the input hint (no question or fieldset hint)

It might be worth trying to move the aria-describedby to <legend> or <h1>, or move the fieldset hint inside the legend itself. However this might have already been previously explored. What do you think @36degrees?

edit: This is interesting: https://blog.tenon.io/accessible-validation-of-checkbox-and-radiobutton-groups

[36degrees]

It might be worth trying to move the aria-describedby to <legend> or <h1>, or move the fieldset hint inside the legend itself.

We've used various different approaches before:

• Improve accessibility of date of birth pattern govuk_elements#153
• Use aria-describedby to associate the hint with the form fields govuk_elements#187
• Remove aria-describedby from erroring form fields and hint text govuk_elements#461
• Associate form help text with form govuk_elements#485
• Move form help text into legend govuk_elements#484
• De-duplicate legends/headings govuk_elements#507
• Move error message and hint out of labels and legends #681
• Better define relationship between headings, error message and hints #684

We moved the hint / error message out of the legend in #681, based partly on the research in alphagov/govuk_elements#574.

The current approach feels like it's the most semantically 'correct' of all the options we've tried. The hint describes the group of elements, which is represented by the fieldset. The hint does not 'describe' the legend, nor the heading.

My preference would be to raise bugs against NVDA / Jaws, and not to revisit the implementation unless we see evidence that this is having a serious impact on users or we learn that we're going 'against the spec'.

[NickColley]

• NVDA: NVDA not announcing legend hint with aria-describedby if first input has hint reported-bugs#49
• VoiceOver: VoiceOver not announcing legend hint with aria-describedby if first input has hint reported-bugs#50

Minimal test case: https://output.jsbin.com/juyaquq

<fieldset aria-describedby="confirm-nationality-hint">
    <legend>
        What is your nationality?
    </legend>
    <span id="confirm-nationality-hint">
      Select all options that are relevant to you.
    </span>
    <br>
    <input id="confirm-nationality" name="confirm-nationality" type="checkbox" value="british-nationality" aria-describedby="confirm-nationality-item-hint">
    <label for="confirm-nationality">British</label>
    <span id="confirm-nationality-item-hint" class="govuk-hint govuk-checkboxes__hint">
      including English, Scottish, Welsh and Northern Irish
    </span>
    <br>
    <input name="confirm-nationality" type="checkbox" value="irish-nationality" aria-describedby="confirm-nationality-2-item-hint">
    <label class="govuk-label govuk-checkboxes__label" for="confirm-nationality-2">Irish</label>
    <span id="confirm-nationality-2-item-hint" class="govuk-hint govuk-checkboxes__hint">
      including from Northern Ireland
    </span>
    <br>
    <input id="confirm-nationality-3" name="confirm-nationality" type="checkbox" value="other-country-nationality" data-aria-controls="conditional-confirm-nationality-3">
    <label for="confirm-nationality-3">Citizen of a different country</label>
</fieldset>

[NickColley]

Closing this out as raised issues, hopefully they get resolved! We can re-open if this becomes a more serious issue for our users.