The most important first step for an accessible web form is the content around the form itself. Make sure your instructions are brief, clear, and set the visitor’s expectations properly. Explain what filling out the form is going to accomplish for them. In the example of a contact form, explain up front how soon a response should be expected. If you are setting your form up to have multiple pages, it is very important to tell the visitor how long the form really is.<\/p>\n
Our forms automatically identify when you have set a field to be required, but it is good to indicate at the start of the form how required fields are indicated:<\/p>\n
*<\/span> indicates required fields<\/p>\n For every form field, a “Field Label” and “Description” can be set. While the description is optional, the field label is required for good web accessibility. While it may be clear to you what a form field is for, a visitor using a screen reader relies on form field labels. The optional description can give additional guidance, when necessary.<\/p>\n Labels for checkbox and radio button sets: There may be times when a checkbox (or radio button) may seem self-explanatory, for example:<\/p>\n \u2611 please add me to your mailing list<\/p>\n The above example still needs a proper label for web accessibility, such as this improvement: \u2611 please add me to your mailing list<\/p>\n Sometimes it can be useful to give visitors a hint about information you are requesting. If you want to show an example of what you want, placeholder text can appear inside the form field. Placeholder text will go away when the visitor starts typing in the field, and is not included in a form submission. This option is available in the “Appearance” tab of the form field options.<\/p>\n In most cases, a clear form label and description are sufficient for a form field.<\/p>\n Our form system uses text buttons by default. While there is an option to make the button an image, this should be avoided for proper web accessibility. By default, the submit button says “Submit” but you can customize this text for the purpose of the form. For example, if the form is to subscribe to a newsletter, the button should say “Subscribe.” This may be set in “Form options.”<\/p>\n","protected":false},"excerpt":{"rendered":" Explain the form The most important first step for an accessible web form is the content around the form itself. Make sure your instructions are brief, clear, and set the visitor’s expectations properly. Explain what filling out the form is going to accomplish for them. In the example of a contact form, explain up front […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"30","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":"","spc_primary_category":0},"categories":[30,6,22],"tags":[],"class_list":["post-1185","post","type-post","status-publish","format-standard","hentry","category-accessibility","category-advice","category-forms"],"taxonomy_info":{"category":[{"value":30,"label":"Accessibility"},{"value":6,"label":"Advice"},{"value":22,"label":"Forms"}]},"featured_image_src_large":false,"author_info":{"display_name":"kirby","author_link":"https:\/\/umaine.edu\/userguide\/author\/kirby\/"},"comment_info":"","category_info":[{"term_id":30,"name":"Accessibility","slug":"accessibility","term_group":0,"term_taxonomy_id":30,"taxonomy":"category","description":"","parent":0,"count":60,"filter":"raw","cat_ID":30,"category_count":60,"category_description":"","cat_name":"Accessibility","category_nicename":"accessibility","category_parent":0},{"term_id":6,"name":"Advice","slug":"advice","term_group":0,"term_taxonomy_id":6,"taxonomy":"category","description":"","parent":0,"count":69,"filter":"raw","cat_ID":6,"category_count":69,"category_description":"","cat_name":"Advice","category_nicename":"advice","category_parent":0},{"term_id":22,"name":"Forms","slug":"forms","term_group":0,"term_taxonomy_id":22,"taxonomy":"category","description":"","parent":0,"count":5,"filter":"raw","cat_ID":22,"category_count":5,"category_description":"","cat_name":"Forms","category_nicename":"forms","category_parent":0}],"tag_info":false,"_links":{"self":[{"href":"https:\/\/umaine.edu\/userguide\/wp-json\/wp\/v2\/posts\/1185","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/umaine.edu\/userguide\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/umaine.edu\/userguide\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/umaine.edu\/userguide\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/umaine.edu\/userguide\/wp-json\/wp\/v2\/comments?post=1185"}],"version-history":[{"count":1,"href":"https:\/\/umaine.edu\/userguide\/wp-json\/wp\/v2\/posts\/1185\/revisions"}],"predecessor-version":[{"id":1186,"href":"https:\/\/umaine.edu\/userguide\/wp-json\/wp\/v2\/posts\/1185\/revisions\/1186"}],"wp:attachment":[{"href":"https:\/\/umaine.edu\/userguide\/wp-json\/wp\/v2\/media?parent=1185"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/umaine.edu\/userguide\/wp-json\/wp\/v2\/categories?post=1185"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/umaine.edu\/userguide\/wp-json\/wp\/v2\/tags?post=1185"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Use clear labels<\/h3>\n
\nJoin our mailing list<\/p>\nPlaceholder text can be helpful<\/h3>\n
Use text buttons<\/h3>\n