ACCESSIBLE WEB: Using Text Fragments for Better Accessibility

Abstract color fragments

In his article Web’s Most Underutilized API: Text Fragments, senior software QA engineer Luc Gagan  explores the underutilized power of text fragments, a little-used yet formidable browser feature that enables users to link straight to particular lines inside a web page.

Why are text fragments important for accessible website content?

Luc explains how text fragments can improve web accessibility in several ways:

“Specific Referencing: Text fragments allow for the direct highlighting of specific pieces of content. This can be incredibly useful for people using assistive technologies, such as screen readers, as it enables them to directly access the relevant section of content without having to navigate through the entire page.

Content Contextualization: By using text fragments, users are able to provide more context when sharing links, which can assist those who rely on contextual information to understand the content.

Improved Navigation: They can also help improve navigation within a page. For example, if a page doesn’t have a proper heading structure or lacks a table of contents, text fragments can serve as an alternative way of guiding users to specific sections.

Efficient Reading: For users with cognitive or visual impairments who might find reading a long article challenging, text fragments allow them to go directly to the most relevant part, saving time and reducing cognitive load.

Helpful for User Testing and Feedback: Text fragments can be used when testing accessibility or providing feedback on specific web content, making it clear exactly which part of the page is being referred to.”

How to create a text fragment

Let’s say we want to create a text fragment that links to the sentence “How do you make this type of schematic accessible to the largest number of website visitors?” as indicated in the screenshot below.

Content on a web page that can be linked by a text fragment

PROCESS:

You create the URL’s text fragment, which points you straight to a certain passage of an article – in this case, a sentence in my blog post about accessible talking flow charts.

Here’s how to set up the text fragment URL:

Text fragment code explanation in color

Test this text fragment:
https://accessiblewebsiteservices.com/accessible-diagrams-talking-flow-chart/#:~:text=How%20do%20you%20make%20this%20type%20of%20schematic%20accessible%20to%20the%20largest%20number%20of%20website%20visitors?

Result: The sentence is highlighted on the article page, as seen in the screenshot below:

Text fragment test URL result

Read more about text fragments and see additional examples in Luc’s article Web’s Most Underutilized API: Text Fragments

===

Instant Download!

PDF Accessibility Remediation How to Fix 40 Common Errors

Whether you have limited experience with the PDF remediation process, are expanding your knowledge on how to remediate PDFs, or simply need a resource that can help remind you how to fix a frustrating error, the info provided in this e-book can help.

Download now.

===