Work out whether to include aria-labelledby on error summary and notification banner

[hannalaakso]

What

@selfthinker has flagged that aria-labelledby on the error summary is redundant as the error summary is not a landmark. This article by the Paciello Group seems to also support that.

EDIT: Removing the aria-labelledby completely changes the behaviour in VoiceOver (macOS) so we need to do further testing to understand what's going on.

Why

If we're using the attribute incorrectly and unnecessarily we should remove it. We can then also remove the corresponding id from the <h2> in the error summary.

Further detail

It seems that aria-labelledby was originally added together with role="group" as discussed here:

The aria-labelledby attribute is there to ensure the heading in the summary is associated with the summary box when using role="group". So when focus is set to the error summary, the heading is announced.

However we have since swapped group for alert which seems to make aria-labelledby redundant.

We should test that the error summary continues to work correctly with the assistive technologies we support if aria-labelledby is removed.

Who needs to know about this

Developers, Mark as this will be a breaking change at least for fixtures

Done when

• We've tested whether removing the attribute has any adverse effects
• If appropriate, we've removed the attribute from the error summary and the id from the header
• If appropriate, we've documented this in the release note for breaking changes for fixtures (I'm assuming that we wouldn't document this as a breaking change as such but it's something we could discuss doing for 4.0)

[36degrees]

After testing in various different assistive technologies, we found that removing aria-labelledby did affect the way that the notification banner / error summary were presented, especially with VoiceOver on macOS and TalkBack on Android:

	With aria-labelledby	Without aria-labelledby
Voiceover / Safari (macOS Catalina)	SOMETIMES: main, There is a problem, alert. You are currently in an alert. OR: There is a problem There is a problem, Enter your passport number Enter your expiry date. You are currently in an alert.	Sometimes: There is a problem enter your passport number enter your expiry date. You are currently on a heading level 2 OR: "There is a problem. You are currently on a heading level 2" OR: Nothing is read out. (However, the speech viewer sometimes showed one of the above)
Talkback / Chrome 86 (Android 10)	"There is a problem, alert" Sometimes misses off the start by announcing the page load percentage	Sometimes: "Enter your expiry date" Sometimes: "Alert" Always seems to miss off the start by announcing the page load percentage

Full results from testing (Google Sheet)

In the short term, we decided not to remove aria-labelledbyfrom the error summary, and instead to add aria-labelledby to notification banners to make them consistent with the error summary.

However, we'll explore whether there are ways to improve the screen reader experience for notification banners and the error summary in the future, especially as testing has highlighted how inconsistently they seem to be announced.