We’re always working to make our content more accessible and usable to the widest possible audience.
Writing for accessibility goes way beyond making everything on the page available as text. It also affects the way you organize content and guide readers through a page.
Depending on the audience and country, there may be laws governing the level of accessibility required. At minimum, an accessible version should be available. Accessibility includes people of all mental and physical capacities, whether situational (broken glasses!) or more permanent.
Basics
We write for a diverse audience of readers who all interact with our content in different ways. We aim to make our content accessible to anyone using a screen reader, keyboard navigation, or Braille interface, and to people of all cognitive capabilities.
As you write, consider the following:
- Would this language make sense to someone who doesn’t work here?
- Could someone quickly scan this document and understand the material?
- If someone can’t see the colors, images or video, is the message still clear?
- Is the markup clean and structured?
- Mobile devices with accessibility features are increasingly becoming core communication tools, does this work well on them?
Many of the best practices for writing for accessibility echo those for writing technical content, with the added complexity of markup, syntax, and structure.
Guidelines
Avoid directional language
Avoid directional instructions and any language that requires the reader to see the layout or design of the page. This is helpful for many reasons, including layout changes on mobile.
- Yes: “Select from these options,” (with the steps listed after the title)
- No: “Select from the options in the right sidebar.”
Use headers
Headers should always be nested and consecutive. Never skip a header level for styling reasons. To help group sections, be sure the page title is H1, top-level sections are H2s, and subsequent inside those are H3 and beyond. Avoid excessive nesting.
Employ a hierarchy
Put the most important information first. Place similar topics in the same paragraph, and clearly separate different topics with headings.
Starting with a simple outline that includes key messages can help you create a hierarchy and organize your ideas in a logical way. This improves scannability and encourages better understanding.
Make true lists instead of using a paragraph or line breaks.
Label forms
Label inputs with clear names, and use appropriate tags. Think carefully about what fields are necessary, and especially which ones you mark as required. Label required fields clearly. The shorter the form, the better.
Use descriptive links
Links should provide information on the associated action or destination. Try to avoid “click here” or “learn more.”
When linking a statistical cross-reference, don’t link the statistic. The link text should be either:
- The source’s name, such as a company or the article’s title.
- A phrase or sentence that describes what you’re linking to, such as the subject of the reference article.
Here are some examples.
- Yes: According to Kinsta, WordPress powers 14.7% of the world’s top websites.
-
No: According to Kinsta, WordPress powers 14.7% of the world’s top websites.
- Yes: According to a March 2020 marketing automation report, about 50% of surveyed companies use marketing automation.
-
No: According to a March 2020 marketing automation report, about 50% of surveyed companies use marketing automation.
- Yes: Just because an image is on the internet doesn’t mean you can use it in your blog post.
- No: Just because an image is on the internet doesn’t mean you can use it in your blog post.
Use plain language
Write short sentences and use familiar words. Avoid jargon and slang. If you need to use an abbreviation or acronym that people may not understand, explain what it means on first reference.
Use alt text
Alt text describes the connection of an image to its written content.
Screen readers read the alt text out loud. Search engines use alt text for indexing. Web browsers temporarily display the image’s alt text while the image is loading (permanently if the image doesn’t load).
Try to have alt text for all your images. You should omit alt text for purely decorative images (e.g., alt="").
How you write the alt text depends on the purpose of the image:
- If it’s a creative photo or supports a story, describe the image in detail in a brief caption.
- If the image is serving a specific function, describe what’s inside the image in detail. People who don’t see the image should come away with the same information as if they had.
- If you’re sharing a chart or graph, include the data in the alt text to give people the essential information.
Examples:
- Yes: Horses grazing in front of a monastery in the Himalayas.
-
No: A picture of horses in a field.
- Yes: Acme product’s features and plans with annual pricing.
- No: Acme’s pricing
Each browser handles alt tags differently. Supplement images with standard captions when possible.
Make sure closed captioning is available
Closed captioning or transcripts should be available for all videos. The information presented in videos should also be available in other formats.
Be mindful of visual elements
Aim for high contrast between your font and background colors. Tools in the resources section should help with picking accessible colors.
Images should not be the only method of communication, because images may not load or may not be seen. Avoid using images when the same information could be communicated in writing.