Error message summaries, alerts and focus

When presenting a user with an error message summary outlining, for example,
missing data in a form, it's common for the message text to be injected into
a div with role="alert" so it is announced automatically by screen readers.

 

Gov.uk (among others) recommends you also move keyboard focus to this error
message summary
<https://design-system.service.gov.uk/components/error-summary/> , because
the user can easily tab to the start of the form (assuming the summary
appears at the top of the form, that is) and more easily correct errors.
However, this then results in screen readers duplicating the announcement:
once due to the alert and once due to the shift in focus. In some cases, a
screen reader may read the message more than twice.

 

Is this really an appropriate pattern? Can this duplicated announcement be
avoided while maintaining the shift in focus?

 

- - -

Nick Bromley

Director & Accessibility Consultant

Red Kite Digital Accessibility Ltd