squirrelscan
GitHub

input type=image without alt: an unnamed submit button

An image input is a submit button drawn as a picture, and with no alt it announces nothing. squirrel checks every one on the page.

What an image input is

<input type="image"> is a submit button that uses a graphic instead of a label. It submits the form and sends the click coordinates with it, which is why it still turns up in old search forms and image maps.

Because it is a button, its alt is its accessible name, not a description of the picture. A magnifying glass icon on a search form is named “Search”, not “magnifying glass”.

What squirrel checks

One check, input-image-alt, at severity error and weight 8. It finds every input[type="image"].

  • Fail when the element has no non-empty alt, no non-empty aria-label and no aria-labelledby. Report message: N image input(s) without alt text. Every offender is listed, identified by its name, then by the filename taken from its src, then as input[type=image].
  • Pass with N image input(s) have alt text.
  • Info with No image inputs found.
  • input-image-alt-unconfirmed warns with N image input(s) without alt text may be hidden by a style (unconfirmed) for an image input a style may hide in a way squirrel cannot settle.

Hidden image inputs

An image input out of the accessibility tree has nothing to announce, so it is not reported: one with the hidden attribute (except hidden="until-found"), aria-hidden="true" on itself or an ancestor, display: none on itself or an ancestor (set inline or by a <style> rule squirrel can decide), or inside a closed <dialog> or an unopened popover. It still needs a name before it is shown. When every unnamed one is skipped this way, the pass reads All image inputs in the accessibility tree have alt text, with hiddenWithoutName in its details.

squirrel reads the markup, inline styles and the page’s <style> blocks, the same way as form-labels; see form-labels for what it can and cannot decide. External stylesheets are not read. An image input that carries a no-js class, itself or on an ancestor other than <html>, is reported as unconfirmed on a page with an external stylesheet or an @import, because a theme usually hides that fallback with a rule such as .js .no-js { display: none } once JavaScript runs.

How to fix it

<input type="image" src="/icons/search.svg" alt="Search">

Name the action. Everything that applies to a normal submit button applies here, so if the equivalent <button> would read “Search”, that is the alt.

An image input is not a decorative image, so alt="" does not apply: it leaves a button that submits the form with no name of its own. squirrel reports it unless the element also carries an aria-label or aria-labelledby, either of which names it instead.

If the coordinates are not needed, <button type="submit"> with an <img> or an inline <svg> inside it is easier to name and easier to style.

Rule IDa11y/input-image-alt
CategoryAccessibility
ScopePer-page
Severityerror
Weight8/10

Enable / disable

Disable this rule

[rules]
disable = ["a11y/input-image-alt"]

Disable all Accessibility rules

[rules]
disable = ["a11y/*"]

Enable only this rule

[rules]
enable = ["a11y/input-image-alt"]

enable replaces the default ["*"], so this is the only rule selected. Leave disable out: a rule that matches any disable pattern is skipped even when enable names it. Only an enabled setting under a rule’s own [rule_options] table overrides both lists.

Accessibility findings ship in every audit next to the SEO, performance and agent experience rules. See Website security scan with AI for how an agent works through a report.

References

Check your site

Run squirrel audit https://example.com and open the Accessibility section of the report. Every unnamed image input is listed, with no cap on the count. Signed-out local audits need no account and cost nothing. Signed-in audits spend credits.

Type to search…

↑↓ navigate↵ openesc close