Forms Rule

Input buttons must have discernible text input-button-name

An input element with type="submit", type="button" or type="reset" draws a button whose text comes from its value attribute. Leave the value out, or set it to empty, and the button has no name. Sighted people see a blank or a browser default like Submit; screen reader users hear button and nothing else.

WCAG 2.2 A 4.1.2 Name, Role, Value

Websight reports this as Input buttons must have discernible text

Who it affects

A parent using a screen reader on a school portal to confirm a trip consent form tabs to the end of the form and hears button. Is it Confirm, Cancel or Delete? Pressing the wrong one withdraws consent.

Someone using voice control cannot say click confirm, because there is no name to match, and has to fall back on a numbered grid overlay.

Someone whose browser shows a default label sees a button that says Submit Query, which does not match the page's wording and looks like an error.

Broken versus fixed

Both examples are live and rendered in a sandboxed frame. The broken one is deliberately broken.

Broken

Two buttons, both announced as button. The blue one submits consent and the white one cancels, but nothing says so.

Fixed

Announced: Give consent, button. Then Cancel, button.

Show the markup behind both examples
Broken
<style>body{font-family:system-ui;padding:16px;margin:0}input[type=submit],input[type=button]{padding:8px 14px;font-size:15px;border-radius:6px;border:1px solid #1e5aa8;background:#1e5aa8;color:#fff;min-width:44px;height:38px}.row{display:flex;gap:8px}</style>
<p style="margin:0 0 10px">Year 5 trip to Chester Zoo: give consent for Amara.</p>
<div class="row">
  <input type="submit" value="">
  <input type="button" value="" style="background:#fff;color:#1e5aa8">
</div>
Fixed
<style>body{font-family:system-ui;padding:16px;margin:0}input[type=submit],input[type=button]{padding:8px 14px;font-size:15px;border-radius:6px;border:1px solid #1e5aa8;background:#1e5aa8;color:#fff;min-width:44px;height:38px}.row{display:flex;gap:8px}</style>
<p style="margin:0 0 10px">Year 5 trip to Chester Zoo: give consent for Amara.</p>
<div class="row">
  <input type="submit" value="Give consent">
  <input type="button" value="Cancel" style="background:#fff;color:#1e5aa8">
</div>

Test it by hand in two minutes

  1. Look at every button on the form. If any is blank, or shows a browser default like Submit or Submit Query that does not match your copy, inspect it.
  2. Right click the button and choose Inspect. If it is an input, check it has a value attribute with the words you want spoken.
  3. Turn on VoiceOver (Cmd+F5) or NVDA and Tab to each button. You should hear the action followed by button, not button alone.
  4. Read the button names in order without looking at the screen. If you could not tell which one submits and which one cancels, rename them.

The fix

Before
<input type="submit" value="">
After
<input type="submit" value="Give consent">

The value is both the visible text and the spoken name. Say what pressing it does. If you have styled the button with a background image and want no visible text, use aria-label instead of an empty value.

Switch to a button element

Before
<input type="button" onclick="closeDialog()">
After
<button type="button" onclick="closeDialog()">Close</button>

A button element can hold text, icons and markup, and its text is its name automatically. Prefer it for anything that is not a plain form submit.

Icon-only input button

Before
<input type="submit" value="" class="icon-search">
After
<input type="submit" value="" class="icon-search" aria-label="Search">

aria-label names the button without adding visible text. Make sure the icon is clear enough that sighted people know what it does too.

Reset button

Before
<input type="reset">
After
<input type="reset" value="Clear the form">

Browsers give reset buttons a default name, but it varies. Set the value so the wording is yours and consistent.

Common mistakes

  • Using value="" to hide the text and relying on a background image to show what the button does.
  • Putting the name in a title attribute, which is not a reliable name.
  • Using placeholder on a button, which has no effect.
  • Naming a button Submit or OK when it actually sends consent, deletes something or pays.
  • Relying on the browser's default label, which changes between browsers and languages.

WCAG criteria this rule maps to

axe-core tags this rule as WCAG 2.2 level A. It is one of the checks for:

The scanner can see an input button with no value, aria-label, aria-labelledby or title. It cannot judge whether the name is accurate or distinct from other buttons on the page. Automated tools find only part of the accessibility problems on a page; a pass on this rule is not a pass on the criterion.

A Image buttons must have alternative text input-image-alt An input with type="image" is a submit button that looks like a picture, often a magnifying glass or an arrow. A Form fields must have labels label Every input and textarea needs a label that is programmatically tied to it, not just sitting nearby. A ARIA buttons, links and menu items need a name aria-command-name When you give an element role="button", role="link" or role="menuitem", you are promising assistive technology that it is a control.

Scan your own page for this and 63 other checks

Open any page in Chrome, click Websight, and get a score out of 100 with every issue explained and a draft fix snippet per element.

Add Websight to Chrome

Free scans, no account, nothing leaves your computer. Automated tools find only part of the problems; the extension says so on every report.