Forms

Web forms make it easy to collect contact info, generate leads, accept payments, search within the website, and much more. Users usually prefer simple and short forms. Only ask users to enter what is required to complete the transaction or process;

To create an accessible online form, you must ensure that all form fields have accurate labels or prompts so screen reader users know what each field is asking for. Forms typically have labels or prompts that are obvious to sighted users, but their association with particular form fields is made based on visual cues, such as relative position and proximity to the field. Since screen reader users don’t have access to these same visual cues, labels and prompts must be explicitly associated with form fields within the HTML.

Many themes include a contact form in their files, however, we have not found one that was Accessible, even after adding an Accessibility plug-in. To make your form Accessible, you can either edit the specific lines of  code related to your form in your php file or you can use a form generator plugin.

The two Plugin-s that we have tested that work with most themes are:

Contact Form 7 with the Accessibility plugin produces good, clean accessible forms.
To make this plugin accessible you need to install Contact Form 7: Accessible Defaults. It will not retrofit any forms that were created before installing the plugin so after installing the Accessibility Defaults you will need to rebuild your forms.

Gravity Forms is a paid plugin. By itself it does not create accessible forms. To make Gravity Forms accessible you need another plugin called WCAG 2.0 form fields for Gravity Forms.

EXAMPLE OF ACCESSIBLE FORM


    Sample of Code used

    <p><label for=”your-name”>Your Name (required)</label><br />
    [text* your-name id:your-name] </p>

    <p><label for=”your-email”>Your Email (required)</label><br />
    [email* your-email id:your-email] </p>

    <p><label for=”your-subject”>Your Subject</label><br />
    [text your-subject id:your-subject] </p>

    <p><label for=”your-message”>Your Message</label><br />
    [textarea your-message id:your-message] </p>

    Helpful Resources:

    PLUGINS:

    TUTORIALS
    Guidance on how to create websites that meet WCAG

    ACTIVE TESTING SITE:
    This site is designed for offering tips and tools that can be helpful to the WordPress designer at any level of experience. we also use this site to test Themes, Plugins and custom CSS. During times of testing and evaluation, this site may fall out of Accessibility. We do this so we can provide real-time user feedback on the tools, and tips we recommend.

    Privacy Policy