• Success Criterion 1.4.4
  • Conformance level AA

JavaScript Text Truncation That Deletes Content on Zoom

1.4.4 — Resize Text

Scenario

Setting

A job board's application form

What’s wrong

JS that measures text and truncates with ellipsis based on pixel budgets (content lost, no expansion).

Example 

function truncateTitle(el) {
  while (el.scrollWidth > 200) {
    el.textContent = el.textContent.slice(0, -1);
  }
  el.textContent += "...";
}
<!-- characters are permanently deleted from the DOM based on a fixed pixel budget -->

Why it matters

An applicant reviewing their submitted job title before sending it sees it permanently cut off and can't verify the full text they wrote.

How to test

Set zoom to 200% and check any auto-truncating text (ellipsis): if JS measures pixel width and cuts content that was previously visible, it fails.

How to fix

Use CSS text-overflow: ellipsis for a visual-only truncation, keeping the full text in the DOM and available via title or tooltip.

.job-title { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

Outcome

The applicant hovers the truncated title and confirms the full text they submitted is exactly right.

Who is affected

Low-vision users, since the actual job title text no longer exists in the page at all, not just visually hidden.

Learn more

Related scenarios