Stop 10 · UX Writing & Content DesignTopics · 7/7

Writing for Accessibility

In short

A screen reader reads your words out loud, exactly as written. 'Click here', 'image1.png' and 'button' tell a blind user nothing. Accessible writing makes every word make sense on its own.

Writing alt text for images, clear labels for screen readers, and avoiding jargon or idioms that don't translate well — content accessibility is as important as visual accessibility (Phase 2).

The jaadu sits by an old radio listening closely with a big smile.

Think of it like this

Cricket commentary on the radio

On radio there's no screen, so a good commentator says 'Kohli drives through the covers, that's four'. Not 'look at that!'. Alt text and labels are your radio commentary: describing what matters, for someone who can't see it.

Watch it happen

What a screen reader announces

User

Screen reader

Page

Swipe to next item

1/5A blind user moves through the page one element at a time.

The big ideas

What you need to know

Alt text that matters

Describe the meaning in context. Decorative images get empty alt text so screen readers skip them.

Links that stand alone

Screen reader users often list all links. 'Read more' ten times is useless; 'Read the refund policy' works.

Real headings

Clear headings let people jump through a page. Write them so the list of headings alone tells the story.

Plain language

Short sentences and common words help people with cognitive disabilities, non-native readers and everyone in a hurry.

See it in code

Walk through the code

html

1<img src="team.jpg" alt="Our team holding the hackathon trophy" />2<img src="divider.svg" alt="" />3 4<button aria-label="Close dialog">5  <svg aria-hidden="true">...</svg>6</button>7 8<a href="/refunds">Read the refund policy</a>

1/3The photo gets real alt text. The decorative divider gets alt="" so it's skipped.

Meaningful alt text, an empty alt for decoration, a label for an icon-only button, and a link that makes sense on its own.

Save yourself the pain

Common mistakes

Oops

Writing alt text like 'image of a picture of a team'.

Do this instead

Screen readers already say it's an image. Just describe it: 'Team holding the hackathon trophy'.

Oops

Using instructions like 'click the green button on the right'.

Do this instead

Refer to the label instead: 'Select Continue'. Colour and position aren't available to everyone.

Your mission

Write alt text for a real page

~20 min

Quick check

A decorative wave graphic sits between two sections. What alt text should it have?

Go deeper

1Write descriptive alt text for 3 images in a design, imagining a screen reader user.
2Learn why a label like 'Click here' fails screen reader users navigating by link list.
3Practice simplifying jargon-heavy copy into plainer language without losing precision.