Images · Concept

Alt text is not a tab stop.

An informative image can be available to screen-reader reading navigation without receiving keyboard focus. Focus belongs to things people can operate.

The principle

Alternative text answers “What does this image contribute?” Keyboard focus answers “What can I operate?”

Two navigation models

Reading is not the same as tabbing.

Screen readers can move through headings, text, and images using reading commands. The Tab key moves through interactive elements such as links, buttons, and form controls.

Reading navigation

Understand the content

A screen reader’s browse or virtual cursor can encounter an image and announce its alternative alongside headings, prices, and other text.

Includes meaningful non-interactive content.
Tab navigation

Reach the actions

Keyboard focus visits controls that can be activated or changed. Static images and prices should not create stops.

Includes meaningful interactive elements.

Interactive map

One card, two useful sequences.

Switch views to compare what can be read with what can be operated. Then press Tab through the live card.

    Do / Don’t

    Do not manufacture interactivity.

    If an image performs no action, adding tabindex="0" creates a keyboard stop with nothing to operate. Alt text remains available without it.

    Don’tForce a static image into tab order

    Focus lands, then nothing happens

    The image has no link, button behavior, or keyboard action. The extra stop slows navigation and implies false interactivity.

    <img src="boot.jpg"
  alt="Tan hiking boot with red laces"
  tabindex="0">
    DoLet native semantics decide

    Readable, but not operable

    The image remains in document reading order. Keyboard focus moves directly to the product title link and Add to cart button.

    <img src="boot.jpg"
  alt="Tan hiking boot with red laces">
<h3><a href="/boot">Harbor trail boot</a></h3>
<button>Add to cart</button>

    Focus rules

    Use native elements for behavior.

    Do not repair a click handler with tabindex and key listeners when HTML already has an element whose semantics and keyboard behavior match the action.

    Navigation

    Wrap the image in an <a> only when activating it navigates somewhere.

    Action

    Put the image inside a <button> only when activating it performs an action.

    No behavior

    Leave a static image unfocusable. Give it useful alt when informative or empty alt when decorative.

    Quick test

    Read once. Tab once.

    1. Browse the card with screen-reader reading commands and confirm the informative image is available.
    2. Press Tab and confirm focus skips the static image.
    3. Verify focus reaches the product title link, then the Add to cart button.
    4. Search for tabindex on images and remove it unless a documented composite widget truly requires it.
    5. Replace clickable images with native links or buttons.
    6. Confirm CSS layout has not changed the logical DOM and focus order.