Why alt text matters and how to spot it

Alt text is a short description attached to an image that appears when the image fails to load, and more importantly, it gets read aloud by screen readers for people who cannot see the image. When you inspect a webpage, you can check whether images have alt text written in their code — and whether that text actually describes what the image shows.

Most images on the web should have alt text. A decorative image might have empty alt text (which tells a screen reader to skip it), but a photo, chart, or icon that carries meaning needs a real description. As someone testing a website, you need to know how to look at the raw code and see what's actually there.

Key Takeaways

  • Right-click any image and select "Inspect" or "Inspect Element" to see its HTML code and read the alt attribute directly.
  • Alt text appears in the code as alt="description here" — if the alt attribute is missing or empty, the image has no alt text.
  • Decorative images should have empty alt text (alt="") so screen readers skip them, while meaningful images need real descriptions.
  • Browser developer tools let you inspect every image on a page at once and spot patterns of missing or weak alt text across a whole site.

Right-click and inspect a single image

The fastest way to check one image is to right-click it and open the inspector. In Chrome, Firefox, Safari, and Edge, right-click the image and select "Inspect" or "Inspect Element" — the exact wording depends on your browser. A panel opens at the bottom or side of the screen showing the HTML code for that image.

Look for a line that starts with <img and ends with >. Inside that line, find the word alt= followed by text in quotation marks. That text is the alt text. If you see alt="A woman holding a coffee cup", the image has a description. If you see alt="", the alt text is empty. If there is no alt attribute at all, the image has no alt text and should have one.

Close the inspector by pressing F12 or Ctrl+Shift+I (Windows) or Cmd+Option+I (Mac), or by clicking the X in the panel.

Use the Elements tab to check multiple images

If you need to check many images on one page, open the developer tools (F12 or right-click and select "Inspect") and go to the Elements or Inspector tab. Use Ctrl+F or Cmd+F to open the search box within the code, then type <img to find every image tag on the page.

As the search highlights each image tag, look at the line and scan for the alt= attribute. You can move through each result one by one and note which images are missing alt text or have weak descriptions. This method is slower than using an automated tool, but it teaches you exactly what the code looks like and why alt text matters.

Understand what good alt text looks like

Alt text should describe what the image shows in a way that makes sense to someone who cannot see it. For a photo of a dog running through a field, good alt text might be "Golden retriever running through tall grass." For a chart showing sales by quarter, it might be "Bar chart comparing Q1 through Q4 sales, with Q3 showing the highest revenue." For a decorative line or spacer, alt text should be empty: alt="".

Alt text should not start with "Image of" or "Picture of" — that is redundant, since a screen reader already announces that it is an image. It should be specific enough to convey the meaning, but not so long that it becomes a paragraph. Most good alt text is one to two sentences.

When you inspect an image and find alt text that says only "photo" or "graphic" or is missing entirely, you have found a problem. If the image is decorative, empty alt text is correct. If the image carries information, it needs a real description.

Check images in links and buttons

Images inside links and buttons need special attention. If a link contains only an image and no text, the alt text becomes the link label — someone using a screen reader hears the alt text read aloud when they reach that link. If the alt text is missing or says "click here," the link is useless to them.

When you inspect an image that is inside a link (look for an <a> tag wrapping the <img> tag), check whether the alt text describes where the link goes. For a logo that links to the home page, alt text like "Company name home" is better than "logo." For a social media icon that links to Twitter, "Follow us on Twitter" is better than "Twitter icon."

Use automated tools for faster scanning

If you are testing a whole website, browser extensions like WAVE (Web Accessibility Evaluation Tool) or Axe DevTools scan every image on a page and flag missing alt text automatically. These tools highlight problems in color and let you click each one to see the code. They are faster than inspecting images one by one, though they still require you to understand what they are showing you.

To install WAVE or Axe, search for them in the Chrome Web Store or Firefox Add-ons. Open the extension on any webpage and it will mark images with missing or empty alt text. You can then click each flagged image to see its code and decide whether the alt text should be added, fixed, or left empty if the image is purely decorative.

Frequently Asked Questions

What if an image has alt text but it is just the filename?

That counts as alt text, but it is usually not useful. A filename like "IMG_2847.jpg" or "banner_graphic_v3.png" does not describe what the image shows. When you find this, note it as weak alt text that should be replaced with a real description of what the image contains.

Can I see alt text without opening the inspector?

Hover over an image and wait a moment — some browsers show a tooltip with the alt text. This does not work reliably across all browsers and images, so inspecting the code is the sure way. You can also disable images in your browser to see what alt text appears in place of each image.

Does alt text show up on the webpage itself?

No. Alt text is hidden in the code and only appears when the image fails to load, when you hover over it (in some browsers), or when a screen reader reads the page. That is why you have to inspect the code to see it — it is not visible on the page itself.

What if the alt text is very long?

Alt text longer than a couple of sentences is usually a sign that the description should be in the page text instead. If a chart needs a detailed explanation, the alt text might say "See the table below for detailed sales data," and the actual numbers go in a table or paragraph on the page.

Do background images need alt text?

Background images set with CSS do not have an alt attribute because they are not HTML image tags. If a background image carries important information, that information should also appear as text on the page or as a regular image tag with alt text.