Simple Accessible Forms

  • Tags: Free Plugins, Our Plugins
Forms must be carefully constructed to ensure accessibility.
  1. The form element must include an aria-label describing the purpose of the form.
  2. In the event of error or during a multiple step entry process, information previously entered must be auto populated or available for the user to select.
  3. Each form field must be labeled using the label tag <label> or by using an aria-label attribute.
  4. Required fields should be annotated within the field label. This may be done using an asterisk for sited users but the word “required” should be used for screen reader users. Screen reader text may be hidden off screen using CSS. WordPress has a built in class for this purpose: (<span class=”screen-reader-text”>required</span>).
  5. An error notice should be displayed next to fields with invalid entries when the user navigates away from the field.
  6. If a field has a maxlength attribute the user must be notified when the limit has been reached.
  7. If the form submission results in an error the values previously entered must be repopulated, an error displayed to clearly identify the issue and focus should be taken to the first field resulting in error.
  8. If  a captcha is present, ideally it should be Google Recaptcha 3 and hidden from screen reader users.

As you can see, creating a fully accessible form can be difficult and time consuming. Which is why we have built the Simple Accessible Forms plugin. The Simple Accessible Forms Plugin allows you to define form field validation information which will be used to add the necessary features to make the form accessible. It will add form field labels, required field markings, add form field validation and display screen reader friendly error message when a user navigates away from a field, moves focus to the first field in error in the event of a form submission failure.

The Simple Accessible Forms Basic plugin is free and available on WordPress.org.

Download

FAQs

  1. Go to the WordPress Plugins tab and choose “Add Plugin”.
  2. Search for “Simple Accessible Forms”, install and activate the plugin. The plugin will add a new Dashboard tab labeled “Simple Accessible Form Builder”.
  3. Simple Accessible Forms is not a form builder in the traditional sense. Instead it allows you to define your form fields and select the correct validation information. Simple Accessible Forms will work with almost any HTML form. Before you get started you will need to gather some details about your form. Including:
    1. Website address/url where your form is located
    2. The form element id (If your form element doesn’t have an id you can purchase the Pro version which will generate one for you)
    3. The id of the element that encloses any error or success messages once the form is submitted
    4. If you are not using the Pro version you will need a list of form field labels, name attributes and field types. 
  4. Go to the “Simple Accessible Form Builder” tab and select “Create New Form”. 
  5. Enter a form name, url, id, optional response id and Click “Save”.
  6. If you are using the Pro version, click “Import form fields” and verify or edit the imported form fields as required.
  7. If you are using the free version choose “Add a form field”, enter the required information to define your form fields and choose “Save” after each form field has been added.
  8. Once all your fields have been added, activate the form and go try it out.

It will add the necessary client side features to make any form accessible:

  1. corrects missing form field labels
  2. adds required field markings
  3. hides Google Recaptcha 3 from screen reader users
  4. adds form field validation and displays screen reader friendly error messages when a user navigates away from a field that does not validate
  5. notifies users when a field exceeds the maxlength 
  6. moves focus to the first field in error in the event of a form submission failures
  7. corrects radio and checkbox groups that are missing fieldsets
  8. corrects error or success messages that are not marked with an alert role
  • Linux/Unix, Apache webserver with MYSQL and PHP 5.6 or PHP 7 >
  • Multibyte String and Fileinfo Extensions must be enabled in PHP
  • Tested on WordPress 6.1 >

For best results, radio button groups should be wrapped in a fieldset with a legend to describe the purpose of the group. Each radio button should have a unique label element and the label element should NOT enclose the radio input, instead it should be placed immediately after the input and should include a for attribute set to the id of the radio input.

Simple Accessible Forms PRO

The Simple Accessible Forms Pro extension adds the following additional features:

  1. unlocks unlimited forms.
  2. unlocks unlimited form fields.
  3. automatically adds id attributes to all form elements.
  4. activates the form field import option to allow you to quickly import and configure the plugin to work with your website forms.
  5. adds option to remove “Form accessibility enhanced by Simple Accessible Forms” from forms
  6. enhances integration with WP ADA Compliance Check

Buy Now & Save

1 Site License

1 Year of Support & Updates

Limited Time Special

$35.99