Writing for Web Accessibility
A big part of accessibility is writing accessible content. It doesn’t just help people with disabilities consume your content, but increases usability for all audiences.
Every time you create content, consider these elements. If you have an editorial/quality assurance checklist that you are already following, make sure these elements are included.
Use Plain Language
Clear content is accessible content. If your writing is concise and simple, it will help a wide variety of people including non-native English speakers or those with cognitive disabilities.
Plain language best practices are about word choices like avoiding jargon, and the using active voice. It also includes chunking content, writing short sentences, and structuring your content clearly.
Add Headings and Titles
Headings and subheadings add structure and meaning to pages. It gives a title to each section allowing users to quickly summarize the section and skim a page.
For those using screen readers, headings provide an easy way to navigate through page content saving the user time. Headings should describe the content of the section as clearly as possible.
To create accessible headings, be sure to nest headings in the correct order — Headings 3s under Headings 2s, for example. There should only be one Heading 1 on a page, usually reserved for the page title, not body copy.
Also, headings must be created using the built-in style formatting and not through font styling. Font styles like bold, italics, underline, color, or strikethrough may provide strong visual cues, but screen readers can’t convey font styles. So never use font styles alone to convey importance or meaning.
Example:
Page title: Accessibility of Microsoft Products (Heading 1,
)
MS Word (Heading 2,
)
Introduction (Heading 3,
)
How-To (Heading 3,
)
MS PowerPoint (Heading 2,
)
Page Titles
Similar to providing clear and concise section headings, each web page must also have a short, descriptive page title that describes the overall content on the page. The page title should distinguish it from other pages.
Write Meaningful Link Text
It is important to write meaningful link text -- “click here” doesn’t tell the user where they’re going and what they might expect to find.
The link should be understandable even when it is outside its original context. This is especially important for screen readers that may use a “Link List Tool,” which provides users with a list of links on a page without additional context.
To create meaningful link text:
- Avoid phrases like “click here” or “learn more.” Imagine using the Link List Tool and ending up with a list of links that all just say “click here.” It would cause major confusion and ultimately cause that user to bounce off the page.
- Whenever possible, avoid including the full http web address and instead hyperlink meaningful text. Screen readers read each character aloud; so long complicated URLs would be annoying.
- Make sure to indicate if a new window will open upon clicking a link to keep users from becoming disoriented. Drupal, automatically adds an outgoing link indicator to URLs outside of the ACF environment. If the indication is not automatic, simply write (opens in new window) beside the link.
- Let the user know if a link leads to a download by putting the file type in parentheses in the link, such as (PDF), or by including the word "Download."
-
DO THIS: For more information, read the latest trends on childhood obesity.
-
NOT THIS: For more information on the latest trends on childhood obesity, click here.
-
Add Alternative Text
Alternative text, or "alt text", describes the content of non-text content like images, charts, graphs, buttons, or other design elements. Screen readers can read alt text to the user so they can understand the non-text content.
- When setting alt text, think about what the purpose of the image is. Is it meant to convey information or simply be decoration on a page?
- For decorative images, add empty quotation marks to the alt text field (“”). These signal to a screen reader that the image does not add additional context or meaning and it can be ignored.
- If the image conveys information, you need to add alt text. There is no need to write “picture of” or “image of”, simply write what the image shows clearly and concisely. Alternative text should be brief, but adequately provide the information or function of the image. Imagine you could not see the image you’ve included. What information about the image would you want to know?
- For complex images, like infographics, the image should be described in context in surrounding text with a short alt text description.
- When in doubt, please refer to a text alternative decision tree or contact us.
Example: Alt text for the image below would be “Administration for Children and Families logo.”
Example: Alt text for the image below would be “View of Manhattan and the Chrysler Building.”
Consider Your Search Engine Optimization
A focus on accessibility can also positively impact your SEO making it easier for search engines to find and index your content. Proper use of meaningful links, headings and titles, and alternative text can all help boost your SEO.
Link text helps inform search engines where hyperlinks are directed and give you more opportunities to use keywords. For example, “See more ways states fund child support programs” lets search engines identify keywords “child support”, “child”, or “support”. The more keywords you use, the higher your SEO potential!
Descriptive headings and alternative text have similar benefits as meaningful link text. By providing descriptive alt text, search engines will be able to identify that your site includes relevant images that support its content and reward you for its relevancy.
Resources
- W3C Web Accessibility Initiative — Tips of Writing for Web Accessibility
- The Writer's Guide to Making Accessible Web Content
- Accessibility evaluation for web writers