Easily make any html form accessible using the Simple Accessible Forms Plugin. Forms must be carefully constructed to ensure accessibility.
- The form element must include an aria-label describing the purpose of the form.
- 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.
- Each form field must be labeled using the label tag or by using an aria-label attribute.
- 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: screen-reader-text.
- An error notice should be displayed next to fields with invalid entries when the user navigates away from the field.
- 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.
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.
Upgrade to the Pro version to add:
[PRO] unlimited forms (free version is limited to 2 forms).
[PRO] unlimited form fields (free version is limited to 4 form fields).
[PRO] automatically adds id attributes to all form elements.
[PRO] activates the form field import option to allow you to quickly import and configure the plugin to work with your website forms.
[PRO] adds option to remove “Form accessibility enhanced by Simple Accessible Forms” from forms
- Install via WordPress Dashboard or upload
- Activate the plugin through the ‘Plugins’ menu in WordPress;
How do I use Simple Accessible Forms?
- Go to the WordPress Plugins tab and choose Add Plugin.
- Search for Simple Accessible Forms, install and activate the plugin. The plugin will add a new Dashboard tab labeled Simple Accessible Form Builder.
- 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.
- Go to the Simple Accessible Form Builder tab and select Create New Form.
- Enter a name, url and id and Click Save.
- If you are using the Pro version, click Import form fields and verify or edit the imported form fields as required.
- 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.
- Once all your fields have been added, activate the form and go try it out.
There are no reviews for this plugin.
Contributors & Developers
“Simple Accessible Forms” is open source software. The following people have contributed to this plugin.Contributors
Interested in development?
- added maxlength notice to form labels when maxlength attribute is present
- updated feature to add required markings to fieldsets to ensure that it does not update fieldsets unless the text is the same as that in data-fieldname
- limited changing fieldset legends for required markings to radio button and check box inputs
- changed check for existing required markings to only check the end of the string
- trim blank space from legend text befor comparing to data-fieldname values
- added support for form submit buttons using the button element
- made changes to allow form names and urls to be changed
- added autocomplete values for state and city
- added validation for max length
- added option to hide Google ReCaptcha version 3 from screen reader users
- added auto correction of radio and checkbox groups that are missing fieldsets
- removed existing * before placing required markings
- corrected form markings being applied on forms that are not active
- added responseid field to allow post messages to be made accessible by applying an alert role attribute
- moved focus to first field in error state on submit
- set to validate only the last element in a checkbox group
- improved phone validation regular expression
- improved accuracy of field name targeting by removing wildcard search
- added support for autocomplete attributes on form fields
- added check for forms marked with the correct class before validating
- added aria-label attribute to form element
- added aria-invalid attribute when error exists
- corrected import option not returning message when pro version is not installed
- corrected array field names not accepted in form builder
- initial release