Closed (fixed)
Project:
U.S. Web Design System (USWDS)
Version:
8.x-1.x-dev
Component:
Code
Priority:
Normal
Category:
Feature request
Assigned:
Unassigned
Issue tags:
Reporter:
Created:
21 Feb 2018 at 15:00 UTC
Updated:
5 Jul 2018 at 05:44 UTC
Jump to comment: Most recent, Most recent file
Comments
Comment #2
swirtThis 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
Comment #3
swirtComment #5
brockfanning commentedGreat catch, thank you swirt! I wonder if this needs to be done for D8 as well.
Comment #6
brockfanning commentedIt 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.
Comment #7
andrewmacpherson commentedre #6 -
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.
Comment #8
andrewmacpherson commentedAlso re: #6,
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.
Comment #9
brockfanning commentedNice, 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.
Comment #10
swirtSounds 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.
Comment #11
andrewmacpherson commentedWhich part of section 508 requires focus to change to the form error? I don't think WCAG requires this.
Comment #12
swirt@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
Not the requirement but examples
https://webaim.org/techniques/formvalidation/
Comment #13
andrewmacpherson commented@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:
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.
Comment #14
swirt@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.
Comment #15
andrewmacpherson commentedFair 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.