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.

===

ACCESSIBLE WEBSITES: Test Your Content for Readability

Happy smiling little girl reading interesting book in the park.

How readable is your website?

Users with learning disabilities, reading disorders, or who speak English as a second language may have a difficult time understanding your content.

Typical factors that affect readability include:

  • Average sentence length
  • Syllable count
  • Percentage of multi-syllable words
  • Average word length
  • Familiarity of words
  • Complexity of sentences

For better readability, follow these basic tips:

One idea.
Be sure each paragraph focuses on one idea. This makes content easier to remember and digest.

Shorter line length.
Design for a line length between 45 and 75 characters. This makes the text easier to read on the screen. If the line is too long, folks with cognitive issues may lose focus and stop reading.

Simple language. Complex language can pose problems for users, especially those with cognitive disabilities or who aren’t fluent in the language.

Tools for testing readability

Hemingway Editor
>> http://www.hemingwayapp.com

Screenshot of Hemingway Editor Home Page

The Hemingway Editor is like a spellchecker, but for style and readability. This free online tool reports your content readability issues by highlighting content sections in different colors.

Readable
>> https://readable.io

Readable Logo

Readable.io uses tried and tested readability algorithms, as well as proprietary scoring systems, to analyze the readability of your website or text and recommend ways to improve upon it. This is a paid service, but you can take the tool for a test drive by requesting a demo of how it works.

===

WEBSITE ACCESSIBILITY TESTING & REMEDIATION SERVICES: Mary Gillen is an experienced Website Accessibility Compliance Auditor and Remediator. She can test your website to determine if it meets accessibility standards:

WCAG 2.1: 312 checkpoints covering A, AA and AAA W3 accessibility guidelines
Section 508: 15 US federal guidelines covered by 59 accessibility checkpoints

Find out more about Mary Gillen’s Accessibility Testing & Remediation Services: Websites, PDFs, Office Docs & Videos

===