Categories: Guidelines

How to add an ALT attribute to an image

how to add an ALT attribute

A picture is worth a thousand words. Or is it? When building web pages, it’s common to add beautiful images to help tell stories and provoke emotions. But ( and this is a big but), a picture is worth absolutely zero words to someone using a screen reader if you don’t have an ALT attribute to describe it.

What is ALT text?

In HTML, ALT text is the alternative text description given to an image that explains what the image is about. There are various reasons for adding alt text to images. 

The alt text describes what’s on the image and the function of the image on the page. For example, if you use an image as a sign-up button, the alt text should say: “sign-up button.”

How to add ALT text to an HTML document

HTML is the markup language for the web. Web developers and web admins use it all the time to create and manage web pages. It’s therefore essential to know how best to add ALT text to an image using HTML.

Here is an example of how best to insert an image using HTML 

<img src=“image.jpg” width=“500px” height=“600px” alt=“image description” title=“image tooltip”>

The alt attribute describes the image, and the title attribute provides a tooltip that appears when a user hovers over the image.

What if I use an image purely for design purposes?

If you use an image purely for design purposes, embed the image in the CSS file, not the HTML file. However, if the image is in the HTML file, leave the alt attribute empty like so, alt=“”. This ensures that the screen reader skips such an image.

ALT attribute and SEO

By adding an alt text, you provide search engines with a contextual description of what’s on that image. This improves accessibility and your chance of ranking in image search.

Google places a high value on alt text. Google uses it to determine what is on the image and how it relates to the surrounding text.

How do I add an alt attribute to my WordPress site?

To add an alt attribute to your WordPress site, follow the instructions below:

Screenshot of the instruction

Screenshot of the instruction

FINAL THOUGHTS

Whether you’re using static HTML or a content management system, adding alt attributes to your images is of great importance. And the best part is that by adding alt attributes, you solve for many users and use cases. 


Categories: Guidelines

WCAG 3.0: Everything You Need to Know

The web at its full potential! That has been the goal of the W3C for many years. Through the development of the WCAG 3.0 working draft by the Web Accessibility Initiative (WAI), the W3C is one step closer to realizing that dream.