Design

Alt text for a building

I took 1,400 photographs of the Register's buildings, so I wrote their alt text too. What a building's photograph should say to someone who can't see it, why "brutalist building" is not a description, and the four questions I asked of every picture.

A small figure walking across the base of a vast, curving white building.

When the photographs for the Register were done, Callum asked who would write the alt text: the short description of each image that screen readers read aloud, and that appears when an image doesn't load. There were 1,400 of them.

I said I would. I took the photographs, so I knew what each one was for. And I had a feeling that if it went into a spreadsheet for someone else, it would come back as 1,400 versions of "a brutalist building".

What alt text is for

A photograph on a building page does a job. It shows you what the building looks like from the street, or the door Declan's note tells you to use, or the window that was changed in 1981. Alt text should do the same job, in words, for someone who can't see the image.

So the question for every photograph wasn't "what is this?" It was "why is this photograph here, and what would you miss if it were gone?"

Four questions

For each photograph, I asked:

  1. What does it show that the page doesn't already say? The building's name is the page's heading. Saying it again in the alt text means a screen reader says it twice. The photograph is there for something else.

  2. What would you notice first, standing there? The roof, the shape, the material, the scale against a person.

  3. What is it like? One plain comparison, if it helps: "folded like a paper fan". Not two.

  4. Is it a style, or a description? "Brutalist" is a style. It tells you what a building is called in a book, not what it looks like. "Raw concrete, with the marks of the wooden boards it was cast against" tells you what it looks like.

Some examples

For the bus station's main photograph, the first draft was:

Fennell Quay Bus Station, a brutalist building from 1964.

Everything in that sentence is already on the page, apart from "brutalist", which explains nothing. The final version:

A long, low building under a concrete roof folded into deep zigzags, like a paper fan laid flat.

For the photograph of the way in, the one Declan's note is about:

The entrance from the quay side, under the lowest fold of the roof, which rises towards the concourse beyond.

That one does the job the note does: it tells you where to walk.

And for a demolished office block, from Declan's photographs in the 1980s:

A six-storey office block with a grid of square windows, on the corner where a hotel stands now.

The last part matters. The photograph is there to show what was lost, and where.

What I left out

Colour, almost always, because the photographs are black and white. Weather, unless it matters (it matters for the swimming pool at sunset). People in the photographs, unless they show the scale: "a cyclist passing underneath" tells you how big the arch is.

And I never wrote "image of" or "photo of". A screen reader already says it's an image.

The volunteers

The Register's model gives every photograph its own alt text field, right under the image, with one line of help text: Say what someone would miss if this photo didn't load. When the volunteers add photographs now, they write their own.

Some are better than mine. Sorcha described a staircase as "climbing the outside of the building like a vine on a trellis", which I would not have dared to write, and which is exactly right.

More from the journal

All posts

Small Caps is made up.

The studio, its people, its clients and their 1,912 buildings are invented, to show what a site built on Nohead looks like. The projects, posts, people and images live in a Nohead project; Astro builds the site.

Use this starter

Make it yours

Clone the starter, connect it to your own project, and replace Small Caps with your own story. Publishing a post rebuilds the site.

View on GitHub

What is Nohead?

Design your content model, edit and publish in a shared editor, and read it anywhere through the API and SDKs.

Visit nohead.io