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 trialRobert Lin
2,478 PointsWhat 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
24,793 PointsSome 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.
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.
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
- Use on every image on your site
- Describe what the image represents
- Use keywords where applicable
- Make sure each image has a unique alt tag
Don’ts
- Don’t stuff all of your keywords into the tag to “game” the search engine — This is called alt spam
- 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.
Jesus Mendoza
23,289 Pointsalt is the alternate text to be displayed if the image couldnt be loaded, so, instead seeing the image you'll see "Facebook Logo".
Shaun Kelly
35,560 PointsHi 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
2,478 PointsThanks 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.
Robert Lin
2,478 PointsRobert Lin
2,478 PointsHey, 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
24,793 PointsJustin Black
24,793 PointsGenerally 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
2,478 PointsRobert Lin
2,478 PointsOk I think I understand. Thank you!
Justin Black
24,793 PointsJustin Black
24,793 PointsNot 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.