Minute44 - Dan Schonhaar

When coding a new website I was annoyed to find that my front page call to action was not WAI-AA Compliant. It seems the author of this great Wordpress Plugin missed a few of the basics.

Using the $name database string we will make the Contact Form 7 Plugin WCAG WAI-AA Compliant.

Since each input requires a label, and then a matching name we will use the this method. Please note you will need to provide a unique name/label when making the form in the first place ie, no double use of Name/Email fields(use confirm-email etc).

<label for="' . $name . '"></label>

id="' . $name . '"

alt="' . $name . '"

Note: Obviously the alt isn’t valid for every element.

Although I have tried my best to ensure all labels are correctly entered, I have included the only lines of code used to make this plugin accessible.

An example:-

Original Code:
$html = '<input type="text" name="' . $name . '" value="' . attribute_escape($value) . '"' . $atts . ' />';

New Code:
$html = '<label for="' . $name . '"><input type="text" id="' . $name . '" alt="' . $name . '" name="' . $name . '" value="' . attribute_escape($value) . '"' . $atts . ' /></label>';

I have included the wp-contact-form-7.php file required for you to upload to your /plugins/contact-form-7/ folder.

http://www.minutedesigns.com/wordpress-plugins/wp-contact-form-7.zip

Original Links

Download Link: http://wordpress.org/extend/plugins/contact-form-7/

Author’s Plugin Homepage: http://ideasilo.wordpress.com/2007/04/30/contact-form-7/

This modified version can be seen working at: http://www.it4b.co.uk

Post by Adam King – minutedesigns.com