🚧 Remove aria attributes on radio buttons

[injms]

What

The aria-describedby attribute on radio buttons with heading and hint text has been removed.

Why

Using a skip to content link on a page with a radio button with page heading and hint causes VoiceOver on Mac / Safari to read out the hint text out automatically. Here's an example of the component with the skip link added.

This has led to strangeness - for example, on this question asking about a letter from the NHS reads out "The title of the letter is ‘Important advice to keep you safe from coronavirus’" straight after using the 'skip to content' link. I don't think that would make sense to a user as they don't have the context of the page heading.

I think that this is caused by the aria-describedby attribute - but pointing that attribute at the heading caused nothing to be read out when the skip to content link was used.

Using aria-describedby seems to have made the experience worse. Bearing in mind the First rule of ARIA use I've removed the attribute. This means that nothing is automatically read out in VoiceOver - I think that this is preferable to a hint being read automatically with no context.

Visual Changes

No visual changes.

[36degrees]

Out of interest, which browser are you testing with?

[36degrees]

I think this might be related to this bug:
https://bugs.webkit.org/show_bug.cgi?id=191742

[injms]

Out of interest, which browser are you testing with?

Safari

[36degrees]

At the minute, my personal preference would be to leave this as-is.

I can see how the description being read out when using the skip link could be confusing, but I'd expect that users would continue to explore the page and would be able to understand it. Removing the association between the hint and the fieldset means the hint is no longer read out when tabbing to the first control in the fieldset.

Secondly, assuming this is happening with the error message as well (which I expect is the case, as it uses the same elements and markup), making this change will only 'fix' the description being read when using the skip link when only the hint is present – it'll still be happening when there's an error message, and I'm less convinced still about removing that association.

In terms of the 'first rule of ARIA', that's essentially saying that if there's a native way to provide the same semantics, use that instead. However, in this instance, removing the aria-describedby association does not leave you with the same semantic structure, as the hint is no longer associated with the fieldset.

I'd be very keen to hear @selfthinker's thoughts on this too.

If you do decide to make this change, we'll need to consider whether it's something we should upstream to the Design System. I'd prefer the two stay in sync as much as possible for established components.

[36degrees]

This PR is relevant, for some history and context as to why this relationship exists and the alternatives that we tested:
alphagov/govuk-frontend#681

[injms]

Having tested this more thoroughly in macOS VoiceOver with Safari, I agree that it then creates a much worse overall experience by removing the link between the form and the hint text so that the hint text is not read aloud when a form field is focused.

Thanks for the discussion everyone - both in this GitHub conversation and outside of it. I really appreciate your time in looking at this 🙏