# Create accessible forms

DevFeed: [Create accessible forms](<https://devfeed.tech/articles/create-accessible-forms-9396.md>)

Original publisher: [Read original article](<https://a11yproject.com/posts/how-to-write-accessible-forms/>)

Author: Hamsa Harcourt

Published: 2020-09-16T00:00:00Z

Content type: tutorial

Language: en

Sources: [The A11Y Project](<https://devfeed.tech/sources/the-a11y-project.md>)

Topics: [Forms](<https://devfeed.tech/topics/forms.md>), [Web](<https://devfeed.tech/topics/web.md>), [data](<https://devfeed.tech/topics/data.md>)

Tags: [accessible-forms](<https://devfeed.tech/tags/accessible-forms.md>), [data](<https://devfeed.tech/tags/data.md>), [forms](<https://devfeed.tech/tags/forms.md>), [how-to](<https://devfeed.tech/tags/how-to.md>), [web](<https://devfeed.tech/tags/web.md>)

## AI overview

A practical guide to writing accessible web forms. It recommends labeling inputs with matching for and id attributes, highlighting inputs on focus, dividing long forms into logical sections with progress information, and communicating errors with more than color alone.

## Source excerpt

With the world becoming data reliant, it's no surprise how data is the new gold. With the right data, you can improve peoples' lives, find solutions to problems and so on. There are many ways to capture peoples' data but on the web, forms are your go-to solution. Here are some practical tips on how to write accessible forms. Always label your form inputs Labels are a great way to get started with writing accessible forms. They are vital for helping people who use screen readers and other kinds of assistive technology determine what label text go with what input field. To associate a <label> with an <input>, set the identifier(ID) in the <input> to correspond with the for attribute of the <label>. This is the generally accepted approach. <form> <label for="firstName">First Name</label> <input type="text" id="firstName" name="firstName"/> </form> Note: Do not to nest <input> inside of <label> because some assistive technology (such as Dragon NaturallySpeaking) do not support it. Highlight input element on focus Form insertion carets can be difficult to track. A simple solution is to highlight <input> on focus. This way, people do not have to guess where they are on the form. input:focus { outline: 2px solid royalblue; box-shadow: 1px 1px 8px 1px royalblue; } Break long forms into smaller sections Filling long forms can be stressful. This is largely true for almost everyone but particularity for people with AD/HD. Such forms can lead to an increase in Bounce rate which isn't what anyone wants. A simple solution is to break them into smaller sections. This helps make long forms less daunting and easier to understand as it is provided in bits. The following principles apply for multi-step forms: Repeat overall instruction on every page. The forms should be split into logical groups. The forms should inform the person about the progress thay are making. Note: There are no hard rules that defines a long form. However, you should consider if the form can be broken down into