Difference between revisions of "Learn/Alt-Text-Helps-People-and-Search-Engines"
MarkDilley (talk | contribs) |
(migration import) |
||
|
(15 intermediate revisions by one other user not shown) | |||
| Line 4: | Line 4: | ||
| Header = Alt%20Text%20Helps%20People%20and%20Search%20Engines | | Header = Alt%20Text%20Helps%20People%20and%20Search%20Engines | ||
| Subhead = Why Alt Text Matters for SEO and People | | Subhead = Why Alt Text Matters for SEO and People | ||
| − | | Bitly = http:// | + | | Bitly = http://www.aboutus.com/alt-text-helps-people-and-search-engines/ |
| Date = January 11, 2011 | | Date = January 11, 2011 | ||
}} | }} | ||
| − | < | + | <div style="float:right; margin-left:1em;"><YouTube>_K3gBqzGVwg</YouTube></div> |
| − | + | <big>A picture may be worth a thousand words, but an image on your website won't be worth anything to search engines or a vision-impaired person if it doesn't have alt text.</big> | |
| − | ---- | + | |
| + | ''[http://www.aboutus.com/alt-text-helps-people-and-search-engines/ ... read more]'' | ||
| − | [ | + | <big>''Note: This article has been moved to our new blog at [http://www.aboutus.com/alt-text-helps-people-and-search-engines/ www.AboutUs.com/alt-text-helps-people-and-search-engines/].''</big> |
| − | Technically speaking, alt text is the alt attribute of the image tag. Its code looks like this: | + | <!--==What is Alt Text?== |
| + | <br /> | ||
| + | [[Glossary/Alt-text|Alt text]] (short for "alternative text") gives people and search engines a way to "read" images or audio clips on a website. Technically speaking, alt text is the alt attribute of the image tag. Its code looks like this: | ||
<nowiki><img alt="This alt text describes what the image is" src="http://whereimagelives.jpg"/></nowiki> | <nowiki><img alt="This alt text describes what the image is" src="http://whereimagelives.jpg"/></nowiki> | ||
| Line 24: | Line 27: | ||
---- | ---- | ||
<big>Search engines are blind when it comes to images, and so are some people. At least 10 percent of Web surfers use assistive technology to help them browse websites. Make sure your images can be seen by everyone.</big> | <big>Search engines are blind when it comes to images, and so are some people. At least 10 percent of Web surfers use assistive technology to help them browse websites. Make sure your images can be seen by everyone.</big> | ||
| − | + | <br /> | |
Visually impaired people use [[Wikipedia:Screen reader|screen readers]] that read text on websites to them, and hearing-impaired people use software to tell them what an audio clip is about. When you take the time to find and include an image on your website, including descriptive alt text ensures it's visible and adds value for '''all''' your visitors. | Visually impaired people use [[Wikipedia:Screen reader|screen readers]] that read text on websites to them, and hearing-impaired people use software to tell them what an audio clip is about. When you take the time to find and include an image on your website, including descriptive alt text ensures it's visible and adds value for '''all''' your visitors. | ||
| Line 40: | Line 43: | ||
[[Image:AltTextHoverExample.png|right|250px|A picture of hovering my mouse over an image to see its title text]] | [[Image:AltTextHoverExample.png|right|250px|A picture of hovering my mouse over an image to see its title text]] | ||
| − | Title text is similar to alt text, and can be applied to both images and links. In many web browsers, title text provides a usability bonus I'm fond of: If you hover your mouse over an image, you'll be able to read the title text. It's like having an on-demand caption for images and links, which helps anyone, not just visually impaired people. | + | '''Title text''' is similar to alt text, and can be applied to both images and links. In many web browsers, title text provides a usability bonus I'm fond of: If you hover your mouse over an image, you'll be able to read the title text. It's like having an on-demand caption for images and links, which helps anyone, not just visually impaired people. |
| − | You can see how title text works in the image to the | + | You can see how title text works in the image to the right by hovering your own mouse over the image. |
You can use the same text for an image's title text and alt text, or switch it up if you like, formatting it like this: | You can use the same text for an image's title text and alt text, or switch it up if you like, formatting it like this: | ||
| Line 50: | Line 53: | ||
==Adding Alt Text to Images on AboutUs.org== | ==Adding Alt Text to Images on AboutUs.org== | ||
---- | ---- | ||
| − | |||
If you want to add alt text and title text to an image to the Wiki section of a page on AboutUs.org, follow [[ImageHelp|these instructions]] and add the last part: | If you want to add alt text and title text to an image to the Wiki section of a page on AboutUs.org, follow [[ImageHelp|these instructions]] and add the last part: | ||
| − | <nowiki>[[Image:FileName.jpg|Description of the image]]</nowiki> | + | ; <nowiki>[[Image:FileName.jpg|Description of the image]]</nowiki> |
| − | |||
| − | |||
==Do Your Images Have Alt Text?== | ==Do Your Images Have Alt Text?== | ||
---- | ---- | ||
| − | The [[ | + | [[Image:PointToAnalysisAndImages.png|right|150px|Learn about your alt text by clicking "Links & Images"]] |
| + | The free [[Home Page Analysis]] on every website's AboutUs page can tell you whether images on that website's ''home page'' have alt text. Check it out by searching for your website at the top right (example: MyWebsite.com) and click the "Home Page Analysis" tab in the left-side navigation (pictured at right). Then click on "Links & Images". | ||
| + | |||
| + | The AboutUs [http://www.aboutus.org/site-report/buy Site Report] will check the images on an entire website for alt text, and let you know which specific images need alt text. | ||
==How To Add or Change Alt Text== | ==How To Add or Change Alt Text== | ||
| Line 70: | Line 73: | ||
If you use a content management system (CMS) that makes it easier and keeps you from having to dive into HTML, you will want to go into the edit or settings mode for that particular image. There should be a field called "alt text", "image description" or something similar that you can fill in. | If you use a content management system (CMS) that makes it easier and keeps you from having to dive into HTML, you will want to go into the edit or settings mode for that particular image. There should be a field called "alt text", "image description" or something similar that you can fill in. | ||
| − | |||
{{LearnBottomBio | {{LearnBottomBio | ||
| Writer = KristinaWeis | | Writer = KristinaWeis | ||
| Line 77: | Line 79: | ||
| AuthorWebsite = AboutUs.org | | AuthorWebsite = AboutUs.org | ||
| ShortBio = Kristina is a community manager for [[AboutUs.org]]. She talks with a lot of website owners who are trying to promote their business online. <small>Have a question? [[Kristina Weis#Contact_Kristina|Contact me]].</small> | | ShortBio = Kristina is a community manager for [[AboutUs.org]]. She talks with a lot of website owners who are trying to promote their business online. <small>Have a question? [[Kristina Weis#Contact_Kristina|Contact me]].</small> | ||
| − | }} | + | }}--> |
| − | |||
Latest revision as of 12:52, 7 November 2013
By [[User:|]] on
A picture may be worth a thousand words, but an image on your website won't be worth anything to search engines or a vision-impaired person if it doesn't have alt text.
Note: This article has been moved to our new blog at www.AboutUs.com/alt-text-helps-people-and-search-engines/.