WordPress.org

Ready to get started?Download WordPress

Forums

Contact Form 7
Better accessibility error and success messages in Contact Form 7 (8 posts)

  1. kReEsTaL
    Member
    Posted 9 months ago #

    Hi!

    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! ^.^

    http://wordpress.org/plugins/contact-form-7/

  2. esmi
    Forum Moderator
    Posted 9 months ago #

    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.

  3. kReEsTaL
    Member
    Posted 9 months ago #

    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.

  4. esmi
    Forum Moderator
    Posted 9 months ago #

    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 http://wordpress.org/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.

  5. kReEsTaL
    Member
    Posted 9 months ago #

    Ok, great. In this case, indeed, the tabulation order would match the error order, so it's fine. :)

  6. Takayuki Miyoshi
    Member
    Plugin Author

    Posted 9 months ago #

    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

  7. esmi
    Forum Moderator
    Posted 9 months ago #

    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.

  8. yuccav2
    Member
    Posted 4 months ago #

    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');

Reply

You must log in to post.

About this Plugin

About this Topic