During a recent 508 review it was noted that focus of the page was not changed to the form error. Focus was just present at the top of the page due to the page reload.

A little bit of js can solve this pretty easily.

CommentFileSizeAuthor
#2 focus-jump-to-error-2946486-2.patch1.07 KBswirt

Comments

swirt created an issue. See original summary.

swirt’s picture

StatusFileSize
new1.07 KB

This should take care of it.

The tabindex="-1" is to handle assistive technology and navigation that is not influenced by JS focus.
http://w3c.github.io/html/editing.html#the-tabindex-attribute

swirt’s picture

Status: Active » Needs review

  • brockfanning committed c3ec6d3 on 7.x-1.x authored by swirt
    Issue #2946486 by swirt: Focus does not jump to form errors
    
brockfanning’s picture

Version: 7.x-1.x-dev » 8.x-1.x-dev
Status: Needs review » Patch (to be ported)

Great catch, thank you swirt! I wonder if this needs to be done for D8 as well.

brockfanning’s picture

Status: Patch (to be ported) » Fixed

It looks like in D8 there is a message at the top with links down the page to the errors. It's not quite the same as automatically focusing on the errors, but I'm thinking we might just leave it as-is for now.

andrewmacpherson’s picture

re #6 -

It looks like in D8 there is a message at the top with links down the page to the errors.

That block of error links comes from the Inline Form Errors module. It's our implementation of G139: Creating a mechanism that allows users to jump to errors (example 1). It's described as an "additional, advisory" technique for WCAG SC 3.3.1 Error Identification and SC 3.3.3 Error Suggestion. Note this module isn't yet enabled by default in the Standard input profile, but we're intending to do that in #2915899: [PP-1] Enable the Inline Form Errors module in the Standard install profile.

andrewmacpherson’s picture

Also re: #6,

It's not quite the same as automatically focusing on the errors, but I'm thinking we might just leave it as-is for now.

Indeed, focusing the error message is an alternative approach for the same WCAG success criteria. The list of error jump-links is good for forms which can have multiple errors on them (e.g. address, email, phone all required).

An approach that could work in D8 is to move focus to the message block, regardless of wheter Inline Form Errors is enabled.

Keep in mind that it's an optional module, but either way there will usually be a red error message block. The only difference is whether the block contains the entire list of error messages, or just links to the form inputs with error messages inline.

The D8 API also has a feature to disable the Inline Form Errors behaviour on a per-form basis. See Inline Form Errors can be disabled for the complete form.

brockfanning’s picture

Nice, thanks for the context Andrew. To add a bit more about this theme - the D7 version has custom code that implements the inline form errors, while the D8 version relies on the core Inline Form Errors module that Andrew mentions.

swirt’s picture

Sounds like the solution for D8 then is to target the form errors box which will link to the specific errors. That sounds like it would pass 508 review.

andrewmacpherson’s picture

Which part of section 508 requires focus to change to the form error? I don't think WCAG requires this.

swirt’s picture

@andrewmacpherson here are some relevant links.
https://www.w3.org/TR/WCAG20-TECHS/G139.html

The 2.1 standard is a bit vague
https://www.w3.org/TR/WCAG21/#error-identification

The example practice is described here
https://www.w3.org/WAI/tutorials/forms/notifications/#listing-errors

Also here
https://www.w3.org/TR/WCAG21/#dfn-status-messages

status message
change in content that is not a change of context, and that provides information to the user on the success or results of an action, on the waiting state of an application, on the progress of a process, or on the existence of errors

Not the requirement but examples
https://webaim.org/techniques/formvalidation/

andrewmacpherson’s picture

@swirt - Thanks. I meant, specifically, does something in section 508 require focus to be set, rather than WCAG? I was curious whether section 508 was putting this requirement on top of WCAG. In which case, this USWDS theme is an ideal place to address it. The Drupal core accessibility QA gate doesn't aim to address local standards like section 508, just the W3C recommendations.

I'm aware of the techniques and issues. None of those WCAG success criteria actually require focus to be changed (or even to use scripting at all). Setting focus to an error message is just one available approach.

In G139, moving focus is mentioned in example 3. The error links provided by Drupal 8's inline form errors module actually implement example 1 there. Example 3 is along the same lines as you suggest in comment #10. It would be OK to add that on top of what Drupal core already provides.

G139 example 3 also has this interesting bit:

And there is a link from the error back to the ordered list of descriptive error messages.

That's do-able too, with a hook_form_alter() to put a "back to error list" link after each input.

I've been thinking of putting together a contrib module, to present some of these focus behaviours and extra links as easy options for site-builders to enable.

swirt’s picture

@andrewmacpherson I don't think so. We were using this theme and had to go through a 508 review by the Department of Education and the reviewer raised this as an issue that we needed to remediate in order to pass. I believe they were just using the WCAG for the requirements, but I can't say for certain. As you can see here https://www.section508.gov/create/web-content 508 references all the WCAG so I am not sure that there is a distinction.

andrewmacpherson’s picture

Fair enough. Maybe the reviewer said you should do this, because it would be a straight forward thing to implement.

I might have been getting confused between the revised section 508 itself, and IBM's accessibility checklist for addressing section 508. That checklist has a section for european EN 301 549 (Europe) Additional Requirements which aren't covered by section 508. Somewhere along the way I ended up with the impression that section 508 had extra requirements on top of WCAG.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.