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
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.
- 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.
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.
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.
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.
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.
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.