SiteLint documentation and guidelines

Don’t use the CSS text-indent to hide text

Description

This rule flags any text-indent value that shifts content far outside the viewport (e.g. text-indent: -9999px), an outdated technique for visually hiding content that harms both keyboard and screen reader accessibility.

Context

Large negative text-indent values were once a common way to hide text while keeping it available to screen readers. This approach is flawed: screen reader focus moves with the indented content, taking it off-screen and out of the visible area – making the element unreachable for both sighted keyboard users and assistive technology users.

This rule passes when no text-indent declaration pushes content outside the viewport.

How to fix it

Replace the text-indent hack with a visually-hidden utility class that keeps content within the viewport and accessible to assistive technologies. A well-established approach uses clipping and zero dimensions rather than off-screen positioning: 

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

See the Bootstrap visually-hidden mixin for a production-ready reference implementation.

Rule metadata

  • Audit: Accessibility
  • Standard: SiteLint
  • Level: Best Practice
  • Success Criteria: Not applicable
  • ID: incorrect-technique-for-hiding-content