Web Accessibility for Writers

Work desk with an Apple watch, rose gold iPhone resting on an open writing notebook, a laptop, hot chocolate in a cup and saucer on it.
This is a transcript of a talk I gave at the Content Strategy SF Bay Area Meetup at Airbnb.

•••

The power of the Web is in its universality. Access by everyone, regardless of disability, is an essential aspect.

This is a quote from Tim Berners-Lee, the inventor of the Web. His vision is both accessible and inclusive, a belief that everyone—no matter their language, location, ability, or device—should be able to use the Web.

In my experience, we discuss how to add accessibility features after the fact. How can we go back and incorporate accessibility? What we’re really asking is how can get back to what we lost, and in the worst case, how can we fix what we broke? With Berners-Lee’s vision in mind, accessibility isn’t a feature of the Web but fundamental.

Web accessibility is not a feature; it’s fundamental.

A developer named Barry Smith built a website in response to the trends he was witnessing in 2012. Developers and designers were loading websites down with graphics, animations, and bloated code. His site is lightweight, responsive, and accessible; it’s also satire, yes, but Smith proves his and Berners-Lee’s point: the Web is fundamentally accessible. We’re the ones that break it.

A screenshot of motherfuckingwebsite.com
It’s quite profane

When I look at his website, the first thing I notice is it’s 100% text, nary an image in sight. It’s there in black and white: text. We were right, writers. Words matter. Content and communication, it matters. Not as something that’s nice to have, content—like accessibility—should be considered from the beginning.

How do we write for web accessibility?

Real talk: I didn’t know I had a role to play with web accessibility as a writer. I thought that was for developers to bake in or QA to check for. Then I read the Web Content Accessibility Guidelines (WCAG) anyway. There are over 80 checklist items, they’re dense and difficult, but as I read them, I found a recurring theme: be a good writer.

Our craft—the ability to empathize with readers, put ourselves in their shoes, organize content, tell a story, make sure there’s a consistent point of view—prepared us to have one of the biggest impacts on web accessibility.

There are other tools that writers can add to their arsenal to contribute to accessibility, tools that are unique to the web: alt text and link text.

What is alt text?

Alternative text (or alt text) are the words that appear in place of an image on a webpage. If a user’s browser doesn’t load an image, or a person is using a screen reader, alt text replaces the visuals (and a screen reader reads it aloud). Good alt text conveys the mood of the image and allows a user to walk away from the webpage with the same information.

It tells a story.

Effective alt text in action

A man wearing a black backpack is walking down an escalator.

Okay alt text:

<img src=“escalator.jpg” alt=“man on escalator”>

Better alt text:

<img src=“escalator.jpg” alt=“man walking on escalator”>

Best alt text:

<img src=“escalator.jpg” alt=“A man wearing a black backpack is walking down an escalator.”>

Alt text best practices

Do:

  • Keep alt text short and succinct (125 characters max)
  • Use punctuation

Don’t:

  • Begin with “Image of” or “Picture of”

What is link text?

Link text is the visible, clickable text on a webpage. Typically, it’s a different color and/or underlined.

What makes link text descriptive?

When taken out of context, descriptive link text explains where you’ll end up (or what you can expect to find) when you click on the link. If we took the link text out of the page and away from the other content, we’d have enough information to move forward.

Link text can be short, but “click here, “learn more,” and “read more” link text should be avoided (more accurately, it should be scrubbed from the Web entirely); it’s inaccessible, vague, and not an economic use of words.

A screenshot of an old Shutterfly webpage with an image of a Links List from a screen reader.

Descriptive link text best practices

Do:

  • Keep it around 125 characters

Don’t:

  • Begin with prepositions or articles

Why does this matter?

I’m preaching to the choir. We know that web accessibility matters. First and foremost, it’s the right thing to do, but it’s also good for business—a bigger audience means more potential customers. But with Berners-Lee’s vision for the Web in mind—the idea that the Web is universal, fundamentally accessible and inclusive—writing for web accessibility is how we turn an inclusive culture outward to our customers. It’s how we invite people into the fold, and let them know they matter and are included.

Looking at web accessibility through that new point of view, it’s my philosophical belief that the Web is inherently accessible, and accessibility is inherently inclusive.