Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML How to Make a Website Creating HTML Content Build the Footer

Robert Lin
Robert Lin
2,478 Points

What exactly is alt supposed to do? Why do we need to set it empty at times and not at other times?

difference between alt="" and alt="Facebook Logo"

4 Answers

Justin Black
Justin Black
24,266 Points
  1. Some searchers turn graphic functionality off so a page will load faster if they have a slower connection speed. When this is the case, the image will not appear, but rather the image’s alt tag will be view-able.

  2. It’s used for blind and visually impaired readers who access a page using audio-based browsers, or screen readers. — These devices read the page aloud so the user can hear the content on the page. If there is no alt tag, the images will be skipped and important information could be lost.

  3. Universal Search — This has been around for a few years, and is still evolving. Universal search uses alt tags and other information to display the images of your website in the “blended results”. These blended results feature images, video, news and regular listings in the search results. The search engines’ algorithm takes alt tags into account when displaying these mixed results.

Alt Tag Tips While it is important to realize that the alt tag should be used for all of the images on your site, you should not over use this tool. Abusing this tag can have serious consequences when it comes to the search results. Below are some do’s and don’ts to creating effective alt tags.

Do’s

  1. Use on every image on your site
  2. Describe what the image represents
  3. Use keywords where applicable
  4. Make sure each image has a unique alt tag

Don’ts

  1. Don’t stuff all of your keywords into the tag to “game” the search engine — This is called alt spam
  2. Don’t add alt tags for things like buttons and images smaller than 10 x 10 pixels. These items are not necessarily important to search, so you don’t have to label them.
Robert Lin
Robert Lin
2,478 Points

Hey, thanks for such a thorough response Justin. I appreciate the time you took to write all that. I've got one question. Why isn't it important to label buttons? Because how would a visually impaired person be able to click or check it if they don't know that it's there

Justin Black
Justin Black
24,266 Points

Generally speaking, while your button may be of an image, it's not going to be an img element. It'll be a button element or input and as such, a screen reader can and will read it's value instead.

Robert Lin
Robert Lin
2,478 Points

Ok I think I understand. Thank you!

Justin Black
Justin Black
24,266 Points

Not a problem, happy to help. In this industry, it's actually common practice to care about the screen readers and realizing that each one behaves differently it's smart to test in multiple.

The #1 used screen reader however still remains to be JAWS. But if you get serious about development and/or front end work, you might consider purchasing JAWS and perhaps a few others as well so that you can test and ensure that anything you build is in fact usable.

Jesus Mendoza
Jesus Mendoza
23,274 Points

alt is the alternate text to be displayed if the image couldnt be loaded, so, instead seeing the image you'll see "Facebook Logo".

Hi Robert, The alt attribute is used to translate images to the visually impaired and also if you run your website through w3c validator that contains an image without an alt attribute it will not pass

Robert Lin
Robert Lin
2,478 Points

Thanks for such a quick reply guys! I have a good idea of what it does now. Thank you all for your support; really appreciate it.