Cookie settings

Images

Alternative text is the written stand-in for an image. People who cannot see the image hear it or read it instead.

Plans. Starter, Plus, Business, and Pro.

Sighted people who edit the page usually never see that text, because the picture is already on the screen. That is why weak alt text lasts for years. The picture looks fine, and the description is missing, wrong, or stuffed with a file name.

Open Images after a scan. Pick a page. SiteScan lists the images it found, the alt text, and whether the image is marked as decorative. Click an image to see the sentence above it and the sentence below it, where the page has that text. Choose Flip to read what a screen reader says instead of the picture. Close with Escape, the × button, or a click outside the dialog.

Images opens on Page content, the pictures in the main part of the page. Repeated content is limited to pictures that show up on most pages, usually in the header or footer. Each picture is listed once. Choose All under "Where the image is used" to see both. You can combine that with Informative or Decorative.

Check an informative image

SiteScan starts this check for you when the page opens. Beside the alt text you see Scoring…, then a score from 1/5 to 5/5.

  • 4/5 or 5/5. The text can stay. SiteScan says: "This description fits the picture. You can keep it."
  • 3/5 or lower. The text is missing, a file name, generic, or it misses the point of the picture. When SiteScan can see a better phrase, it shows Suggested alt text and a short reason.
  • If SiteScan is not sure of a better phrase, it says: "SiteScan is not sure of a better description. Keep this text, or write your own."
  • If SiteScan could not see the picture, it says so. Open the full-size image and write the alt text in your content system.
  • If the check does not finish, choose Try again.

Read the alt text as if you were describing the image to someone on the phone, in the context of that page. A useful description says what the image is for. "Team photo of four people at the Sydney workshop, 2024" helps. "IMG_2044.jpg", "image", "photo", or the same caption repeated on every picture does not.

Correct the description

When SiteScan suggests new text, choose one of these:

  1. Use this description if the suggestion is right. SiteScan then shows the line to paste into your content system.
    • An ordinary image: put the text in alt, as in <img alt="the description" ...>.
    • An svg image: put the text in aria-label, as in <svg role="img" aria-label="the description" ...>. If that svg is hidden, remove aria-hidden as well.
  2. Keep current description if the text already matches the picture. This appears when the page already has alt text. The score changes to Kept. SiteScan says it will treat this wording as a match next time, so later checks are less likely to mark the same kind of description as wrong.
  3. Try another if the suggestion is wrong. SiteScan asks for a different description and will not offer that one again.

When you choose Use this description, paste that line into your content system and publish it. Then check that page again.

Done looks like this: the next check shows 4/5, 5/5, or Kept, and the words match the picture.

Choices you accept or keep also teach SiteScan how you like descriptions written on this website. Later suggestions follow that length and the kind of detail you kept.

Check a decorative image

A decorative image adds nothing you would mention if you were reading the page aloud. A flourish, a spacer, or a border can be decorative. Mark it as decorative in the content system so assistive technology skips it.

If Images shows an image as decorative, it asks Is this image truly uninformative?

  • Choose No if you would mention the image while explaining the page. SiteScan suggests alt text. Choose Use this description if it is right, and paste the line it shows. Choose Try another if the suggestion is wrong.
  • Choose Yes if the image adds nothing. SiteScan says: "This image stays decorative. Assistive technology will skip it."

A photo of a product, a chart, an icon that is the only label on a button, or a picture that carries the meaning of the paragraph is informative. Give it alt text. Keep an image decorative when you would not mention it while explaining the page.

The browser extension has an Images tool as well. Open it on the page you are editing to see each picture marked informative or decorative, with the alt text beside it.