These docs are for CORA 0.10, an older release. Read this page in the newest docs.
Image buttons need alternative text
- Rule:
axe/input-image-alt - Checks: Image buttons must have alternative text
- WCAG: 1.1.1, 4.1.2
- Fix class:
content: A fix needs authored text.
Who it affects
Section titled “Who it affects”- People who use a screen reader or a braille display, most of them blind.
- People who control the page by speaking.
How to fix it
Section titled “How to fix it”An <input type="image"> has no alt, or an empty one
Section titled “An <input type="image"> has no alt, or an empty one”Add an alt that names the button’s action, not the picture. An image button is a control, so it can never take alt="".
<input type="image" src="search.png" alt="Search">The image shows words
Section titled “The image shows words”Use the words in the image as the alt, so the name matches what people see. Better, replace it with a <button> that holds real text styled with CSS.
<button type="submit" class="subscribe">Subscribe</button>Fixes that fail
Section titled “Fixes that fail”Describing the image, such as alt="Magnifying glass" or alt="Green arrow"
Section titled “Describing the image, such as alt="Magnifying glass" or alt="Green arrow"”People hear what the button looks like, not what it does. Name the action: “Search”, “Next”.
Adding aria-hidden="true" to the image button
Section titled “Adding aria-hidden="true" to the image button”It takes the button out of the rule, but the button stays focusable, so keyboard and screen reader users still reach a control nothing announces. axe then reports it under aria-hidden-focus.
More on the rule
Section titled “More on the rule”axe-core’s documentation of the rule
CORA’s fix guidance adapts content from accessibility-agents, under the MIT License: see its notice.