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 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;
}

Accessibility considerations

Ensure that truncated text is accessible to all users, including those with visual impairments. 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.

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.