I love the
[response] shortcode but would it be possible to generate the response output outside of the
<form></form> tags? This would enable those of us who wish to create accessible forms to ensure that the error message is readable by screen readers (like JAWS) before it switches automatically into Forms mode.
JAWS has two basic modes: Virtual Cursor & Forms. The former is used to render standard web pages whilst the latter (obviously)renders form controls (inputs and labels). In most situations, JAWS switches into Forms mode as soon as it encounters the opening
<form> tag and only switches back to Virtual Cursor once it encounters the
</form> tag. Once in Forms mode, only text that is explicitly associated with a form control via a
<label> is rendered whilst content within the form that uses a basic
<div> tag is ignored.
Currently, if the
[response] shortcode is used at the top of a CF7 form, it generates the error message in a plain div but after the opening
<form> - so it will be missed by JAWS users. Ideally, the error response should be rendered before
<form> to avoid this issue.
Alternatively, an option to wrap the error response in
<label></label> tags that link it to (say) the first form input would help. Then you could in theory end up with something like:
<div class="wpcf7" id="wpcf7-f3043-p1019-o1"><form action="/contact/#wpcf7-f3043-p1019-o1" method="post" class="wpcf7-form" novalidate="novalidate"> <div class="wpcf7-response-output wpcf7-display-none wpcf7-validation-errors" style="display: block;" role="alert"><label for="name">Please ensure that you have completed all the required fields correctly.</label></div> <p><label for="name">Name (required)</label> [...] </form>
Is any of this feasible? If I can help in any way, I would be more than happy to do so.