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

CSS Accessibility Websites CSS: Part 1

Gina Bégin
PLUS
Gina Bégin
Courses Plus Student 8,613 Points

Is -20000 indenting to hide h1 tag a black hat practice for Google?

I don't think the Treehouse Team would tell us to do something that's not on the up and up, but in the Accessibility course, Nick tells us to indent the h1 tag (which is filled out with the keyword or company name of the site) -20000 to the left so that it doesn't show up on the screen but screen readers can still see it (which I assume spiders can as well, when crawling sites), and so we can put a photo logo in instead (see here: https://teamtreehouse.com/library/accessibility/websites/css-part-1 at 5:50).

I'm wondering if this is a form of cloaking (not sure if I'm using the right term there) and if not, why we would need to do that when we can always put in an alt tag on our photos which are used by screen readers in what seems to be the same way?

3 Answers

It's fine, because the logo and the text would be saying the same thing.

Also, in this case, because he's using a background image on the h1 tag, you can't use the alt attribute, as that is only for img tags.

If anything, Google would find it less useful if there was no text and only an image.

A large amount of links hidden off-screen might be a different story though! :)

Gina Bégin
Gina Bégin
Courses Plus Student 8,613 Points

Thanks, Iain Simmons! I need to go back and look closer at the other part you brought up about a background image on the h1 tag; I didn't know you could add an image with text tags!

You know, he said that this is just one of the techniques so I think that you can do the same thing with the alt attribute which is pretty easy right now, but he wanted to show something new to us.

Gina Bégin
Gina Bégin
Courses Plus Student 8,613 Points

True, but I wanted to know if this specific tactic would negatively affect our sites as a potential "Black Hat" tactic. I'm interested because I wouldn't want to suggest or use this technique if that were the case, and I think it might be useful for others to know as well — for protection of our hard work! :)

Nope, I don't think it's a "black hat" technique, because it's still visible in your code so you are not doing anything bad.

Luiz Felipe Soares
Luiz Felipe Soares
13,840 Points

maybe today you could use - aria-label=""