How to Write Alt Text That Screen Readers Actually Need

Most website owners treat alternative text like an SEO chore. They fill the box with keyword phrases and move on to the next page.

That approach fails the people who rely on screen readers. Good alt text gives blind and low-vision visitors the same context as sighted visitors. Learning how to write alt text correctly transforms your website from barely compliant to genuinely accessible.

Why Alternative Text Matters More Than You Think

Screen readers convert digital text into spoken audio or tactile Braille displays. When a screen reader encounters an image, it reads the alt text attribute embedded in the code. If that text is missing, the screen reader might skip the image or read out an unhelpful file name like IMG_9042.jpg.

Alternative text provides digital parity. Parity means equal access to information. If an image conveys meaning, helpful details, or essential context, that information must exist in text form. You are not writing for search engine algorithms. You are writing for human beings who interact with your website using assistive technology.

The Repeatable Formula for Writing Great Alt Text

Writing effective descriptions does not require creative writing skills. You just need a practical, consistent structure. We use a three-part formula: subject, action, and context.

First, identify the primary subject of the image. Second, describe what the subject is doing or what state it is in. Third, add the necessary context that ties the graphic directly to your page content.

For example, instead of writing "dog," you would write "a golden retriever sitting on a wooden porch during sunset." The extra detail tells the reader why the image exists on the page and what makes it relevant.

Four Common Alt Text Mistakes to Avoid

Even well-meaning content creators make mistakes when writing alternative text. These errors usually come from outdated advice or a basic misunderstanding of how screen readers interact with web pages.

Here are four frequent mistakes we fix during site audits:

• Starting with 'Image of' or 'Picture of' (screen readers already announce images automatically).
• Stuffing keywords into the description to manipulate search engine rankings.
• Copying and pasting the visual image caption into the alt text field, creating redundant spoken text.
• Writing novel-length descriptions that overload the user with irrelevant visual background details.

Screen readers announce the presence of an image element before reading the description. Writing 'photo of a coffee cup' causes the screen reader to say 'graphic, photo of a coffee cup.' Keep your language concise and drop redundant labels.

Decorative Images vs. Informative Images

Not every graphic on your website requires a descriptive text string. Images generally fall into two categories: informative and decorative.

Informative images add actual content to the page. They include charts, graphs, product photographs, team portraits, and icons that function as actionable buttons. These elements require clear alternative text.

Decorative images exist purely for visual style or layout structure. Examples include abstract background shapes, section divider lines, or purely decorative flourishes next to a section heading. For decorative images, you should leave the alt attribute empty (alt=""). An empty alt attribute tells the screen reader to skip the graphic entirely, saving the user time.

How Page Context Shapes Your Description

Context is the most critical element of alternative text. The exact same photograph can require completely different alt text depending on the article it lives in.

Imagine a photograph of a wooden dining chair in a brightly lit room. If the photo appears on an e-commerce product page, the alt text should focus on the wood finish, frame dimensions, and cushion fabric.

If that same photograph appears in an article about minimalist interior design, the alt text should focus on how the chair fits the overall room layout. If the image appears in a blog post about woodworking joinery, the alt text should focus on the visible mortise and tenon joints.

Always ask yourself why the image is on the page. Describe the visual details that support that specific message.

How to Test Your Alternative Text

Testing your alternative text is simple. Close your eyes or turn off your computer screen. Have a colleague read the main text and your alt text aloud in order.

Does the page still make sense? Do you miss any key information? If the answer is yes, edit your text for better clarity and context.

You can also turn on built-in screen readers like VoiceOver on macOS and iOS, or NVDA and Narrator on Windows. Navigating your website with an actual screen reader provides immediate feedback on your work.

Building accessible websites takes practice, but it quickly becomes second nature. If you want to make sure your website meets WCAG 2.2 AA standards, Twist Web Studio can help you audit, design, and build an inclusive digital experience.