id	summary	reporter	owner	description	type	status	component	version	severity	resolution	keywords	cc	stage	has_patch	needs_docs	needs_tests	needs_better_patch	easy	ui_ux
35706	Improve admin add/change form top level errors for screen readers	Sarah Boyce	Antoliny	"I was looking into best practices for ""top level"" form errors and according to the [https://design-system.w3.org/styles/form-errors.html W3C Design system] we can make the following improvements...

== Prefix the word “Error:” to the document’s `<title>`
Confirmed that this is the first thing announced by screen readers when the page loads.
I think this is especially useful considering we have a ""Save and add another"" button, given you were on the add page and submit using  ""Save and add another"" going to the add page is the ""correct"" state.

== Have a summary of the errors at the top of the page ==
https://design-system.w3.org/styles/form-errors.html has an example of the top level note. This is similar to our ""Please correct the errors below""

{{{
{% if errors %}
    <p class=""errornote"">
    {% blocktranslate count counter=errors|length %}Please correct the error below.{% plural %}Please correct the errors below.{% endblocktranslate %}
    </p>
    {{ adminform.form.non_field_errors }}
{% endif %}
}}}

We could (should?) update this to:
- be above the form title
- have `tabindex=""-1""` to be the first thing read on the page
- be in a div with `role=""alert""` with an `aria-labelledby` attribute set for the title
- also include the individual form errors (which link to the form elements) in this summary box

-----

I hope the accessibility team can confirm if any of these are not necessary or not wanted

This a bit related to #32819"	Cleanup/optimization	assigned	contrib.admin	dev	Normal		accessibility	Marijke Luttekes Thibaud Colas Tom Carrick Sarah Abderemane	Accepted	1	0	0	1	0	1