element enhance image accessibility but require different writing styles. Let's look at the less familiar and elements to help clarify that requirement.
What is ?
The
element in HTML provides a caption or description for a element. And because a element can contain different media types (images, tables, text, block quotes, code samples, etc.), the element will label that media correctly. For example, a element that contains a block quote can use the to attribute the quote.
The primary difference between
and ALT text is that is visible on the screen by default, while ALT text is exposed by screen readers and only visible on the screen if the image link is broken.
How is used?
When used with images,
provides context and descriptive information about the image, whereas the ALT attribute should be concise and describe the image itself. In other words, "alt descriptions should be functional; figcaption descriptions should be editorial or illustrative." ~ Alt vs Figcaption, thoughtbot. For example, in the code below, notice that the ALT attribute describes what’s in the photo, and the gives details that provide deeper context and background information.
The bald eagle has officially been designated as the national bird of the United States. On Christmas Eve 2024, President Joe Biden signed into law a bill amending Title 36 of the United States Code to declare the bird’s status. From the article titled "It's official: The bald eagle is the national bird of the United States," earth.com
The code for the above photo and caption looks like this:
The bald eagle has officially been designated as the national bird of the United States. On Christmas Eve 2024, President Joe Biden signed into law a bill amending Title 36 of the United States Code to declare the bird’s status. From the article titled "[It's official: The bald eagle is the national bird of the United States](https://www.earth.com/news/its-official-the-bald-eagle-is-the-national-bird-of-the-united-states/)," earth.com
If
contains all the relevant information needed to describe an image adequately, then ALT text may not be needed. For example, if you publish an image of a blue Chevrolet Camero with a that reads "My father’s 1966 blue Chevy Camero with gold hubcaps. He kept it in the garage and only drove it to church." you probably don’t need ALT text as "blue Chevy Camaro with gold hubcaps" explains exactly what’s in the image.
When to Use
Use
and when you want to provide additional context to the image, like historical significance, special circumstances, photo credits, etc., and enhance the visual presentation.
A couple of things to remember when deciding to use
and vs ALT text.
was introduced in HTML5, and some older browsers may not support it. ALT tag is a more robust option as it is much more widely supported.
If using the element, a is not required. But you can not use without a parent element.
Even though
and ALT text provide context for images and necessary accessibility, they have distinct purposes. And using does not automatically mean you don't use ALT text. Both elements can work together to provide a more robust and accessible user experience.
