<aside> đź’ˇ

Screen readers (used by blind and low-vision users) read out our text and navigate pages via hierarchy and links. To make things as easy as possible for as many people as possible, we take the following practices seriously.

</aside>

image.png

Writing for screen readers

Creating content that works well with assistive technologies requires attention to several key elements:

Keeping link text clear

Links should clearly describe their destination or purpose without requiring additional context.

Using proper heading structure

Proper heading hierarchy helps screen reader users navigate content effectively. Manually bolding and formatting text doesn’t achieve this. The results may look indistinguishable to you, but true headings (such as <h1>, <h2>, <h3>) make a major difference for accessibility.

Describing images for alt-text

Images need text alternatives for users who cannot see them. Alt-text should describe the content and purpose of each image on the page.

A picture of a phone screen. The screen includes an image of a stylish woman lying down on a purple cushion. Above the image, there are four buttons which read: Tonight, This week, New Shows, and Most viewed. At the top of the screen, it says “Good morning, Ali.”

Note: Check the alt text of the images in this guide for examples of approved alt-text.

❌ DON'T:

A woman is lying down on a purple thing? It’s a cell phone screen with buttons.

Formatting text properly

How you format text affects how screen readers pronounce it. Random capitalisation or strange spacing might confuse assistive technologies.

âś… DO: This is most common with very popular events that have just gone on sale.

❌ DON'T: This is Most Common with VERY popular events……. especially the ones that have just gone on sale.

Prioritising visual accessibility

Not only do design choices impact users with visual impairments, but descriptions of site and app elements do, too.

Avoiding colour and location references

Instructions should be accessible to users who can’t or struggle to perceive colour or spatial relationships.

Mobile-first considerations

Mobile interfaces have unique constraints that affect content design. Not only should content be accessible across different devices and screen sizes, but you should write with a mobile-first mentality.

Keeping tap text brief

Mobile-first means spatial efficiency. Be concise when writing for mobile, especially when it comes to buttons and other interface elements.