Writing Accessibly

The most important part of any website is the content - if you're not saying anything that matters, it doesn't matter how you present it.

The next most important part is making sure that the important things you're saying are understandable to your audience. In this sense, content can be complicated. We have to account for the voice and tone of the brand, the expectations of the audience, the audience's education level (both in general and in the subject matter), and their skills and abilities with the language being presented.

Then there's challenges we may not initially think about: is our reader dyslexic? Do they have Cognitive and neurological disabilities that make remembering things difficult? Do they have  Visual disabilities that limit the number of words they see on the screen at a time? Do they even see the screen?

When we write for the web, we write for all of our audience.

Writing accessible links

Links need to be accessible for people with  Visual disabilities,  Cognitive and neurological disabilities, and other accessibility concerns. Links also need to be understandable for people who use English as a second language. Accessible writing needs to be addressed both at the style of writing (i.e. the voice and tone need to be understandable and clear) and at the structure of writing (i.e. the link needs to be in an accessible structure for screen readers and other software).

Link text is the content within an anchor tag. Anchor tags must not be empty; if they are, they can be navigated to but they don't say what they are and that confuses people.

Do

• Make sure a link makes sense out of context. Screen reader users often navigate from link to link, skipping the content in between - essentially scanning the page - so links that simply say "click here" a dozen times are useless.
• Be as concise as possible (while still respecting context).
• Put the most important information first. If the link is to a Products page, start the link with Products then mention other details like opening in a new window.
• Be mindful that extremely short links (like single-letter alphabets for an index) may be very difficult for someone with Category: Physical Disabilities such as cerebral palsy to click with a mouse. If using these links, make sure to make the target area bigger.
• Use human-readable text instead of a URL, unless the URL is short and succinct (like cnn.com). Nobody wants to sit and listen to your URL.
• Put some form of content between lists of links so a screen reader differentiates between them when reading the page. Alternatively, put lists of links in a list format of some sort so that the screen reader pauses between entries.

Don't

• Don't ever code an empty link. They must always contain text or an image with alternative text. (Background images are not considered an image!)
• Use "Click here", "Learn more" or "Click here to learn more" as your link titles. Without context these make no sense, and they're not guaranteed to be read in context. (Further, the user might not be clicking a mouse.)
• Include the word "link" in the link (i.e. "link to Products") because screen readers tell users that the link is a link automatically.

Images in links

In the case of an image, the image's alt text is read as the link text. Note that in these cases, the alt text needs to describe the content of the image and the function of the link. In some cases this can be as short as "Products" and in others it may need to be longer, such as:

<img src="/salesincrease" alt="Chart showing 10% sales increase over the last decade with link to more sales data"/>

If the image doesn't have alt text and it's the only thing in the link, the screen reader will read the image file name or the URL being linked to. Don't do that to people.

Alternatively, if the image is purely decorative and there's text in the link that adequately describes the link, you may be able to set the alt tag to "" (blank) so that the image isn't read out to the user.

In-page links

Make it clear by the presentation or content that in-page links are in-page links. Most screen readers announce in-page links as such, but sighted users with other disabilities (especially cognitive disabilities) may not understand what happened when they clicked a link.

Pop-ups, new windows, frames, and external websites

• If you don't have to pop a new window or new tab, don't. There's a lot of debate in the accessibility community about whether it should ever be done, because it can be very confusing for the user. Rather than say "never" we say "use caution".
• When you do link to a new window, frame, external website, etc, make it clear by the presentation or content that you're doing so. If saying so in the content of the link, do so at the end of the link name (i.e "Products - opens in a new window").
• If using an icon to present that the link goes to a new window, make sure the icon is communicated through its alt text.
• Make it clear when a link opens a file such as a PDF, powerpoint presentation, or similar. Neither browsers nor screen readers do this today, so the onus is on us to tell the user they're about to view a PDF. Note that the callout needs to be in the link (so that the user hears it) i.e. <a href="1040.pdf">Tax form 1040 (PDF)</a>.

Resources:

• WebAIM's articles on Introduction to Links and Hypertext and Link Text and Appearance are two must-reads for designers, writers, and developers.
• WebAIM's article on WCAG 2.0 and Link Colors specifies the correct display and style to meet Level AA on links.
• The WCAG has a list of colors that are accessible against white background with black test, but notes that using color as the only indicator of a link is problematic. They strongly recommend using underlining or another indicator of a link.
• Making Accessible Links: 15 Golden Rules for Developers by Gian Wild on Sitepoint covers a little more on the technical side and a little less on the writing style.
• Improving UX for Colorblind Users by Adam Silver on Smashing Magazine covers the impacts that using only color to identify links can have on those who are colorblind.
• Links and Hypertext, Link Text and Appearance, and Hypertext Links by WebAIM cover writing accessible links in pretty much all their forms.

Writing accessible microcopy

Microcopy refers to the small bits of text on a site that help instruct the user and alleviate any concerns. Examples include instructions at the top of a form, a description of what a page does, form field help, icon descriptions, etc.

Microcopy can make or break a website's experience - imagine trying to complete a form where you don't know the field formats, or why to provide information, or what it'd be used for. People aren't very fond of those. Alternatively, too much microcopy can be a distraction from the task at hand. So like everything else, it's a matter of striking the right balance.

That balance is even more challenging when the user cannot see the screen or has cognitive issues understanding the screen. Making microcopy accessible is critically important.

Kinneret Yifrah and Retem Binheim recommend the following seven guidelines for writing microcopy.

Think top-down and left to right.

Placing the microcopy in front of the action is crucial. It's important not to put instructions after the field they refer to.

The accessible order of elements is Label then Instruction or Hint then Field.

Never place any microcopy under a confirmation button.

Be witty, but not at the expense of the plain message.

If the person using the site can't see the screen, is it still clear where they are and what comes next?

For errors or empty states, make sure that the user is told the page isn't found or there are no results, etc. and what to do afterward.

For sign-up and login screens, don't forget to say what the page is about.

For confirmation and error messages, make sure the message is unequivocally expressing that it's a confirmation or an error. Do they know what to do next? Do they know how to find the errors?

Provide a written alternative to every icon and every image

If it provides meaning, it should have an alt description.

If it doesn't provide any useful information to enhance understanding, explicitly prevent it from being read out.

A "more information" or help icon should ideally say what comes next such as "How to choose a password".

Note that emojis have preset alt text, and you should probably know what it says before you use one.

Be more descriptive than Read More for links and buttons

See "writing accessible links" section at the beginning of this article.

All microcopy should appear as live text, not as an image

If you can't understand the site without knowing what text is on an image, it had better either be described in the alt text or be live text with a background image. A 404 message with a hero image that has embedded text doesn't tell the user that they're on a 404 error page unless there's a great alt tag on it.

Put permanent text in high contrast

All instructions, hints, notes, etc. should always be available either as permanently visible text or a tooltip you can return to and read at any point in time. (Default to permanent.) Placeholder text that disappears as soon as the field comes into focus are inaccessible to everyone including sighted users. Placeholders that change location may be passable for visually impaired users but confuse users with cognitive impairment.

All microcopy should appear in high contrast to the background so that users with vision impairment or dyslexia can easily see or read it.

Placeholder text should also be high-contrast unless it's not pertinent, in which case just remove them altogether.

Simple is best

How clever should your microcopy be? It should be exactly as clever as someone with a visual or cognitive disability (or non-native English speaker, etc.) can understand. It has to make sense first. Wittiness should never sacrifice understanding.

Additional resources

• Mailchimp style guide: Writing for Accessibility by MailChimp
• Words Matter: Embracing the Language of Accessibility by Denise Erazmus