Accessibility improvements to the plugin

I am a web accessibility consultant, and I’m using your contact forms on my site. I really like the plugin, but I would like to help you make it more accessible. I have hacked it a little bit with CSS to improve accessibility, but there are a few simple things that need to be done to the plugin itself. You can see one of my forms in the link above.

What I did: hid the duplicate response/error message with css. There is no need for two of them, and the response should be at the top of the form, not the bottom where it can be missed.

A few simple things that would be a major improvement:

• If there are no errors or messages, there should not be empty list items, as it is invalid HTML
• When the form is submitted, set focus on the response at the top of the form so the keyboard user can reach the errors and tab to the fields below
• Include the form label text in the error rather than making them generic. Example: “The first name field is required”
• Place both the error message and specific errors in the live region, not just the message. Example:

<div class="screen-reader-response" role="status" aria-live="polite" aria-atomic="true" tabindex="-1">
<p>One or more fields have an error. Please check and try again.</p> 
<ul>
<li id="wpcf7-f4888-p4254-o1-ve-your-name"><a href="#your-name">The your name field is required.</a></li>
<li id="wpcf7-f4888-p4254-o1-ve-your-email"><a href="#your-email">The your email field is required.</a></li>
</ul>
</div>

• When the form has been submitted successfully, clear the form fields from the page to prevent duplicate submissions by bots and prevent confusion. The only thing that should be present is the confirmation message.

Thanks!

The page I need help with: [log in to see the link]