# accessible forms

Published articles for accessible forms.

This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles.

## The anatomy of accessible forms: Required form fields

DevFeed: [The anatomy of accessible forms: Required form fields](<https://devfeed.tech/articles/the-anatomy-of-accessible-forms-required-form-fields-9427.md>)

Original publisher: [Read original article](<https://www.deque.com/blog/anatomy-of-accessible-forms-required-form-fields/>)

Author: Aparna Pasi

Published: 2026-08-06T15:47:31Z

Content type: article

Language: en

Sources: [Deque](<https://devfeed.tech/sources/deque.md>)

Topics: [Accessibility](<https://devfeed.tech/topics/accessibility.md>), [Forms](<https://devfeed.tech/topics/forms.md>), [Web Content Accessibility Guidelines](<https://devfeed.tech/topics/web-content-accessibility-guidelines.md>), [Usability](<https://devfeed.tech/topics/usability.md>), [Web](<https://devfeed.tech/topics/web.md>), [User interface design](<https://devfeed.tech/topics/ui-design.md>)

Tags: [a11y-for-developers](<https://devfeed.tech/tags/a11y-for-developers.md>), [accessibility](<https://devfeed.tech/tags/accessibility.md>), [accessibility-best-practices](<https://devfeed.tech/tags/accessibility-best-practices.md>), [accessible-forms](<https://devfeed.tech/tags/accessible-forms.md>), [accessible-required-form-field](<https://devfeed.tech/tags/accessible-required-form-field.md>), [eaa](<https://devfeed.tech/tags/eaa.md>), [errors](<https://devfeed.tech/tags/errors.md>), [european-accessibility-act](<https://devfeed.tech/tags/european-accessibility-act.md>), [standards](<https://devfeed.tech/tags/standards.md>), [usability](<https://devfeed.tech/tags/usability.md>), [web](<https://devfeed.tech/tags/web.md>), [web-content-accessibility-guidelines](<https://devfeed.tech/tags/web-content-accessibility-guidelines.md>)

### AI overview

This article explains why accessible forms matter for inclusive digital experiences, usability, and compliance with the European Accessibility Act, the Americans with Disabilities Act, and WCAG. It uses a rental-car booking example to show how unclear required-field indicators and vague error messages can make forms difficult to complete, then introduces methods for indicating required fields, including placing the word "required" in the visible label.

### Source excerpt

Creating accessible forms ensures your forms are accessible to all users while meeting standards like ADA, WCAG, and EAA compliance. The post The anatomy of accessible forms: Required form fields appeared first on Deque.

## 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