Writing Accessible Web Content

It’s easier than you might think

3 min readAug 11, 2019

iPhone, ice coffee, Apple MacBook Pro laptop on a desk

Words are fundamental to communication — on and off the web. And because a significant component of digital accessibility is about making all content available as text, writers have one of the most substantial impacts on creating accessible experiences.

Basics

We’ve all experienced frustrating — or even debilitating — experiences online and with our devices. Your users don’t consume content in a vacuum. They made it to your website from different generations, cultures, and browsers: don’t let your perspective get in their way.

As you write, consider the following:

Would this make sense to someone who doesn’t work here?
Could someone scan and comprehend this?
If someone can’t see the colors, images, or video, is the message still clear
Does this work well on mobile devices?

Guidelines

Say the most important thing first

Begin each page, section, and paragraph with your key points. In journalism, this called your lede — don’t bury it. Front-load critical information: put what matters most at the top of the page, at the beginning of each paragraph and sentence.

Why? Scannability. Help readers scan and find what they’re looking for.

Lists — rather than line breaks or paragraphs — make content easier to consume and understand.

Use plain language

Short, clear sentences and paragraphs are best. Avoid complicated syntax, and steer clear of jargon — choose the most straightforward words. Doing so also helps non-native English speakers.

Organize your content

Following the path of saying the most important thing first, you should use headings (in order and nested) to keep relevant and most important information grouped.

Start with an outline. Chunk your content. Read it aloud (a lot of our ears catch what our eyes don’t, which is very ableist of me to write). Do whatever you have to make sure your content is logical, organized, and easy to follow.

Be aware of the reading level

Tools like Hemingway and readable.io make it easy to check the reading level, which should be no higher than grade 10.

Avoid sensory characteristics

Don’t refer to components (think: buttons, menus, a section of the page) by its:

Shape
Size
Directional position (top, bottom, left, right)
Sound
Color

Limit the use of all caps

Text written in all caps is hard to read, especially for users with dyslexia or other reading disabilities.

(If acronyms are necessary, explain what they mean on the first reference.)

Label forms

Label form fields with clear names (e.g., “First name” or “Birthday”). Be thoughtful about which fields you include, especially the ones you mark required.

And please on all that is beautiful in the world, don’t rely on placeholder text alone. That is a cardinal sin. Placeholder text disappears when a user taps on the field, isn’t read aloud by screen readers and doesn’t meet the color contrast requirements.

Use descriptive links

Links are descriptive when — even without the context of surrounding content — you know where you’ll end up when you follow the link. Avoid using nondescript links like “Click Here” or “Learn More.”

Yes: Check out my post, Web Accessibility for Writers on my website.

No: To read my featured work, click here.

It’s good practice to use the title of the webpage you’re going to as your link text.

Use alt text

If an image doesn’t load or a user can’t see it, alt text is the copy that appears in its place.

The language will depend on the purpose of the image:

If it’s decorative — like a banner or hero image — provide the null value
If the image is serving a specific function, detail what’s inside the image

As an experiment, describe a picture to someone without showing it to them. Be as detailed as you can. Then, reveal the picture. How close is it to what they imagined? Remember this experiment when writing alt text.