Alt text not showing on hover: why, and what to use instead

Why alt text does not appear on hover

The alt attribute provides a text alternative for an image. It has three audiences, and none of them is a sighted visitor looking at a loaded image:

• Screen reader users, who hear the alt text when they reach the image.
• Anyone whose image fails to load, because of a broken address, a slow connection or images being turned off. The browser shows the alt text in the space where the image should be.
• Search engines, which read it alongside the surrounding text to understand what the image shows.

When the image loads normally, the alt text has done its job silently. No current browser, whether Chrome, Edge, Firefox or Safari, shows it on hover, and that is the correct behaviour defined by HTML. Nothing on your site is broken.

The memory of alt tooltips comes from old versions of Internet Explorer, which displayed alt text as a tooltip when an image had no title. Many people learned web editing at that time, and the habit of checking alt text by hovering has outlived the browser. Later versions of Internet Explorer dropped the behaviour in standards mode, and no modern browser copied it.

Where hover text really comes from

The small box that appears when you rest the mouse on an image, a link or a word is the browser's tooltip for the title attribute. Any element can have one:

<img src="/images/bathroom.webp" alt="Finished bathroom with walk-in shower"
     title="Bathroom refit, March 2026" width="1200" height="800">

If an image on your site shows a tooltip, it has a title. That is often added by a theme, a gallery plugin or an old editor, sometimes as a copy of the alt text, and sometimes as the file name. The table shows how the two attributes differ.

Why title is a poor home for information

A tooltip only appears for people using a mouse who happen to pause over the image. Phone and tablet users never see it, which on most small business sites is more than half of visitors. Keyboard users do not see it either, and people using screen magnifiers often find it appears off screen or disappears as they move. Screen readers treat it differently from one another: some read it after the alt, some only when alt is missing, and some ignore it by default. So anything important that lives only in a title is missed by many visitors.

How to check your alt text is really there

Since hovering will not show alt text, use one of these methods instead.

Inspect the image

Right-click the image and choose Inspect. DevTools opens with the <img> element selected, and you can read the alt value in the HTML. This shows what the browser received, which matters because some plugins and image components change the markup after you save it in the editor.

List every image at once

Paste this into the console to print a table of every image, its alt and any title:

console.table([...document.images].map(i => ({
  file: i.currentSrc.split('/').pop(),
  alt: i.hasAttribute('alt') ? i.alt : '(missing)',
  title: i.title || ''
})));

Images where the alt and title are identical are candidates for removing the title, as explained below.

Other quick checks

• Firefox Page Info. Press Ctrl+I (Cmd+I on a Mac) to open Page Info, then open the Media tab. It lists every image with its alternate text.
• Turn images off. In Chrome, go to Settings, Privacy and security, Site settings, Images, and choose not to allow sites to show images, or add your own site to the blocked list. Reload, and the alt text appears in each image's space. Turn images back on afterwards.
• Use a screen reader. NVDA on Windows, VoiceOver on Mac and iPhone or TalkBack on Android will read each alt aloud as you move through the page.
• Run an audit. An accessibility checker lists images with missing alt across the page, which is quicker than inspecting one at a time.

When images are turned off, alt text may be cut short if the image has small fixed dimensions. That is a display limit of the broken-image box, not a fault in the text.

When you want visitors to see a description

Sometimes the real wish behind hover text is a good one: you want people to know where a photo was taken, which product variant they are looking at or who is in a team picture. The reliable way to show that to everyone is a visible caption.

<figure>
  <img src="/images/bathroom.webp" width="1200" height="800"
       alt="Finished bathroom with walk-in shower and grey tiles">
  <figcaption>Bathroom refit completed in March, including underfloor heating</figcaption>
</figure>

The two pieces of text do different jobs. The alt describes what the image shows, for people who cannot see it. The caption adds context that everyone can read, on every device, without hovering. Screen readers announce the figure and caption as part of the page, so there is no need to repeat the caption inside the alt.

If the design calls for text over the image

Some galleries show a caption only when the pointer is over the image. If you do this, make it appear on keyboard focus as well, keep it visible on touch screens, and make sure the text is also in the HTML rather than added by a script. WCAG 1.4.13 asks that content shown on hover or focus can be dismissed, can be hovered itself and stays visible until the user moves away.

.gallery figure { position: relative; }
.gallery figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: .5rem .75rem; background: rgba(0, 0, 0, .7);
  opacity: 0; transition: opacity .2s;
}
.gallery figure:hover figcaption,
.gallery figure:focus-within figcaption { opacity: 1; }
@media (hover: none) { .gallery figcaption { opacity: 1; position: static; } }

Give the caption text a light shade with enough contrast against the dark overlay. A caption below the image is simpler, and usually better.

Removing title attributes that copy the alt

When a title holds exactly the same words as the alt, it adds a tooltip nobody asked for and can make some screen readers read the description twice. It is worth removing.

• WordPress. Current versions of the block editor do not add a title to images, but older posts, some themes and some gallery or SEO plugins do. Look for a setting such as add title attribute from alt text and turn it off. The media library has a Title field, which is used inside WordPress for organisation and is not printed on the image by default. More detail is in accessibility fixes for WordPress.
• Shopify. Some themes print the image alt into a title for zoom or lightbox features. Edit the image snippet in the theme code and remove the attribute.
• Page builders and lightboxes. Lightbox scripts often read the title to show a caption in the enlarged view. If you rely on that, switch the lightbox to read the figcaption or a data attribute instead.

Here is a short script to find duplicates on the current page:

[...document.images]
  .filter(i => i.title && i.title.trim() === i.alt.trim())
  .forEach(i => console.log('Duplicate title:', i.currentSrc));

A worked example

A builder adds alt text to all forty images in a gallery of finished jobs, then reports that it is not working because nothing appears when the mouse rests on a photo. Inspecting one image shows alt="Finished bathroom with walk-in shower" in the HTML, so the alt text is present and screen readers will read it.

The owner explains that they wanted visitors to see a short note about each job. The gallery template is changed to wrap each image in a <figure> and print a <figcaption> from the image's caption field in the CMS. Each photo now shows a line such as Bathroom refit completed in March, including underfloor heating, under the image on phones and desktops alike.

While checking, the console script also finds that the gallery plugin was copying every alt into a title. That option is turned off, the duplicate tooltips disappear, and a quick test with VoiceOver confirms each image is now announced once, followed by its caption.

The fix, step by step

Edge cases worth knowing

• Linked images. When an image is the only content of a link, its alt is the link's name. A title there does not replace the alt; the alt still has to say where the link goes.
• Decorative images. Images with alt="" show nothing on hover or when they fail to load, which is exactly right. See fixing decorative images.
• Images with no alt but a title. Browsers and screen readers may fall back to the title as the image's name. That is better than nothing, but add a proper alt rather than relying on it.
• Abbreviations and icons. If you need hover help for an icon, a visible label next to it works for everyone, which a tooltip does not.
• Search. Google uses alt text, file names, captions and nearby text to understand images. The title attribute is not a substitute for alt in image search.

Keeping it right

1. Tell everyone who edits the site that alt text is checked by inspecting the image or running an audit, never by hovering.
2. Give your CMS a caption field that the templates print in a <figcaption>, so editors have an obvious place for visible descriptions.
3. Turn off any plugin or theme option that copies alt into title, and recheck after updates.
4. Include an accessibility check of images in your routine for new pages.

For help writing the alt text itself, see the alt text guide and how long alt text should be.