Alt text is a description for images online

Alternative text is read aloud (or translated into braille) by screen readers for people who can't see or interpret images clearly. It's also used by search engines and people who turn off images in their browser.

Using alt text consistently helps us to build a better and more inclusive online brand experience. But a bad alt text description can be disorienting for users, and a non-existent one can waste their time (screen readers may default to using the imagetitle.jpg instead).

We need alt text for all brand imagery

That's any image, photo or illustration that adds to our online brand experience across the marketing site, Help Centre and Bulb account.

There are a few important exceptions.

We don't use alt text for:

Design flourishes
That's any background texture, brushstroke or border
Decorative icons
That's any image with the sole purpose of drawing visual attention to a piece of information, especially on error messages or website banners
Our Join flow
Image descriptions can interrupt an important interaction if they sit between a question and answer
Our email headers
That's because the alt text appears in the email preview

These images must take alt="" to remove them from screen reader output. Omitting the alt attribute is not enough.

Principles for writing alt text

1. Start it right

Screen readers announce 'Image' before reading the alt text. Let's not waste people's time by saying it again.

  • No: Image of the reception desk at Bulb HQ.
  • No: Picture of the reception desk at Bulb HQ.
  • No: Photo of the reception desk at Bulb HQ.
  • Yes: The reception desk at Bulb HQ.

It can be useful to introduce images that aren't a photograph. Illustrations are an important part of our brand identity - and they can be abstract in a way that a photograph can't.

  • Yes: Illustration of a house wrapped in a scarf.
  • Yes: Chart showing that wind generation makes up the majority of Bulb's green electricity.

2. Punctuate properly.

Screen readers know how to treat punctuation. Think of alt text like a script. Using full sentences with a full stop helps screen readers to relay information clearly.

3. Make it descriptive

Say what you see. Describe the image in the context of the page. Try to communicate the key idea without bogging the listener down in detail.

  • Yes: Illustration of someone happily shopping for a radiator key.

For charts, describe the outtake, not the data. The data should be communicated in the main copy of the page, or in a table. We also have the option to create live charts with more detailed descriptions if needed.

  • Yes: Chart showing that Bulb's gender pay gap has increased slightly since last year

For interactive elements using icons or the Bulb logo, describe their purpose, not the appearance of the image itself.

  • No: The blue Twitter bird icon.
  • Yes: Bulb on Twitter.

4. Keep it snappy

Most popular screen readers cut off alt text at 125 characters, so anything extra is wasted. Keeping alt text short also means we're respecting people's time.

5. Make people smile

Illustrations are part of our brand experience. If they're funny, keep a sense of humour in alt text.

  • Yes: Illustration of a chap wearing matching puffer jackets with his hot water tank.

Things that don't belong in alt text:

  • A source or credit for the image. That belongs in a caption.
  • A list of key search terms. It might be good for SEO, but it's a terrible brand experience.
  • A description of a person or character's physical appearance. It's easy to get wrong.