Clients have expressed to me that one of their biggest struggles with accessibility is finding the time to do it. Amidst all the responsibilities filling our busy days, it can seem daunting to add something else to the pile.
I get that, and the truth is that web accessibility takes extra time, energy, and resources. There are a lot of considerations that go into creating an accessible website — captions, colors, focus management, fonts, forms, headings, images, landmarks, inks and lists, motion, navigation, spacing, styling, transcripts, text equivalents — and the list goes on and on. This is doubly the case when accessibility needs to be retrofitted after a website is already live. Fixing accessibility barriers on a production website is especially expensive and time consuming.
However, there is good news. Even though upfront and after-the-fact costs of accessibility are significant, the ongoing effort of integrating accessibility into daily creative processes doesn’t need to be overwhelming. By incorporating a few steps into our normal workflow, we can mitigate much of the cost of creating and maintaining accessible websites. As we practice these techniques, we become more adept at producing accessible web content, designs, pages, and tools. Eventually, we can reach the point where accessibility is second nature and ignoring it is out of the question.
In this article, I want to go over some fundamental practices in creating accessible content. This is by know means an exhaustive list, but if you spend time writing blog posts, documents, product copy, event descriptions, and other content for websites, taking these considerations to heart will go a long way towards ensuring your work is accessible. These guidelines can also be applied in other contexts like Microsoft Word, Google Docs, and PDFs.
Use headings to convey page structure
Headings on web pages are more than big bold statements that visually denote the start of a new section. When set up correctly, their underlying HTML communicates the structure of the page to assistive technologies. Screen readers expose hierarchical lists of the headings on a page so their users can explore and navigate its organization. The level of each heading is important because it tells screen readers how its section fits into the overall page. Here are some items to keep in mind when writing headings.
Use semantic HTML tags for headings. This will usually happen automatically in most website editors and content management systems if you choose an option like “Heading 1”, “Heading 2”, or “Heading 3” for heading text. These typically map to the
h1,h2, andh3, etc. HTML tags.A page should have only one top-level heading — a.k.a. “Heading 1”,
h1tag. This will almost always be the title of the page, and it should be used to briefly summarize the purpose or content of the entire page.When writing copy for a widget or component on a page, avoid giving it a top-level heading, as chances are this is specified elsewhere. An exception might be when the heading for your copy will appear as the first element on the page, but this will vary between websites and content editing tools.
- Observe the hierarchy of heading levels. That is, an
h1tag should only containh2tags directly beneath it,h2tags should only directly containh3tags, and so on. Do not skip heading levels, like putting anh4tag directly beneath anh2. Sometimes this is done in an attempt to use a certain size text for the heading, but this will mess up the page’s structure. Headings of any level can be styled as needed to achieve the desired text size or weight.
As an example, this article contains a single top-level heading coded with an h1 tag containing the article title. All other headings are secondary and are delineated with h2 tags.
Write descriptive link text
Writing descriptive link text is crucial for web accessibility because it helps users understand the purpose and destination of a link. There are several reasons why descriptive link text is important.
Screen reader compatibility: Descriptive link text provides screen reader users with meaningful information about the linked content, allowing them to decide whether or not to follow the link. Screen readers can also list all links on a web page to help users explore the page efficiently. When links have vague or repeated text such as “Click here” or “Read more,” they lack meaning, and this feature loses much of its usefulness.
- Context and understanding: Descriptive link text adds context to the link, helping all users, including those with cognitive disabilities, to better understand the purpose of the link and where it leads. This is essential for creating a user-friendly experience.
- Keyboard navigation: Users who navigate websites using a keyboard or other input devices benefit from descriptive link text. Clear and meaningful link text enables efficient keyboard navigation, making it easier for users to move through a page and access relevant information.
- Mobile Devices: On mobile devices, where screen real estate is limited, users may rely more on the link text to decide whether to follow a link. Descriptive link text becomes especially important in this context for providing quick and accurate information.
For instance, the text of this link reveals nothing of its purpose or destination. However, if you want to learn more about Pedal Point Solutions, the text of the second link provides clues about what sort of information you will find on the target page in the context of its surrounding content.
Create great alternative descriptions for images
Alternative descriptions, often referred to as “alt text” enable users who cannot see images understand their meaning in the context of a web page. Without alt text, blind and visually impaired users will likely miss important aspects of part or all of a page. What’s more, screen readers typically announce an image’s URL or file name when alt text is not present, which is almost always unhelpful and confusing.
Writing good alternative descriptions for images is something of an art that requires practice. I share a strategy for writing effect alt text in this article, but here are a few fundamental principles to keep in mind.
- Good alt text is clear. It conveys an image’s content and function in a way that a person who cannot see it will understand.
- Good alt text is concise. Screen reader users appreciate brief descriptions that quickly communicate the most important and relevant aspects of an image.
- Good alt text is contextual. Image descriptions should take into account their surrounding context and their purpose within it. Concise alt text is rarely able to exhaustively describe all the content and meaning of an image. Instead, it supports and complements the overall message of a web page by highlighting the salient information contained in the image.
Consider the image at the start of the “Write Descriptive Link Text” section of this post. Setting its alt text to “three doors” would not provide enough context or detail. However, “three closed bright red doors in close proximity to one another, each labeled HERE and having two small window panes above it, surrounded by dull off-white framing and a nondescript gray wall” is too verbose and obscures the image’s context and purpose, which is to illustrate the problems with vague link text.
The alt text set for this image is “A set of three adjacent red doors, each closed and labeled ‘HERE'” which offers enough context to compliment its associated content without overwhelming the user with irrelevant details or spelling out the exact meaning of the image. (Blind people can appreciate metaphor just as much as sighted people.)
Tips for writing accessible copy
Having discussed ways to make a few key elements within copy accessible, let’s wrap up this post with some guidelines to ensure that the content itself can be read and understood by as many people as possible.
- Be clear and concise. Keep your language simple, clear, and succinct. Avoid unnecessary jargon, idioms, and complex terminology that might be difficult for some readers to understand.
- Organize content for quick and easy reading. Break up “walls of text” into shorter paragraphs, bulleted or numbered lists, or subsections. Use headings to clearly delineate and organize content.
- Write out each acronym the first time it is used. Readers may not know the meaning of an acronym. It is important to write out the words in an acronym when it appears on a web page. This should be followed by the acronym in parentheses. For example, “Americans with Disabilities Act (ADA).”
- Do not write in all caps. TEXT IN ALL CAPS IS VERY HARD TO READ. Avoid it except for acronyms.
- Use sentence case for web page titles and headings. We are used to reading sentences, and it Actually Takes Longer and More Effort to Read Title Case. Title case is prone to error Because authors Are prone To capitalize The wrong words. It also obscures proper nouns and does not translate well, as other languages have different rules for capitalization. Additionally, sentence case communicates friendliness and avoids the Authoritative Tone of Title Case.
- Use inclusive language. Make sure your word and phrase choices do not exclude readers with various disabilities. For instance, encountering the instruction “Click the big yellow button at the top right of the page to subscribe.” will probably frustrate a blind visitor who cannot see the color, size, or relative position of the button. A more inclusive wording might be “Press the ‘Subscribe’ button near the beginning of the page.” This version eschews vision-centered language in favor of focusing on the content itself.
Personally, I try to avoid the word “click” as it can convey an assumption that the user is browsing with a mouse. Instead, I prefer the terms “follow” for links and “press” for buttons.
Thanks to Laurie Cameron-Back for her informative presentation Neuroinclusive Content Design at axe-con 2024, which directly inspired some of these recommendations.
Conclusion
Integrating these basic practices into your content creation process will help you write more accessible web copy. I encourage you to begin using these techniques the next time you create content for your website. It will not take long before they become natural for you, and your users will thank you for it.