Truncating text and making it accessible

Truncating text for accessibility involves methods like CSS and JavaScript, ensuring no essential information is lost and maintaining readability for all users.

To create accessible truncated text, it’s crucial to consider both the visual presentation and accessibility implications. Here are key points and techniques to achieve this.

CSS techniques for truncation

For single-line text truncation, you can use the text-overflow: ellipsis; property along with overflow: hidden; and white-space: nowrap;. For multi-line truncation, -webkit-line-clamp can be used, though it’s not fully supported across all browsers.

CSS for single-line text truncation

For a single line, the code may look like this:

.truncateText {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Here’s a breakdown of each property used:

• white-space: nowrap;: This property prevents the text from wrapping to the next line. It ensures that the text stays in a single line, which is necessary for the text truncation to work correctly.
• overflow: hidden;: This property hides any text that overflows the boundaries of its container. By hiding the overflow, it allows the text-overflow property to work as intended.
• text-overflow: ellipsis;: This property specifies how overflowed content that is not displayed should be signaled to the user. The ellipsis value causes the text to be clipped and an ellipsis (...) to be displayed at the end of the container, indicating that there is more text that is not visible.

To make shortened text more accessible, employ the technique that shows the rest of the text when the user hovers or touches.

CSS for multi-line text truncation

For a multi line, the code may look like this:

.truncateMultilineText {
    -webkit-box-orient: vertical; 
    -webkit-line-clamp: 4;
    display: -webkit-box;
    overflow: hidden;
}

Here’s a breakdown of how it works:

• -webkit-box-orient: vertical;: This property is used to specify the direction of the flex container. Setting it to vertical means that the flex items (in this case, the lines of text) are stacked vertically. This is a necessary condition for -webkit-line-clamp to work properly.
• -webkit-line-clamp: 4;: This property limits the content to a specified number of lines. In this case, it’s set to 4, meaning that the text will be truncated after four lines. If the content exceeds this limit, it will be cut off, and an ellipsis (…) will be shown to indicate that there is more content.
• display: -webkit-box;: This property sets the display type of the element to a flex container. It’s necessary for the -webkit-line-clamp property to function correctly. The -webkit-box value is a flex container that lays out its children in a single line or column, depending on the flex-direction property.
• overflow: hidden;: This property is used to specify what should happen if the content overflows the element’s box. Setting it to hidden means that any content that exceeds the element’s boundaries will be clipped and not visible. This is crucial for ensuring that the text truncation works as expected, as without it, the text might overflow its container.

JavaScript for truncation

For dynamic truncation, especially when dealing with user-generated content, JavaScript can be used to truncate text based on a specified maximum length. This method allows for more control over the truncation process and can be combined with a Read more button to toggle between truncated and full content.

There are three methods of truncating text: by words, by characters, and by truncating in the middle.

Truncating text by words

Truncating text by words is the method of truncating text, but keeping all words untruncated.

function truncateWords(str, numberOfChars) {
  const amount = typeof numberOfChars === 'number' ? numberOfChars : 50;
  const cut = str.indexOf(' ', amount);

  if (cut === -1) {
    return str;
  }

  return `${str.substring(0, cut)} [...]`;
}

The [...] could actually be replaced by <span role="img" aria-label="ellipsis">...</span> to make three dots more friendly for screen reader users.

By the way, a single ellipsis represents one group of three dots, whereas several ellipses represent two or more groups of three dots.

Truncating by characters

Truncating by characters is the method of truncating text after a specified number of characters.

function truncate(str, numberOfChars) {
  return str.length > numberOfChars ? str.substring(0, numberOfChars) + ' [...]' : str;
}

Truncating in the middle

Truncating in the middle is the method of truncating text in such a way that we keep fragments of the beginning and end of the text.

Example: This text [...] and this ends here.

function truncateInTheMiddle(text, startChars, endChars, maxLength) {
  let start;
  let end;
  const charsAtTheBeginning = startChars || 70;
  const charsAtTheEnd = endChars || 70;
  const maximumLength = maxLength || 120;
  const content = text.trim();

  if (maxLength === -1) {
    return text;
  }

  if (content.length > maximumLength) {
    start = content.substring(0, charsAtTheBeginning);
    end = content.substring(content.length - charsAtTheEnd, content.length);

    return `${start} [...] ${end}`;
  }

  return text;
}

How do JavaScript solutions differ from CSS truncation techniques?

JavaScript solutions for dynamic content differ from CSS truncation techniques primarily in their performance, flexibility, and ability to manipulate content dynamically at runtime.

While CSS is effective and simple for static text truncation, JavaScript provides more flexibility and control for dynamic content manipulation, allowing for more complex and interactive truncation behaviors. The choice between CSS and JavaScript for truncation is based on the content’s specific requirements and the desired user experience.

Flexibility and dynamic content manipulation

• JavaScript allows for the manipulation of the Document Object Model (DOM), enabling the insertion, deletion, or updating of nodes at any time. This dynamic manipulation capability means JavaScript can adjust content based on user interactions, screen size changes, or other dynamic conditions.
• CSS, while powerful for styling and layout, primarily manipulates the rendering of documents rather than their content. CSS rules apply to selectors/tags upon rendering and do not inherently change the content of the document. However, modern CSS has evolved to offer some dynamic capabilities, such as content manipulation through pseudo-elements, but these are generally limited compared to JavaScript’s capabilities.

Performance considerations

• CSS truncation techniques, being built into the browser’s rendering engine, typically offer better performance for static truncation needs. CSS properties like text-overflow, white-space, overflow, and -webkit-line-clamp can efficiently handle text truncation without additional computational overhead.
• JavaScript solutions, while more flexible, can introduce performance considerations due to the computational work required to manipulate the DOM dynamically. However, for scenarios requiring dynamic truncation based on user interactions or complex conditions, JavaScript provides the necessary tools to achieve these effects.

Use cases

• CSS truncation techniques are well-suited for static content where the truncation rules do not need to change based on dynamic conditions. They are ideal for single-line truncation or multi-line truncation up to a limited number of lines (using -webkit-line-clamp), providing a straightforward solution for indicating overflow content with ellipses (…).
• JavaScript solutions excel in scenarios requiring dynamic adjustment of truncation based on various conditions, such as user interactions, screen size changes, or content updates. They allow for more complex truncation logic, such as adjusting the number of lines shown based on viewport width or implementing custom read more functionality that dynamically adjusts content visibility.

Accessibility considerations

• Ensure that truncated text is accessible to all users: the WCAG guidelines recommend using scalable fonts, consistent margin, padding, and line-height values, and providing intuitive ways to control text visibility, such as a Read more button for expanding truncated content. Test your changes with assistive technologies. This ensures that everyone can read the truncated text with the technology they rely on, such as a screen reader or speech recognition software.
• Maintaining contrast on hover and focus state: when text color changes upon interaction (e.g., hover or focus states), it’s essential to ensure that the contrast remains sufficient. WCAG guidelines state that text in all interactive states must meet the same contrast requirements and should be evaluated independently.
• Contrast for non-text elements: WCAG 2.1 extends contrast requirements beyond text to include graphical objects and user interface components. This means that elements like buttons or icons that might be associated with truncated text (e.g., Read More links) also need to meet minimum contrast ratios against adjacent colors.

Alternatives to truncation

Consider using soft hyphens (­) for long words to improve readability and comprehension. This approach is particularly useful for English-language content and can be combined with the CSS hyphens property for automatic hyphenation.

Avoid information loss

Truncating text can sometimes lead to information loss, making it difficult for screen reader users to understand the context. Ensure that truncation does not remove essential information, and consider providing a way for users to access the full content.