Better accessibility error and success messages in Contact Form 7

All excellent points except:

Give focus the first error field

I’d argue that it is highly inadvisable to “force” focus full stop. It’s likely to run contrary to user expectations and may actually cause issues for some assistive technology users. Far better to ensure that the focus order remains logical and intuitive so that users can navigate to the relevant fields using their own preferred methods.

Thanks for your feedback esmi!

The problem is that the error message (.wpcf7-response-output.wpcf7-display-none.wpcf7-validation-errors) appears at the bottom of the form.

When this message will have a role=”alert” attribute, it will be read by screen readers, but, then, the user will need to go back, manually, with shift+tab, to the very first error field. Which can be quite tiresome on long forms!

Thus the idea of giving focus to the very first error field, after the form has been submitted and the alert has been read. This way, the user can easily correct each error field, one after one.

I think it would be better all round if the errors were generated a the top of the form. That would comply with best practice recommendations and then would remove the need to add focus for anything. I know this is possible in WordPress as there used to be a fork of https://www.ads-software.com/plugins/si-contact-form/ that did just this.

@takayuki Miyoshi: If you’d like some support with this, the WordPress Accessibility group might be able to help.

Ok, great. In this case, indeed, the tabulation order would match the error order, so it’s fine. ??

Thank you kReEsTaL and esmi for your great suggestions. Though I’m not so familiar with web accessibility, I hope I can make Contact Form 7 accessible. I’ll try including the suggested improvement in the next major upgrade.

As for moving the message/error area up to the top of the form, you can do it by using [response] tag.

Locating Response Message Box Anywhere

you can do it by using [response] tag.

Slight problem with that from an accessibility perspective. It’s rendered inside <form></form> tags – which means that screen reader software in Forms Mode will simply ignore it.

As soon as the software hits <form>, it auto-switches to a mode that only renders HTML labels that are explicitly associated with a form control. Any plain text is simply ignored until the software hits the </form> tag when it switches back to its normal virtual cursor mode.

So – as it stands, a screen reader user might have to make two passes of the failed submission page before they had all of the relevant information – once allowing the software to do it’s usual auto-switching and a second time with Forms Mode disabled.

Does that make some kind of sense?

In an ideal world, the best approach would be render something at the top of the page (or at least before the opening <form> tag that said something like:

Your form was not submitted because of errors in:

• your name
• your email address

[etc]

The user could then navigate to, and correct, the relevant fields using their preferred method of navigation.

An absolutely perfect solution would also hook into wp_title() and add something like “Contact form error” as this is likely to be the very first item on the page that is rendered by the screen reading software.

I appreciate that this is an awful lot to take in. Forms are often the hardest things to get right from an accessibility perspective. If I can help in any way, please do not hesitate to contact me. CF7 is, by far, my absolute favourite contact form plugin and I would really love to see it as an accessible solution too.

Hey…
I just do something for a website manager accessibility.
Changes in: contact-form-7/includes/js/script.js
Line: 230
This change will display the error message above each label and takes its name.
This can be useful.

// $into.hide().append('<span role="alert" class="wpcf7-not-valid-tip">' + message + '</span>').slideDown('fast');

// get the label
leNomDuTruc = $into.parent().find('label').html();
// no more '.' at the end of the message
message = message.substring(0,message .length-1);
// prepend (vs append)
$into.hide().prepend('<span role="alert" class="wpcf7-not-valid-tip">' + message + ' : '+leNomDuTruc +'</span>').slideDown('fast');