Form Button
A form button is the HTML element that triggers an action in a form: sending data, resetting fields, or executing a function. To be accessible, it must have an explicit label that describes the action triggered, not just a simple "OK" or "Submit".
A screen reader user navigates your page by button list. They hear: "Submit", "Submit", "Submit". Three different forms, the same label. Impossible to tell what each one does.
#What HTML elements are form buttons?
The RGAA glossary recognizes several elements:
<button type="submit">and<button type="reset"><input type="submit">,<input type="reset">,<input type="image">- any element with
role="button"in a form
The <button> tag is the most flexible choice: it accepts text, icons, and HTML. An <input type="submit"> gets its label from the value attribute. Without value, the browser displays "Submit" in English, which doesn't help anyone on a French site.
<!-- Clear label -->
<button type="submit">Confirm order</button>
<!-- Generic label — avoid -->
<input type="submit" value="OK">
<!-- Icon button: aria-label required -->
<button type="submit" aria-label="Search">
<svg aria-hidden="true"><!-- magnifying glass icon --></svg>
</button>#The mistakes that trap everyone
Button with no accessible label. An <input type="image"> without alt, a <button> containing only an SVG without aria-label. The screen reader announces "button" and nothing else. Deque classifies this defect as critical.
The fake button in <div>. A <div> styled as a button doesn't receive keyboard focus or the "button" role by default. You need role="button", tabindex="0", and handling for Enter and Space keys. You might as well use a real <button>.
No button at all. Some forms trigger submission on onchange of a field (a dropdown that reloads the page, for example). The W3C H32 technique forbids it: without an explicit submit button, the user loses control of when the action triggers. This violates WCAG criterion 3.2.2.
#What RGAA says
RGAA criterion 11.9 requires that each form button have a relevant label. "Relevant" means the label describes the action, not just its existence. "Confirm order" passes the test. "OK" does not.
WCAG criterion 2.5.3 (Label in Name) adds a constraint: if the button has visible text, its accessible name must contain it. A button that displays "Search" but carries aria-label="Advanced search" creates a gap between what the user sees and what assistive technology announces.
#In summary
Use a real <button> with a label that describes the triggered action. If the button has no visible text, add aria-label. And if your page contains multiple forms, each button must be distinguishable. Not three "Submit" buttons in a row.