Red-text error message above search form isn't accessible

[DeniseColbert]

Screen readers probably aren't alerted - to be checked Visually impaired users could easily miss this - no indication that error message has appeared

[AlOneill]

I have not checked the issues given in the description, but I have discovered another: The contrast ratio of the red error message on a white background is too low at 3.99:1. We should use our accessible red, $red for all such messages.

[PatReynolds]

@PatReynolds to check what the screen reader user hears

@Vino-S to change to tha accessible red

[PatReynolds]

@DeniseColbert how do I generate the error message? (i.e. what mistake needs to be made)

[Vino-S]

@PatReynolds One way: Age at Death : Age Range: We can enter max age less than min age

[Vino-S]

Updated changes in test3

[PatReynolds]

Starts to read page with "Alert level list " perhaps more user-friendly text should be read out (e.g. "There is a problem with your search - details are given below".

Then goes through the various icons/menu as usual, then says "Grouping Error List" and then the text of the alert. I am not sure if this phrase is quite right: does it imply a html list? I'm assuming that "Grouping" is a technical term that will make sense to the listener, but 'list of errors' or 'just 'errors' might be more meaningful? What do you think @AlOneill ?

[AlOneill]

@Vino-S The red used for error messages now uses our accessible red — thank you.

@PatReynolds The text, "Alert level list" and "Grouping Error List" is generated by the the screen reader software and we cannot change that.

However, we can improve any text that is visible on the page (and is announced to a screen reader user). For instance, this can be improved to avoid using 'prohibited' and 'precede':

[PatReynolds]

To discuss at Documentation meeting. @Vino-S to send texts used in the error message.

[AlOneill]

@PatReynolds I replied rather too hastily: 'Grouping' is announced because the errors are grouped in a fieldset element and 'Error List' is the content of the legend element. (You probably realised that but are too polite to call me out.)

'Alert' is what I would expect — it is useful information. I'll comment further once I've listened to the full experience. However, I have my doubts about the use of a label element — it is not a pattern of use that I'm familiar with.

[AlOneill]

When I filled in the search form on Safari and submitted it whilst using VO, I noted that:

• at no point did I hear the word 'alert' (!)
• the listing of Form Controls appends the error message to the correct input but if I work through the form, the error message is not mentioned (having two label elements for the same input is considered an error)
• it felt awkward to navigate to the field with the error — I wanted a link in the error message to the appropriate input (this would be the same for any user who has to navigate by keyboard)

@Vino-S can you point me to any information about the pattern you are using or is it a pattern of your own devising?

I suggest that the h2 that heads the error list be something like: "There is 1 error in this search:" or "There are 2 errors in this search:", as appropriate.

[AlOneill]

Looking at the VO issue I've found out that VO only responds to role="alert" if the alert content changes after the initial page load. (I believe that this is what the specs say should happen.)

Experimenting with a local mock-up of a page with errors, I discovered that if I used a little JS to update the alert after the page loads, VO would then respond by immediately announcing the full contents of the updated alert. It does read the whole alert in one go, but there is enough information given to be able to find and navigate directly to the h2 heading for the list of errors or even the relevant input (provided it is correctly labelled). From there a user can hear the contents a bit at a time (and follow any links therein). Food for thought?

[PatReynolds]

Not working with screen reader because page is reloading with the alert already in place.

Screen readers are designed to immediately go to alerts as they appear - so if, e.g. the user gets a low battery warning, or an approaching tornado warning, they hear about that immediately.

Could you take another look at implementing this, @Vino-S

[PatReynolds]

Pat needs to understand how the focus to an alert happens. To discuss in documentation. Example of something that triggers the alert: search for an age range at death where first number is larger than the second.

[PatReynolds]

Focus moves when the Alert content is changed after the has loaded. @Vino-S can you take another look at this, so the alert content is added after the page is loaded.

[DeniseColbert]

Documentation team to test

[AlOneill]

The error message itself is a link. The colour is accessible in terms of contrast, but it is an unexpected colour for a link. The link takes a user to the correct input needing attention. How do we want to use colour in this situation?

I will test next with a screen reader.

[DeniseColbert]

@AlOneill to do a mock-up (or two)

[DeniseColbert]

Two issues:

1. Red error text is a link: mock ups to explore how to make this more obvious
2. Testing of screen readers to see how errors are handled
3. (additionally, connection of error message/refresh to autocomplete)

[KristinaGadzhieva]

@DeniseColbert please have a look, what we should do next with this story.

[DeniseColbert]

New accessibility volunteer to take a look at this in December.