Disallow negative text-indent

Rule from css under compatibility category

What is a trooper!

we have submitted your edit to the community for review! We'll review and make it live on the site in the next few hours, the internet thanks you :).

Browse another section of the knowledge base



Suggest an edit

Cancel

This rule has no content... yet.

Add content to this rule

Or just browse to view rules that have content



 

Negative text indents are typically used to hide text off-screen for accessibility purposes. Often used as part of an image replacement technique, using a negative text indent ensures that screen readers will read the text even though it appears offscreen. Using visibility: hidden or display: none causes the text to be skipped by screen readers, so a negative text indent has been deemed as better for accessibility.

The technique usually involves a very large negative number such as -999px or -9999px, such as:

.mybox {
    background: url(bg.png) no-repeat;
    text-indent: -9999px;
}

The intent of this technique is to allow the background image to show through for sighted users while screen readers receive the inline text instead.

Negative text indents are also problematic when used in a right-to-left language page, as the effect may cause a long horizontal scrollbar to appear. This problem can be fixed by adding direction: ltr to the rule, such as:

.mybox {
    background: url(bg.png) no-repeat;
    direction: ltr;
    text-indent: -9999px;
}

How do I fix this ?

Add direction: ltr; to the css rule:

.mybox {
    background: url(bg.png) no-repeat;
    direction: ltr;
    text-indent: -9999px;
}

Caveat

There are mixed opinions about whether or not negative text indents affect a page's search ranking. Anecdotal accounts seems to indicate Google treats negative text indents as a spam technique, but this has not been confirmed.

Resources

Browse another section of the knowledge base



Signup icon
Ready to see how well your site scores?

Passmarked works best when you have an account. It allows you to keep a dashboard with saved data of the sites you have run through the system, we’ll alert you about important updates and you get access to the Passmarked Slack forum.

Sign up to get started