Problem/Motivation

We learned during the Twin Cities 2013 accessibility testing that invalid form fields are invisible to users navigating that page with a screen reader because the invalid fields are not marked up as invalid.

Proposed resolution

Added [aria-invalid=true] to invalid fields so that a screen reader user will be informed that the field contents are invalid.

This is the method recommended by CITA (Illinois Center for Information Technology and Web Accessibility). There example can be found here: http://html.cita.illinois.edu/nav/form/aria/index.php?example=3

Screenshot of the Chrome developer tools showing the HTML for the aria-invalid attribute

Remaining tasks

Propose a patch.

User interface changes

Screen readers users will know when a field has not passed validation.

API changes

None.

#1174938: Natively support the HTML5 required and aria-required FAPI properties

Original report by jessebeach

Comments

jessebeach’s picture

Issue summary: View changes

added 1174938

mgifford’s picture

Status: Active » Needs review
StatusFileSize
new726 bytes

I don't think this is quite right, but wouldn't it be great if it just worked!

This will probably need tests too.

Status: Needs review » Needs work

The last submitted patch, aria-invalid-2047075-1.patch, failed testing.

larowlan’s picture

Issue tags: +form API

Adding form api tag

rareBlackMagic’s picture

Status: Needs work » Needs review
Issue tags: -form API
StatusFileSize
new1.28 KB
new1.28 KB

Hello all,
Please find attached two patch files. The first is a test only and should fail, and the second file contain the fix.
Though my manual test using a screen reader and checking page source, the aria-invalid attribute is there once a testfield isn't filled.

larowlan’s picture

+++ b/core/includes/form.incundefined
@@ -4842,6 +4842,7 @@ function _form_set_attributes(&$element, $class = array()) {
+	$element['#attributes']['aria-invalid'] = TRUE;

So the fix is also in the .fail file. Ideally the .fail file should only contain the tests changes and should fail testing - demonstrating that the new tests catch the missing functionality, then the 'fix + tests' patch is the .pass file - this shows that the fix works. Hope that makes sense. But not a big deal.

+++ b/core/includes/form.incundefined
@@ -4842,6 +4842,7 @@ function _form_set_attributes(&$element, $class = array()) {
+	$element['#attributes']['aria-invalid'] = TRUE;

+++ b/core/modules/system/lib/Drupal/system/Tests/Form/FormTest.phpundefined
@@ -248,6 +248,9 @@ function testRequiredTextfieldNoTitle() {
+	$this->assertFieldByXPath('//input[contains(@aria-invalid, TRUE)]', FALSE, 'Aria invalid attribute found.');

Both lines use tabs for adding the indent, the Drupal standard is to use spaces. See http://drupal.org/coding-standards. You can update your editor to use spaces and never think of it again. You can also configure git to warn you - see http://drupal.org/node/1542048 for the recommended git config.

rareBlackMagic’s picture

Attached are the corrected patches. Including fixes to the code that didn't comply with Drupal coding standards.

Again, like before, the first file is the test only and the second file is the fix.
(Hope I sorted it properly!)

larowlan’s picture

Status: Needs review » Needs work

Close, the fail one is fine (and no need to re-upload as it will show that the tests catch what we're trying to catch).
But the pass one should be the 'complete' patch as in the patch that will be applied - so it should contain the tests (like the fail one) and the fix.
So the file size should be around the 1.2 kb (400b + 800b).
Whitespace looks good.
So if we can get a complete patch that includes the fix and the test - we're nearly done in my opinion.
Thanks again.

rareBlackMagic’s picture

For some reason when i created the pass patch (just tried it again) it seemed to exclude the test. Here's the results of the new pass patch.

diff --git a/core/includes/form.inc b/core/includes/form.inc
index a789322..2b1743a 100644
--- a/core/includes/form.inc
+++ b/core/includes/form.inc
@@ -4842,6 +4842,7 @@ function _form_set_attributes(&$element, $class = array())
   }
   if (isset($element['#parents']) && form_get_error($element) !== NULL && !empt
     $element['#attributes']['class'][] = 'error';
+    $element['#attributes']['aria-invalid'] = TRUE;
   }
 }
 
diff --git a/core/modules/system/lib/Drupal/system/Tests/Form/FormTest.php b/cor
index f402395..e136ef3 100644
--- a/core/modules/system/lib/Drupal/system/Tests/Form/FormTest.php
+++ b/core/modules/system/lib/Drupal/system/Tests/Form/FormTest.php
@@ -248,6 +248,9 @@ function testRequiredTextfieldNoTitle() {
     // Check the page for the error class on the textfield.
     $this->assertFieldByXPath('//input[contains(@class, "error")]', FALSE, 'Err
 
+    // Check the page for the aria-invalid attribute on the textfield.
+    $this->assertFieldByXPath('//input[contains(@aria-invalid, TRUE)]', FALSE, 
+
     // Submit again with required fields set and verify that there are no
     // error messages.
     $edit = array(
(END)
jessebeach’s picture

Status: Needs work » Needs review
StatusFileSize
new1.37 KB
new1.88 KB

Caecus, awesome patch. You dove down deep into a complex Drupal system and made an impressive change. Nice work!

I've rolled the two patches together and made a slight change: TRUE to 'true'. A string instead of a Boolean. I'd like to print the word true as the value of aria-invalid, since when it does not have a value, it's interpreted as having the value false (default).

jessebeach’s picture

I tested the patch(es) from #6 with a screen reader (VoiceOver). The change works just as expected. The screen reader indicates that the field is invalid. I was ready to RTBC the change except for it not being rolled into a single patch and the need to assign a value of 'true' to aria-invalid, instead of a Boolean TRUE. The updated patch in #9 does not change the behavior of Caecus' original patch.

I would still like to see us eventually inline the invalid message for each field, so the remediation help isn't disassociated from the field by being printing somewhere else on the page in a messages box. But we can increment these improvements. That change in this patch gets us a little closer.

larowlan’s picture

StatusFileSize
new1.29 KB
new857 bytes

We still need a pass/fail to show the tests do what they're supposed to, the patches above all passed, which means the tests (in the earlier patches) are a false positive. I suspect the explicit 'true' string will rectify this, but uploading in two parts to verify and demonstrate to reviewers/committers that the latest patch tests work as expected™.
If we see red/green for these two, its rtbc in my opinion.

larowlan’s picture

I asked an admin to cancel the test run on #9 as #11's pass patch is the same thing. No need to overload the bot.

larowlan’s picture

This is RTBC in my book but given I worked on the original patch with @Caecus in office hours and uploaded the last version I'll leave that to someone else.

jibran’s picture

Status: Needs review » Reviewed & tested by the community

Here we go.

wim leers’s picture

Awesome! Thanks, Caecus and larowlan!

webchick’s picture

Status: Reviewed & tested by the community » Fixed
mgifford’s picture

I don't think it's going to help with those other issues.

Glad this patch is committed & also nice that it was discovered in a #a11y sprint!

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

Anonymous’s picture

Issue summary: View changes

added an example image.