What is alt text? How to use the page element for images to improve your website's accessibility and search ranking
- Alt text is an essential element of web page design. It is a short text description of an image on the page.
- Alt text is used by accessibility tools to read image descriptions aloud to blind or visually-impaired visitors and search engines for better web page ranking.
- You can see alt text on any web page by inspecting the HTML of the page.
Alt text is a component in web page design. Specifically, it's a phrase or sentence that describes an image on the page.
In modern web page design, alt text is not displayed to most users, yet it's considered an essential part of good web design, and every image on a page should have alt text associated with it.
The purpose of alt text
Alt text serves two primary purposes. It is used by screen-reading accessibility tools to read aloud descriptions of images for users who are blind, visually impaired, or who need additional help seeing content on the page. Good alt text is essential for these users to have a satisfying experience on the web page.
It is also used by Google and other search engines to understand the content of the image, which it can use to better rank the web page in search results.
How to add alt text to an image and see it in HTML
Adding alt text varies depending on the web design or content management system being used to build the web page. In general, the tool will provide a field for entering the alt text when an image is uploaded to the web page. In most cases, you can also edit the uploaded image afterward to add or modify the alt text.
That alt text then gets encoded on the page in HTML. You can see this in any web browser using your browser's "Inspect" feature. For example, in Chrome, right-click an image on a web page and click "Inspect" from the drop-down menu. In Firefox, right-click and choose "Inspect Element." In both cases, you should see a window appear with the page's HTML. For the image, you should see an HTML tag that says "alt=" followed by the alt text description.
Alt text best practices
Search Engine Optimization (SEO) experts have a lot of guidance around web page design and web page elements like alt text. You can take entire classes on this topic. But in general, there are a few basic recommendations one can make about alt text. Here's some broad guidance on forming good alt text:
- The guidance about length changes from time to time, but currently, you should keep alt text less than 100 characters, including spaces.
- Describe the image clearly, accurately, and succinctly.
- Don't begin the alt text with a phrase like "Picture of…" or "Photo of…" Just describe what's in the image.
- Don't "stuff" the alt text with keywords related to the web page, but be as specific as possible. This helps both the blind and visually-impaired visitor, as well as Google.
Related coverage from Tech Reference:
What is a cache? A complete guide to caches and their important uses on your computer, phone, and other devices
'What is a WPA2 password?': A guide to WPA2, the safest type of Wi-Fi password you can have
'What is USB-C?': A guide to USB-C, the latest and most powerful type of USB cable
'What is my IP?': Here's what an IP address does, and how to find yours
'What is Bluetooth?': A beginner's guide to the wireless technology