Give every photograph in the gallery a short description of what it shows and why it is there, starting with your best work. Without one, screen readers read out file names or skip the image.

A gallery heard instead of seen

A gallery is often the strongest page on a small business site: dozens of photographs of finished work, each one proof of what the business can do.

Through a screen reader, the software that blind and low-vision visitors use to hear a page, it can sound like this: link, IMG underscore 4471 dot JPG. Then the next one, forty times.

Nothing in the page tells the software what each photograph shows, so it reads out the only thing it has, or skips the image altogether.

The fix is a short line of text for each image, called alt text, and it is among the oldest pieces of accessibility advice there is.

What alt text does

Every image on a page can carry a text alternative, written into the code alongside it. A screen reader reads that text in place of the picture.

WCAG 2.0, the standard most accessibility advice refers to, opens with this: images that convey information need a text alternative serving the same purpose. It is a Level A requirement, the most basic level.

The same text shows if an image fails to load, and search engines use it to understand what a photograph shows. Useful, but secondary. The person who needs it most is the one who cannot see the image.

Why galleries are the worst case

The third turns a missing description into noise. A thumbnail with no alt text is a link with no name, so the screen reader announces where it points instead, usually the full-size image's file name.

What it shows and why

Good alt text answers two questions in one short sentence: what is in the photograph, and why it is in this gallery.

The single word deck names a category. Cedar deck built around an old maple, with the boards cut to fit the trunk, describes the work and the reason it was worth showing.

Write it the way you would describe the photograph to a customer on the phone. Name the thing, the material and the detail you are proud of, then stop.

What to leave out

Skip the words image of and photo of. Screen readers say they have come to an image before reading its description, so those words get spoken twice.

Skip lists of search terms. Alt text stuffed with the business name and every town served is tedious to hear, and Google's own guidelines warn against it.

Skip what a visible caption already says, and keep each description to a sentence. Anything that needs a paragraph belongs on the page, where everyone can read it.

Images that need no description

Not every image carries information. A decorative border, a background texture or a divider gives a listener nothing.

Those should have empty alt text, which tells the screen reader to skip them. Missing alt text is different: it leaves the software guessing, and it usually guesses the file name.

A logo that links to the home page is not decoration. Its alt text should be the business name, because that is what the link means.

A worked example

A 3D printing service in a light industrial unit prints prototypes, replacement parts and small production runs. Its gallery is where most visitors decide whether it can handle their job.

The gallery held sixty photographs uploaded from the owner's phone, named by the phone, with no descriptions. Each thumbnail opened a full-size version over the page.

A customer who uses a screen reader emailed to ask what the service had actually made, because the gallery read to her as a list of numbered file names.

The owner described the best twenty first, a sentence each: replacement gear for a stand mixer, printed in nylon beside the cracked original; two-part sensor housing in black plastic for an engineering firm.

Blurry and duplicate photographs were deleted rather than described, and the rest were done over the following week. New photographs now get their description at upload, while the job is fresh.

Where to write it

In WordPress, each image in the media library has an alt text field, and galleries built with WordPress's own gallery feature use what is written there.

Some gallery plugins ignore that field and use the title or caption instead, or nothing. Check which field yours reads before typing sixty descriptions into the wrong one.

Whoever maintains the site can look at the gallery's code and tell you in a few minutes.

Testing by ear

The quickest test is to listen. iPhones include a screen reader called VoiceOver in their accessibility settings, and Windows users can download one called NVDA at no cost.

Turn one on, open the gallery and move through the images. If you hear file names, or the same word forty times, the descriptions are missing or in the wrong field.

VoiceOver changes how an iPhone responds to taps, so learn how to switch it off before you switch it on.

Starting with the best work

Describing an old gallery of two hundred images is a real job, and it does not have to happen in one sitting.

Start with the photographs doing the most work: the first row, the images on the home page, the projects you most want more of. Then work back through the rest in batches.

Photographs not worth describing are usually not worth keeping. Removing them improves the gallery for every visitor.

The counter-case

A set of near-identical photographs, such as one product in eight colours, does not need eight full sentences. A short description with the colour named in each will do.

A site whose gallery is a minor page can reasonably fix its home page and service pages first.

Neither is a reason to leave the job undone. Every photograph that carries information should say what it shows, in one sentence, best work first.

Before the next upload

  1. Listen to your gallery with a screen reader.
  2. Check which field your gallery plugin reads.
  3. Delete photographs not worth describing.
  4. Describe the best twenty in a sentence each.
  5. Give decorative images empty alt text.
  6. Describe the rest a batch at a time.
  7. Write descriptions at upload from now on.

Step two saves the most wasted effort. Descriptions typed into a field the gallery never reads leave the page sounding exactly as it did before.

The same kind of check, done with a keyboard, is covered in video players without keyboard controls.

Frequently asked questions

What does a screen reader do with undescribed images?

It reads out whatever it can find, usually the file name, or skips the image. In a gallery of linked thumbnails, it often announces each link's file name.

What should a photograph's alt text say?

What the photograph shows and why it is in the gallery, in one short sentence, the way you would describe it to a customer on the phone.

Should alt text include keywords for search?

No. Lists of search terms are tedious to hear, and Google's own guidelines warn against filling alt text with keywords. Describe the photograph honestly instead.

Do decorative images need alt text?

They need empty alt text, which tells the screen reader to skip them. Leaving it out entirely leaves the software guessing, often by reading the file name.

Which standard covers image descriptions?

WCAG 2.0, in its first guideline, on text alternatives. Images that convey information need a text alternative serving the same purpose, at Level A, the most basic level.

Where do I write alt text in WordPress?

In the alt text field for each image in the media library. Check first that your gallery plugin uses that field rather than the title or caption.

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.

Gallery full of file names?

Send us the gallery page. We will check which field it reads and help you describe your best work first.

Start a Conversation