Tips & Tricks: Improving Digital Accessibility

Links and Link Text

Screen readers are the assistive technology that benefits most from good linking practices. Some examples of best linking practices, through an accessibility lens are:

Make Sure Link Text Is Descriptive

Screen reader technology allows low vision users to navigate webpages, and other digital content, in a variety of ways. One of them is by jumping from link to link without referencing the content around that link. This means linked text should be descriptive enough to stand on its own.

Example Scenario

You want to send readers to ASTHO’s style guide (the bold, underlined text represents a link):

Consult the ASTHO Style Guide here for more information.

Consult the ASTHO Style Guide for more information.

For sighted users, the first example doesn’t present any problems. But if you were relying on a screen reader, you would have no idea what the word “here” is referring to, or where the link might take you. The second example, where the linked text is “ASTHO Style Guide,” is considerably more informative. Often all it takes is a quick rewrite to make your link text accessible.

Remember that everyone benefits from accessible content: more descriptive link text will allow sighted users who are scanning the page to better understand the context of the link and where it will take them.

Avoid Typing Out URLs

Screen readers will read out a URL as phonetically as possible, but it’s not a great user experience and gets tiresome.

Use Links Sparingly

When a screen reader reaches a link in the content, the software will announce it. So, using the earlier example, a screen reader would say, “Consult the LINK ASTHO Style Guide for more information.” When links are used sparingly, this is not particularly disruptive to the reading experience, but over-linking can make it hard for a user to keep track of the content.

Plagiarism?

Many ASTHO employees come from a rigorous academic background, where adding citations whenever possible is the gold standard to avoid plagiarism. That mentality still applies to products like briefs and reports, but a small adjustment in perspective might be helpful when it comes to less formal products, like blog posts.

Think of blog posts as something akin to a printed newspaper article. Journalists will make sure the source of a statistic or quotation is clear but trust that a user can follow what comes from where. Taking this approach will ensure a better reading experience for users who employ assistive technology.

Keep Link Text Consistent

Creating a consistent experience is important for all users, but especially those who rely on screen readers. With that in mind, try to make sure you are not using the same words to link people to different places. For example, if you are writing a blog post and use the text “Health Affairs article” to link users to an article from March 2023, don’t use the same phrase later in your product to send users to a Health Affairs article from September 2021.

Use Links Strategically

It’s important to think about linking from a user’s perspective and to make sure that the link text and the destination make sense together. There are few things more confusing than clicking on a link and wondering if it took you to the wrong place.

Example Scenario

You are interested in sending users to an external resource about why all organizations should have clear, consistent branding standards. To that end, you have written the following sentence: ASTHO created a style guide because the organization recognizes the importance of creating consistent branding content.

Here are two different approaches to linking out to that external resource (the bold, underlined text represents a link):

ASTHO created a style guide because the organization recognizes the importance of creating consistent content.

ASTHO created a style guide because the organization recognizes the importance of creating consistent content.

Both versions adhere to best practices when it comes to linking descriptive text, however the expected results for each are different. In the first example, with the link on “ASTHO created a style guide,” most users would expect to be taken to something related specifically to ASTHO’s style guide, rather than general information. In the second example, where “importance of creating consistent content” is linked, users would not be surprised or confused to land on a general, external resource.

Should the Link Open in a New Window?

Best practices for opening links indicate that all links should open in the same window, unless there is a specific reason to make an exception. Any exceptions are ideally still anchored in improved accessibility, such as avoiding disruption to a multi-step workflow. There are a couple reasons this is considered best practice, but the biggest one is navigational: users who employ screen readers can end up stranded in the new window because they cannot use the Back button to return to their original content, which is an inconvenience at best and disorienting at worst.

Until July 2024 ASTHO’s policy for web-based content stated that if the destination URL is on astho.org, then it should open in the same window. If the destination URL is housed externally, then it should open in a new window or tab. The current policy is that all links open in the same window, regardless of where they are hosted. The only consistent exception on astho.org is podcast episode pages, because same-window links will take users away from the episode while it is still playing.

Inclusive Language

Accessibility is more than just technical requirements—it’s also about content. Descriptive link text is one example. Using inclusive language is another. Being thoughtful about phrasing is an easy way to make sure that all users feel connected to your product. For example, above and below are common terms, but assistive technology can’t determine spatial direction. Instead, use the name of the section/figure/table you’re referring to, that will allow the user to make the connection when they arrive there.

In Table 1: Inclusive Language Suggestions there are some examples of commonly used terms that can be problematic for users who employ assistive technology, as well as suggestions for more inclusive options you can use instead.

Keep in mind that neither of these are full lists—they are common examples to help content creators be more mindful when putting new resources together.

Document Formatting

Avoid using justified alignment in your Word documents. Justified text employs variable kerning (the space between letters) to make sure a long line of text fills the entire length of the row. The spacing inconsistencies can make it harder for users with visual and cognitive disabilities to track a sentence from beginning to end. It can also create complications for users who need screen magnifiers to read content.

Text Styles

Document hierarchy is another important part of accessibility remediation. The built-in font styles, such as headers and lists, are more than aesthetic—screen readers use these styles to navigate Word documents, PDFs, and webpages. This means headers should be used in order (i.e., never skip a heading level). Ordered and unordered lists should be deployed thoughtfully. For example, if you are listing specific steps in a process, use an ordered list. If you are listing ingredients for a recipe, an unordered list is a better fit.

Underlining for Emphasis

Avoid using an underline for emphasis, instead use either bold or italics whenever possible. Underlined text is closely identified with active links, deploying it elsewhere is likely to cause confusion.

Color and Contrast

Formatting and design are an important piece of the puzzle when it comes to color and contrast. To that end, the Web and Content Development teams at ASTHO have a consistent goal of making sure best practices are baked into the development and maintenance of all our digital products.

Color

Do not rely on color alone to convey important information. Users with low vision or colorblindness may have trouble differentiating between different colors or shades, so it is considered best practice to use additional visual markers to signal the presence of important information. For example, in a chart or graph, consider using not just color, but also pattern to distinguish between sets of data.

Contrast

Contrast also plays a critical role in helping users with visual disabilities negotiate the content of a product.

WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. WCAG 2.1 requires a contrast ratio of at least 3:1 for graphics. WCAG Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.

Large text is defined as 14 point and bold or larger, or 18 point (no bold) or larger.

Images and Alt Text

Alternative text (or alt text) allows the content and purpose of an image or informational graphic to be understood by people who use assistive technology.

Use the Alt Text and Long Description Techniques for Image Accessibility resource to learn more about crafting and using alt text.

Some Alt Text Best Practices

• Be succinct. The ideal length is between a few words and a couple short sentences, target 150 characters. The goal is to be brief, but still let users know what important information the image conveys.
• Try to avoid phrases like “image of,” because screen readers will identify all images as a “graphic.”
• The context around the image is just as important as the alt text—if you already have a detailed description of a painting in the body of the document, it is not necessary to repeat all that information in the alt text.
• Not all images convey information. In those cases, add “null” as the alt text—this will let the screen reader know that the image is considered decorative.
• For complex images such as charts or graphs, make sure you communicate what the graph is telling users, rather than just telling them what it looks like. Check out the Graph and Chart Images section of "Alt Text and Long Description Techniques for Image Accessibility" to learn more.