Writing Accessible Web Content

It’s easier than you might think

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

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.

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.

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.

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

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

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

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.

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.

A web video (live or pre-recorded) should include both synchronized captions and a transcript. For audio-only content, a transcript will suffice.

Communicate with words first and foremost. Avoid conveying information with images or icons alone. They’re not universally understood or recognized.

Resources

18F Accessibility Guide

Making Accessible Links: 15 Golden Rules

Accessibility Evaluation for Web Writers

Accessibility Cheatsheet

WAVE Web Accessibility Evaluation Tool

W3C’s Accessibility Page

Accessible Color Combinations

MailChimp Writing for Accessibility

W3C Mobile Best Practices

Content designer, etc.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store