Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML Accessibility Websites Review of Accessible Websites

Stefaan De Reu
Stefaan De Reu
2,429 Points
Posted by Stefaan De Reu
Stefaan De Reu
2,429 Points

the Header1 and using a text-indent of -20000px?

I wish to know why there is not made use of a normal image-tag to place that logo? So why did you use a background url and a negative text-indent?

1 Answer

Taylor Espejo
Taylor Espejo
3,939 Points
Taylor Espejo
Taylor Espejo
3,939 Points

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

read more @ https://github.com/CSSLint/csslint/wiki/disallow-negative-text-indent