+

Cookies on the Business Insider India website

Business Insider India has updated its Privacy and Cookie policy. We use cookies to ensure that we give you the better experience on our website. If you continue without changing your settings, we\'ll assume that you are happy to receive all cookies on the Business Insider India website. However, you can change your cookie setting at any time by clicking on our Cookie Policy at any time. You can also see our Privacy Policy.

Close
HomeQuizzoneWhatsappShare Flash Reads
 

What is alt text? How to use the page element for images to improve your website's accessibility and search ranking

Jul 17, 2020, 18:26 IST
Business Insider
Alt text can improve your website's accessibility for visually-impaired users.skynesher/Getty Images
  • 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.
Advertisement

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.

Advertisement

You can add alt text to any image using the web design or content management tool, such as WordPress.Dave Johnson/Business Insider

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.

You can use the Inspect tool in a browser like Chrome to see the alt text associated with an image in a web page.Dave Johnson/Business Insider

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:

You are subscribed to notifications!
Looks like you've blocked notifications!
Next Article