Better accessibility error and success messages in Contact Form 7
So far, so good: this plugin is really useful.
I noticed you’re using aria-required=”true” on required fields, which is great!
However, the error and success messages aren’t accessible at all. Would it possible to implement the following features please?
- Adding a role=”alert” attribute on .wpcf7-response-output (wheter it’s a success or an error message, to alert users using a screen reader that this message needs their attention, since the page wasn’t reloaded);
- Give focus the first error field so that it is easy to correct it and then using tabulation, to correct the following error fields;
- Adding a aria-labelledby=”xx” attribute on all the .wpcf7-not-valid-tip elements, where “xx” is the ID of the label linked to the error field (so that, when an error input is focused, the screen reader would read the label and then the .wpcf7-not-valid-tip associated with it by an aria-labelledby attribute);
- Do not make the error messages disappear on hover, it’s disturbing for everyone. (Moreover, display:none’d elements aren’t accessible at all.)
I really hope it will be possible to enhance the Contact Form 7 plugin with these important features.
Many thanks in advance! ^.^
- The topic ‘Better accessibility error and success messages in Contact Form 7’ is closed to new replies.