Change error summary ARIA role to "alert" #511

selfthinker · 2017-06-29T22:35:28Z

What problem does the pull request solve?

Currently neither VoiceOver on iOS or macOS nor TalkBack on Android announce that there is an error when submitting a form with errors. Although we focus on the error summary box, it doesn't have the desired effect. In the iOS case it's because of one browser bug and in the macOS case because of another browser bug. At least the iOS and Android issue can be fixed by adding the ARIA role="alert" to the error summary box.

I am not sure what the effect will be of removing the group role. It didn't seem to have an effect when I tested this but I would like to have someone else's opinion on this.

How has this been tested?

Changing this doesn't change the behaviour (postively or negatively) in JAWS, NVDA or VO on macOS, but it does mean that ZoomText is not announcing anything.
As VO on iOS is used much more often by blind people than ZoomText (ZoomText is used more by visually impaired people who would be able to see the big red alert box), this seems to be a sensible sacrifice.

What type of change is it?

Bug fix (non-breaking change which fixes an issue)

Has the documentation been updated?

I have updated the documentation accordingly.
I have read the CONTRIBUTING document.

36degrees · 2017-07-03T09:24:54Z

app/views/examples/example_form_validation_multiple_questions.html

@@ -30,9 +30,9 @@ <h2 class="heading-medium implementation-advice">Implementation advice</h2>
          </span>
        </li>
        <li>
-          indicate to screenreaders that the summary represents a collection of information
+          make sure that the summary gets announced to as many screen readers as possible


Minor copy suggestion to improve flow and be consistent with the other points:

Ensure that the summary is announced to as many screen readers as possible
use role="alert" on the containing div

36degrees · 2017-07-03T09:26:55Z

Makes sense to me. I'm not an expert on roles by any means, but from a quick Google I don't think we're losing anything important by removing the group role.

hannalaakso · 2017-07-03T16:22:25Z

I'm guessing the role role "group" was meant to group related elements (h1, p, ul) together, just looking at form_error_radio_show_errors.html. But W3C say role "group" should be used for form controls so I think the group role here is not doing anything, unless there are form controls inside any of the divs which I couldn't see.

selfthinker · 2017-07-03T17:58:13Z

I wonder if the aria-labelledby has any symbiotic relationship with the role=group and if it can be accessed the same way without it?

@36degrees, the copy change makes sense, I will change it when I am back.

gemmaleigh · 2017-07-04T14:39:32Z

I had a look for the reason why role="group" was added, I'm afraid can't find the history of it. I can only assume it was added so that assistive technologies know that it's a container for a group of related content. https://www.w3.org/TR/wai-aria/roles#group

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.

I'd be keen to know if the JavaScript which is setting focus to the error summary box can also be removed?

The documentation for role="alert" implies there isn't a need to also set focus to the summary box: https://www.w3.org/TR/wai-aria/roles#alert

Neither authors nor user agents are required to set or manage focus to them in order for them to be processed.

hannalaakso · 2017-07-11T09:21:19Z

I've finally got a working machine so can do some testing on this. I'll pick this up tomorrow.

selfthinker · 2017-07-11T21:16:54Z

@gemmaleigh, I have tested lots of variations, but I have not tested what happens if we don't set the focus. Good question. I would guess it's still needed due to inconsistent screen reader support but I can make sure and test it.

@hannalaakso, I can introduce you to our AT laptops and show you how to test in our various screen readers etc.

hannalaakso · 2017-07-12T11:54:19Z

This claims that NVDA + Edge doesn't support role="alert". I guess we need to do some testing.

I did test removing the JS that sets focus and using role="alert" and VoiceOver on MacOS 10.11.6 announces it correctly. I was testing in form_error_multiple.html.

Thanks @selfthinker have slacked you separately re:intro 👍

selfthinker · 2017-07-13T16:19:05Z

I don't think NVDA officially supports Edge yet. (Struggling to find evidence of that, though.) So, I think we can ignore that.

selfthinker · 2017-07-13T20:05:07Z

I can currently not fully test this without the focus as our laptops with JAWS etc on them have connection issues.
I have just tested this in NVDA and Firefox, though, and that does definitely not work properly without the focus. It jumps straight to the first input field (after reading the page title) and skips the error summary box completely.
Another reason why the focus is still useful is mobile devices. It helps move the box into the viewport!

selfthinker · 2017-07-21T12:54:59Z

I have asked Leonie for feedback on this and she responded:

We used the group role to set an explicit role on the div element (without which the aria-labelledby attribute won't work). More on this here:
https://www.paciellogroup.com/blog/2017/07/short-note-on-aria-label-aria-labelledby-and-aria-describedby/

If the alert role is used instead it will achieve the same thing, so no problem with switching it over.

I haven't made the copy change @36degrees requested yet because I'm waiting for #509 to be merged as I know there will be conflicts.

An ARIA `role="alert"` on the error summary should not be necessary due to the focus on that area. But without this VoiceOver on iOS doesn't announce the error message at all due to this bug: https://bugs.webkit.org/show_bug.cgi?id=163719 Changing this doesn't change the behaviour in JAWS, NVDA or VO on macOS, but it does mean that ZoomText is not announcing anything. As VO on iOS is used much more often by blind people than ZoomText (ZoomText is used more by visually impaired people who would see the big red alert box), this seems to be a sensible sacrifice.

selfthinker · 2017-07-25T14:27:58Z

I have just made the copy changes. Although #509 isn't merged yet, this one could be merged before it. I guess it doesn't really matter which one is the one that is causing the other to conflict.

36degrees

LGTM

gemmaleigh temporarily deployed to govuk-elements-review-pr-511 June 29, 2017 22:35 Inactive

36degrees reviewed Jul 3, 2017

View reviewed changes

hannalaakso self-requested a review July 3, 2017 16:01

gemmaleigh temporarily deployed to govuk-elements-review-pr-511 July 13, 2017 08:22 Inactive

selfthinker force-pushed the error-summary-with-role-alert branch from 126b3c2 to 7ef90d6 Compare July 25, 2017 14:23

36degrees approved these changes Jul 25, 2017

View reviewed changes

selfthinker merged commit 567f5c2 into master Jul 25, 2017

36degrees deleted the error-summary-with-role-alert branch July 25, 2017 15:31

selfthinker mentioned this pull request Sep 21, 2017

Add validation examples for single-question, single-field form pages #552

Merged

36degrees mentioned this pull request Oct 3, 2017

Release v3.1.2 #563

Merged

selfthinker mentioned this pull request Jun 1, 2019

Focus is always on button after posting form when using VoiceOver alphagov/reported-bugs#31

Closed

hannalaakso mentioned this pull request Sep 15, 2020

Work out whether to include aria-labelledby on error summary and notification banner alphagov/govuk-frontend#1954

Closed

3 tasks

selfthinker mentioned this pull request Jun 20, 2022

Error summary list not read out in JAWS (2022) alphagov/govuk-frontend#2657

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Change error summary ARIA role to "alert" #511

Change error summary ARIA role to "alert" #511

selfthinker commented Jun 29, 2017 •

edited

Loading

36degrees Jul 3, 2017

36degrees commented Jul 3, 2017

hannalaakso commented Jul 3, 2017 •

edited

Loading

selfthinker commented Jul 3, 2017

gemmaleigh commented Jul 4, 2017

hannalaakso commented Jul 11, 2017

selfthinker commented Jul 11, 2017

hannalaakso commented Jul 12, 2017 •

edited

Loading

selfthinker commented Jul 13, 2017

selfthinker commented Jul 13, 2017 •

edited

Loading

selfthinker commented Jul 21, 2017

selfthinker commented Jul 25, 2017

36degrees left a comment

Change error summary ARIA role to "alert" #511

Change error summary ARIA role to "alert" #511

Conversation

selfthinker commented Jun 29, 2017 • edited Loading

What problem does the pull request solve?

How has this been tested?

What type of change is it?

Has the documentation been updated?

36degrees Jul 3, 2017

Choose a reason for hiding this comment

36degrees commented Jul 3, 2017

hannalaakso commented Jul 3, 2017 • edited Loading

selfthinker commented Jul 3, 2017

gemmaleigh commented Jul 4, 2017

hannalaakso commented Jul 11, 2017

selfthinker commented Jul 11, 2017

hannalaakso commented Jul 12, 2017 • edited Loading

selfthinker commented Jul 13, 2017

selfthinker commented Jul 13, 2017 • edited Loading

selfthinker commented Jul 21, 2017

selfthinker commented Jul 25, 2017

36degrees left a comment

Choose a reason for hiding this comment

selfthinker commented Jun 29, 2017 •

edited

Loading

hannalaakso commented Jul 3, 2017 •

edited

Loading

hannalaakso commented Jul 12, 2017 •

edited

Loading

selfthinker commented Jul 13, 2017 •

edited

Loading