Input buttons have discernible text

Input buttons have labels so screen readers can describe their action.

Rescan
Share

Impact

About

Adding discernable and accessible text to input buttons may help screen reader users understand the purpose of the input button.

Risks

Screen reader users cannot identify or interact with elements.

Why it's important

Gives screen reader users meaningful descriptions of interactive elements so they can understand and use them.

User stories

As a screen reader user, I want all interactive elements to have clear, descriptive names so that I know what they do.

Code

Failing pattern:

<!-- Fail: empty value gives no accessible name -->
<input type="submit" value="">

Passing pattern:

<!-- Pass: descriptive value -->
<input type="submit" value="Submit application">

Error

ScanGov messaging when a site fails a standard:

Failed: Input buttons have discernible text

Guidance

Web Content Accessibility Guidelines (WCAG)

Indicators

Accessibility

[accesskey] values are unique
[aria-*] attributes match their roles
Uses ARIA roles only on compatible elements
button, link, and menuitem elements have accessible names
ARIA attributes are used as specified for the element's role
Deprecated ARIA roles were not used
Elements with role="dialog" or role="alertdialog" have accessible names
[aria-hidden="true"] is not present on the document <body>
[aria-hidden="true"] elements do not contain focusable descendents
ARIA input fields have accessible names
ARIA meter elements have accessible names
ARIA progressbar elements have accessible names
Elements use only permitted ARIA attributes
[role]s have all required [aria-*] attributes
Elements with an ARIA [role] that require children to contain a specific [role] have all required children
[role]s are contained by their required parent element
[role] values are valid
Elements with the role=text attribute do not have focusable descendents
ARIA toggle fields have accessible names
ARIA tooltip elements have accessible names
ARIA treeitem elements have accessible names
[aria-*] attributes have valid values
[aria-*] attributes are valid and not misspelled
Buttons have an accessible name
The page contains a heading, skip link, or landmark region
Background and foreground colors have a sufficient contrast ratio
<dl>'s contain only properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements
Definition list items are wrapped in <dl> elements
Document has a <title> element
ARIA IDs are unique
No form fields have multiple labels
<frame> or <iframe> elements have a title
Heading elements appear in a sequentially-descending order
<html> element has a [lang] attribute
<html> element has a valid value for its [lang] attribute
<html> element has an [xml:lang] attribute with the same base language as the [lang] attribute
Image elements have [alt] attributes
Image elements do not have [alt] attributes that are redundant text
<input type="image"> elements have [alt] text
Form elements have associated labels
Links are distinguishable without relying on color
Links have a discernible name
Lists contain only <li> elements and script supporting elements (<script> and <template>)
List items (<li>) are contained within <ul>, <ol> or <menu> parent elements
The document does not use <meta http-equiv="refresh">
[user-scalable="no"] is not used in the <meta name="viewport"> element and the [maximum-scale] attribute is not less than 5
<object> elements have alternate text
Select elements have associated label elements
Skip links are focusable
No element has a [tabindex] value greater than 0
Tables have different content in the summary attribute and <caption>
Touch targets have sufficient size and spacing
Cells in a <table> element that use the [headers] attribute refer to table cells within the same table
<th> elements and elements with [role="columnheader"/"rowheader"] have data cells they describe
[lang] attributes have a valid value
<video> elements contain a <track> element with [kind="captions"]
All heading elements contain content
Identical links have the same purpose
Document has a main landmark
Elements with visible text labels have matching accessible names
Tables use <caption> instead of cells with the [colspan] attribute to indicate a caption
<td> elements in a large <table> have one or more table headers
Image aspect ratio
Valid doctype
Character encoding
Accessibility grades on Project ScanGov
ScanGov Accessibility