Text fragments (or scroll-to-text fragments) are hyperlinks that point to arbitrary text within a web document. They allow authors to use syntax within a URL to send readers to a specific part of a page.
For example, let’s say you’re writing an article about — well, text fragments. You want to link to the Mozilla Developer Network’s page on the correct syntax text fragments, but the page is fairly long. Instead of linking to the top of the page, you can simply link to the relevant sentence.
URL text fragments are relatively flexible and robust. Unlike document-level fragments, text fragments don’t rely on an identifier from the web page’s author. The hyperlink simply points to words on the page.
And if the content changes and the cited text is removed, the link isn’t invalid. If the text isn’t there, the user will be sent to the top of the page (just as if you hadn’t used a text fragment in the first place).
While text fragments aren’t appropriate for every hyperlink, they’re useful for creating more effective content. Here’s what content creators need to know.
How Text Fragment Links Improve Accessibility
Text fragments can benefit all users, but they’re particularly advantageous from an accessibility standpoint.
Internet users rarely read every word of text, and that doesn’t change when they use assistive technologies: People who use screen readers (software that converts text to audio or braille) usually don’t listen to the entire output of every web page they visit. Instead, they search for the info they need.
When you use text fragments, screen readers can immediately output the relevant text. Likewise, users with attention disorders and memory limitations can find the cited text, read it, and return to the original content without much trouble.
Many browsers will automatically emphasize text fragments by highlighting them, which further improves readability and navigation. Google’s search engine also uses text fragments frequently in its Featured Snippets feature.
However, text fragments are not universally supported. Currently, Mozilla Firefox doesn’t support them — but users can install extensions to enable the functionality. And as we discussed earlier, text fragments don’t break hyperlinks; if a browser doesn’t support the text fragment syntax, the hyperlink sends them to the beginning of the page.
How to Use Text Fragments (and Other Ways to Improve Hyperlink Accessibility)
The basic syntax of a text fragment is quite simple. A hash symbol introduces the syntax:
https://example.com#:~:text=[prefix-,]textStart[,textEnd][,-suffix]
For a specific breakdown of the syntax, read MDN Web Docs' Text Fragments page. Here’s how a text fragment link appears in practice:
https://www.boia.org/blog/quick-guide-to-accessible-hyperlinks#:~:text=importance%20of%20hyperlinks
That link points to our blog on accessible hyperlinks, emphasizing the text “importance of hyperlinks.”
But while text fragments can be helpful for accessibility, they’re not always appropriate. You should only use text or document fragment links when you have a good reason to send users to a specific part of the page — for example, you’re writing a blog that links to a 1,000-word article that isn’t related to the subject of the original post, but you want to show your source for a quote.
And while you’re reviewing your hyperlinks, make sure you avoid common accessibility issues:
- Write clear, consistent hyperlink text that describes the purpose of the link. Users should be able to read the text and know exactly what will happen when they activate it.
- Audit your content for empty hyperlinks (hyperlinks without link text) and redundant hyperlinks (links that appear next to other hyperlinks that point to the same address).
- Make sure your hyperlinks are visually distinct from other content. Don’t use color alone; leave hyperlinks underlined or make them obviously different from other text in another way.
- Test every link for keyboard accessibility.
- If your website uses hover links, make sure that your hover links are accessible for keyboard users.
Remember, hyperlinks are important elements. Screen reader users may search for hyperlinks before reading any of your other content — so accurate link text and keyboard accessibility are absolutely essential.
If you’re ready to build an accessibility initiative, we’re here to help. Get started with a free graded web accessibility report or send us a message to connect with a subject matter expert.
