[{"data":1,"prerenderedAt":14},["ShallowReactive",2],{"post-accessible-forms-people-finish":3},{"_path":4,"title":5,"description":6,"date":7,"tags":8,"readingTime":12,"body":13},"\u002Fblog\u002Faccessible-forms-people-finish\u002F","Accessible Forms That People Actually Finish","Practical accessibility checks for labels, errors, and focus so your forms work for more users.","2026-07-07",[9,10,11],"accessibility","html","frontend",1,"# Accessible Forms That People Actually Finish\n\nForms fail quietly: a missing label, an error that never gets announced, a focus trap that locks someone out. Small HTML and ARIA choices fix most of that.\n\n## Labels are not optional\n\nEvery control needs a visible `\u003Clabel>` tied with `for`\u002F`id`, or wrap the input in the label. Placeholder text is not a label—it disappears when the user types.\n\n```html\n\u003Clabel for=\"email\">Email\u003C\u002Flabel>\n\u003Cinput id=\"email\" name=\"email\" type=\"email\" autocomplete=\"email\" required \u002F>\n```\n\n## Describe errors next to the field\n\nPut the message near the control and connect it with `aria-describedby`. Move focus to the first invalid field on submit so keyboard and screen-reader users land on the problem.\n\n```html\n\u003Cinput\n  id=\"email\"\n  type=\"email\"\n  aria-invalid=\"true\"\n  aria-describedby=\"email-error\"\n\u002F>\n\u003Cp id=\"email-error\" role=\"alert\">Enter a valid email address.\u003C\u002Fp>\n```\n\n## Keep focus visible and predictable\n\nNever remove outline styles without a clear replacement. After a successful submit or modal close, send focus somewhere sensible—often the success message or the next primary action.\n\n## Wrap-up\n\nAccessible forms are mostly plain HTML done carefully: real labels, announced errors, and focus that follows the user’s intent.",1784110285915]