# data[].attributes.body
yyytyty

# data[].attributes.body
Does it read this text?

# data[].attributes.body
test

# data[].attributes.headline
Accessibility of website building platforms. What about the accessibility of this padlet page itself?

# data[].attributes.subject
Accessibility of website building platforms. What about the accessibility of this padlet page itself?

# data[].attributes.body
Try to include a chart image

# data[].attributes.body
What would be a good alt text of a map?

# data[].attributes.attachment_link.readable_text
Specific techniques for meeting each Success Criterion for this guideline are listed in the understanding sections for each Success Criterion (listed below). If there are techniques, however, for addressing this guideline that do not fall under any of the success criteria, they are listed here. These techniques are not required or sufficient for meeting any success criteria, but can make certain types of Web content more accessible to more people.

# data[].attributes.attachment_link.title
Understanding Guideline 1.1 | Understanding WCAG 2.0

# data[].attributes.attachment_link.description
Specific techniques for meeting each Success Criterion for this guideline are listed in the understanding sections for each Success Criterion (listed below). If there are techniques, however, for addressing this guideline that do not fall under any of the success criteria, they are listed here.

# data[].attributes.body
with Long description

# data[].attributes.attachment_link.readable_text
Page Content

About ALT Text

ALT text refers to invisible description of images which are read aloud to blind users on a screen reader. Adding ALT text allows authors to include images, but still provide the content in an alternative text based format. See example below for what a screen reader experiences when no ALT Text is used.

If no ALT text is provided, then a screen reader would only be able to say "IMAGE" or perhaps provide a file name.

WCAG 2.0 Guideline 1.1.1 -"All non-text content that is presented to the user has a text alternative that serves the equivalent purpose."

This page provides general guidelines on what kinds of text to use in an ALT tag. For specific steps within a specific tool, please select a link within the links in the "ALT Text How To" section.

Accurate, Concise Description

It's important to not only provide ALT text, but also provide one that is useful in the context of the document. You may not need to include every detail about the image, and you may be able to skip over purely decorative images, but those that contain critical information need to have it to spelled out in the ALT text.

A good rule of thumb to consider is to include what you might relay over the phone.

Infographic Example

Consider an graphic at an e-commerce which includes two credit card company logos. If you need to know which credit cards are accepted, which would be the better ALT text?

Select Preferred ALT Text for Credit Card Logo

1. ALT="Credit Card Logos" (which ones?)

2. ALT="Vidi-Visi and Magic Card accepted." (conveys specific cards)

Artistic Example

Consider this painting of George Washington at Valley Forge (Picture from Library of Congress).

When thinking of an ALT tag, the task would be to consider WHY the image is included.

Is it within a history course? a course on climatic history? Is the point of the image to show how solidiers were dressed or that LaFayette was at Valley Forge?

The answer could affect how you write the ALT text.

Possible ALT Text for George Washington Painting

1. ALT = "George Washington at Valley Forge" (most succinct)

2. ALT = "George Washington and Lafayette on horseback talking to soldiers in snow at Valley Forge" (more detailed)

3. ALT = "Valley Forge in winter. The landscape is snow covered and soldiers are sitting by the open road with a camp fire." (emphasizing climate)

Hint on long descriptions: If a description is very technical it may be worth including it in the main text so that all readers can benefit.

When creating ALT text, it's important to remember that it should describe the image. It should NOT include information about copyright or any extra information that would be relevant to a seeing audience.

See example below

Complex Images and Long Description

ALT tags are generally recommended to be concise (about 125 characters). However, some images are so complex that more information may be needed. Today, most experts recommend including an ALT text which refers blind users to a text based description elsewhere which is visible to everyone.

See the Complex Images section for different examples.

# data[].attributes.attachment_link.description
ALT text refers to invisible description of images which are read aloud to blind users on a screen reader. Adding ALT text allows authors to include images, but still provide the content in an alternative text based format. See example below for what a screen reader experiences when no ALT Text is used.

# data[].attributes.body
More examples

# data[].attributes.attachment_link.readable_text
The single most important thing you can do to do to make a web page accessible is to include alternative text for images. When you make the decision to add alternative text, you include the many people who use talking browsers, screen readers, text browsers or browsers on small devices.

Use the alt attribute on every img element in the HTML code for your page. Also use the alt attribute on every input with type=" image" (see Section 8 on accessible forms) and on every area element (see Section 5 on image maps).

The idea of alternative text is to provide a textual replacement for pictures (images), a replacement that conveys the same thing as is communicated to a sighted user seeing the image. Screen readers and talking browsers can't do anything with an image itself - they will announce the alternative text instead. If an image is active, i.e., if the image is inside an anchor element (<a>), then the alternative text should convey the purpose or function of the link. If the image is not active, but conveys information, then the alternative text must convey the same information. If an image conveys no information, or is redundant, specify that with null alt-text, alt="", that's quote, quote, with no space between.

The Section 508 standard for text alterntives states:

§1194.22 (a)
A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content).

If you don't provide this information when you have an image on your web page, you will be losing customers, you will not be doing your best for search engine optimization, and you will not be compliant with either the Section 508 Web Standards or with the Web Content Accessibility Guidelines, Version 1.0 or 2.0.

Choosing Text Equivalents for Images And Image Links

The following image is from a Gateway home page some time back. The code that illustrates the inclusion of alternative text, "the Gateway box", follows.

The Gateway box

If the Gateway box were an active image, a link to the Gateway home page for example, then the alt-text should give the function of that link, either alt="Home" or alt="Gateway". If the web designer considered the image to be "eye candy", i.e., visually setting a mood, then alt="" might be appropriate since interjecting "The Gateway box" in the flow of a screen reader's speaking of the page might not have an appreciable positive effect.

In the following example from IBM a few years back, the image contains the words "shop IBM" and an abstract shopping cart. The text equivalent should repeat that text.

Shop IBM icon

It might be tempting to write alternative text like this:
alt="abstract shopping cart to the left of the words shop IBM"
That is the description of the image, not its function. If you used that alt-text then each time a blind person visited the site he or she would have to listen to "abstract shopping cart to the left of the words shop IBM." That image and that message would be at the top of every page. Such a description meets the technical standard (§1194.22 (a)) for providing a text equivalent, but it fails usability criteria. Instead, use alternative text, as IBM does, that exactly coincides with the text on the image or the function of the link, alt="Shop IBM".

Often, the navigation links at the top of a web page, like the Shop IBM link above, are pictures of the words "Home," "Products," "Customer Service," etc. In these cases as well, the alternative text should be identical to text in the images.

You do not have to include a reference to the fact that something is a link, for example, alt="link to shop IBM page". Text browsers and screen readers inform their users when they encounter a link. So just use alt="shop IBM" and that will do it. It is redundant and questionable to add verbs to the alt-text for links.

Google logo

For example Google, for its typical logo (see above) often (but not always) uses alt="Go to Google Home". When you listen to that it sounds like a command, it should just be alt="Google" and a screen reader will announce, "link graphic Google".

The requirement for alternative text also applies to images that carry no information like spacer images sometimes used in table-based layout. Use empty or null alt-text, written alt="" (no spaces between the quotes) for the alternative text to say that an image contains no relevant information and is to be ignored.

This tells an assistive technology, "don't bother me with any information about this image," and the screen reader or text browser will completely ignore the image.

Sometimes you need to make a judgment call about whether or not to use the empty alt-text ( alt=""). While blind users may disagree about the correct detail of alternative text, they all agree that the alt attribute must be included on every image.

Another case where you should use empty alt-text is when the information is redundant. In a list of navigation links, for example, you might have an icon next to the text for a link, like a picture of a question mark and the word "Help." In this case, if the image is not a link, it should have empty alt text, alt="".

If that image (question mark) is a link then alt="" is not appropriate because assistive technology will still include the image link in the tab order and announce the URL ( href) of the anchor or other information associated with the anchor like the value of the src attribute of the imager. In this situation (and many similar to it) it is best to include the image in the anchor with the text and then you can use alt="" on the image.

Sometimes the information that a screen reader finds because you forgot to include alt text can be downright disastrous. Here is an image from a major internet shopping company that does not, at this time have alt-text.

Image with text

This is what a blind user hears:
link graphic /b/ref=amb_link_5174632_1/102-8341830-0338507?ie=UTF8&node=465600&pf_rd_m=ATVPDKIKX0DER&pf_rd_s=center-2&pf_rd_r=083ACQP8E5WJNP9G6MW9&pf_rd_t=101&pf_rd_p=299488501&pf_rd_i=507846
Another common use of images on commercial web sites is for web designers to create their own bulleted lists using graphics that they choose for the bullets.

Look at the list of global navigation links in the left navigation panel and the News items at the bottom of the IBM page.

Graphical image bullets on IBM.com

The arrows are all images with alt="". This is appropriate and the choice made by IBM.

These arrows used to be separate image links. They are not links anymore. When they were separate links, alt="" was not appropriate because the links would be in the tab order and an announcement is needed when screen readers land on a link. When you want to have clickable arrows like this, next to text, then include both the arrow image and the text within the<a> element, with alt="" for the image like this.

Similarly, the arrows bulleting the News items on the Compaq site should use alt="" but unfortunately alt-text is not specified.

Bullets on Compaq.com

The Center for Applied Special Technology site used to use ">" as alternative text ( alt=">"); for some "bullets" and screen readers speak "greater than"; not good! Other sites use alt="bullet".

In trying to decide whether to use empty alt-text or a short text equivalent, you can listen to your page and decide which sounds better. If the list items are short or if the items are links, alt="" is probably better. If the items are long and they are not links, the alternative text"bullet" might be better.

However, in all of these cases of alt-text for bullets, it would be much better to code the lists as HTML lists (<ol>, <ul>, <dl>) and then there is no issue of alt-text for bullets and screen reader users will be able to navigate to the list and through the list items. If you use list markup for your lists then your page will comply with the level one Success Criterion, 1.3.1, of WCAG 2.0 which, in effect, requires the use of structural markup for structures (like lists) on the page. And you lists can look exactly the same as the ones with images included in the text.

For example, again using IBM, here is a screenshot of a list on a business services page.

The arrows as bullets come from CSS

the code for the list looks something like this:

<ul class="ibm-link-list">
  <li><a href="http://www.ibm.com/ ..." .. >Small business</a></li>
  <li><a href="http://www.ibm.com/..."...>Medium business</a></li>
</ul>

Then the "bullet" is specified with the CSS style statement like this:

list-style-image: url(images/arrow.gif);

as an example.

Sometimes images are used purely for visual effect. These should have empty alt-text ( alt=""). The disabilities community and disabilities advocates debate this issue. The image on the right-hand side of a page of the National Library service for the Blind and Visually Impaired (from around 2002) is, in my opinion, decorative only. I would use alt="" but the web authors on this site chose alt="Images of NLS Users." Either is OK.

An image on the NLS site

Choosing Text Equivalents for Client-Side Image Map Areas

A client-side image map consists of an image with the usemap attribute set to the name of a map. The image map and each area in the map must have alternative text. The properly marked up HTML code for a client-side image map is illustrated here:

We are going to talk about image maps again in Section 5. For now, however, we want to stress how important it is to include a text equivalent for each area of the image map, a text equivalent that gives the purpose of the corresponding hot spot.

The Yahoo site is notoriously sparse of pictures. At the time that this Web Tutorial was originally written it contained only two or three images. The first image was the Yahoo! banner across the top of the page. (It is split here for formatting purposes!)

The Yahoo! banner

The banner is not a collection of links as it appears. It is one image that is coded as a client-side image map. The links (blue underlined text) in the banner are part of the image. They are not text. The words for the "links" seem to be there, "Calendar," "Messenger," "Check Email," "What's New," "Personalize," and "Help." Here is what Home Page Reader, a talking web browser, tells its users:

The entire banner, including the icons and the simulated-link text, is all one image used as an image map. The map areas are rectangles including each icon and the corresponding text.

None of the map areas have alt-text, as illustrated in this HTML code fragment for the first map area:

Surprisingly, the portion of the image map offering help was, at the time of the first writing of this course, the only way to find help on the main Yahoo! page, http://www.yahoo.com/. Thus the user who is blind, wanting help, would have to know to follow the link, " r/hw."

You could code the image map hot spots correctly by setting the alt-text to the text that actually appears in the image.

The Yahoo! site that premiered early in 2002 fixed this problem. Their image map hot spots were appropriately marked up with alt-text. Also their form control fields had proper label elements (see the section on forms). Adherence to these basic requirements of Section 508 is all too rare amongst major commercial sites.

The Yahoo! banner has and interesting evolution, starting with a completely inaccessible server-side image map back in 1996, shown below.

The Yahoo! banner in 1996

In the beginning of 2006 the appearance of the top of the Yahoo! page was banner-like as shown in below.

The Yahoo banner in the beginning of 2006

Each of the six images are placed immediately above real text, as opposed to pictures of text in the first Yahoo! banner above. The image and the text are included in the same anchor and the image is given null alt-text, alt="", a recommendation we talked about above for reducing repetition, while including the ease of visually clicking on the image or the text. Here is the (elided) code for one of those links.
<a href=r/25>
<img src=" ...125.gif" width=36 height=36 border=0 alt="" /><br />
... Finance ... </a>

Creating Quality Text Alternatives

It is just as important to have high quality alternative text, as it is to have high quality normal text on the page. The alternative text should be consistent, clear and, most important, useful.

When an image is not a link and carries no information or is redundant, use null alt-text ( alt="").

For example, there were many images named c.gif on the IBM web site ( http://www.ibm.com/) that are there for adjusting the visual layout. These carry no information and have been assigned empty alt-text, alt="". Similarly, on the left-side navigation area, there is a list of text links, and each is preceded by a graphical image of an arrow. The alternative text on the image arrow should be and is empty, alt="".

If you do not include the alt attribute with empty text ( alt="") for these formatting images, screen readers with the default screen reader settings will ignore the image. However there are screen reader settings that would result in the assistive technology announcing meaningless code to the user. Hearing chatter that carries no useful information can be frustrating and even annoying to a blind user.

When the navigation buttons are images with text, you probably chose that text very carefully. Use the same text in the alt attribute.

Using Long Descriptions for Text Equivalents

Alternative text should be short and simple, but sometimes you may need to provide more explanation or content than is suitable for alt-text. In these cases, you can use the long description ( longdesc) attribute for the img element. The longdesc attribute points to the URL of a separate description file that contains information conveyed by the image.

The clearest example of the need for a long description of an image is when the image is a graph or a chart as shown below.

A simple chart showing traffic density

The longdesc attribute points to the file traffic.htm that includes the following simple contents:
<p>Traffic Density Graph</p>
<p>This graph shows traffic density on Main and Center streets measured in cars per minute between 8:20 AM and 12 noon on Center and between 9:00 and 12:20 on Main Street. Density ranges from a high of 70 down to 50 cars per minute on Center. On Main street the density drops from 55 down to 35 at 11 AM and then back up to 55 at 12:20 PM.</p>
At first writing of this Web Course the longdesc attribute was not supported by assistive technologies. Because of that, accessibility advocates recommended also using a "d-link" or description link that would open the description file referenced in the longdesc attribute. Now that the technology supports the longdesc attribute there is no need for the "d-link" which is welcome news, because even the accommodation itself violates an accessibility principle of having clear link text!

Pictures in news stories or images in shopping sites are also candidates for long descriptions.

There are good alternatives to the longdesc attribute for providing detailed information about images. For example, Reuters news stories displayed on Yahoo.com have photos (as links) with the alternative text "Reuters Photo." That link leads to an enlarged photograph with a detailed description.

A Reuters photo on Yahoo! news

When a user opens the "Reuters Photo" link, the following page is displayed. The long description is a caption on the larger image.

Image (or long) description as a caption

Summary

If you have comments or questions on the content of this course, please contact Jim Thatcher. I will try to respond to any question or suggestion within one business day.

This course was originally written for the Information Technology Technical Assistance and Training Center, funded in support of Section 508 by NIDRR and GSA at Georgia Institute of Technology, Center for Rehabilitation Technology. It has been completely revised.

# data[].attributes.attachment_link.description
The single most important thing you can do to do to make a web page accessible is to include alternative text for images. When you make the decision to add alternative text, you include the many people who use talking browsers, screen readers, text browsers or browsers on small devices.

# data[].attributes.body
Provide a good description of the image in the context of the web

# data[].attributes.attachment_link.readable_text
Article Contents

1. Introduction

2. Alternative Text Basics

3. Context is Everything

4. Functional Images

5. Decorative Images

6. Advanced Images

1. Form image buttons

2. Image maps

3. Image slices

4. Background images

5. Logos

6. Complex images

7. Figure and figcaption

7. Conclusion

Introduction

Adding alternative text for images is the first principle of web accessibility. It is also one of the most difficult to properly implement. The web is replete with images that have missing, incorrect, or poor alternative text. Like many things in web accessibility, determining appropriate, equivalent, alternative text is often a matter of personal interpretation. Through the use of examples, this article will present our experienced interpretation of appropriate use of alternative text.

Alternative Text Basics

Alternative text provides a textual alternative to non-text content in web pages. We will be discussing alternative text for images only, though the principles can be applied to media, applets, or other non-text web content.

Alternative text serves several functions:

It is read by screen readers in place of images allowing the content and function of the image to be accessible to those with visual or certain cognitive disabilities.

It is displayed in place of the image in browsers if the image file is not loaded or when the user has chosen not to view images.

It provides a semantic meaning and description to images which can be read by search engines or be used to later determine the content of the image from page context alone.

The key principle is that computers and screen readers cannot analyze an image and determine what the image presents. As developers, text must be provided to the user which presents the CONTENT and FUNCTION of the images within your web content.

Alternative text can be presented in two ways:

Within the alt attribute of the img element.

Within the context or surroundings of the image itself.

This means that the alt attribute (sometimes called the alt tag, though technically this is incorrect) is not the only mechanism for providing the content and function of the image. This information can also be provided in text adjacent to the image or within the page containing the image. In some cases where the equivalent cannot be presented succinctly, a link to a separate page that contains a longer description of the image content can be provided.

The term alternative text, as used in this article, refers to the text equivalent for an image, regardless of where that text resides. It does not refer solely to the alt attribute of the image tag. Alt attribute will be used when referring to the attribute itself, which often will, but does not exclusively, contain the alternative text.

Every image must have an alt attribute. This is a requirement of HTML standard (with perhaps a few exceptions in HTML5). Images without an alt attribute are likely inaccessible. In some cases, images may be given an empty alt attribute value (e.g., alt="", sometimes call "null" alternative text).

Context is Everything

When determining appropriate alternative text for images, context is everything. The alternative text for one image may be vastly different based upon the context and surroundings of the image itself. Take, for instance, the following image of George Washington:

The alternative text for this image might change immensely based upon context, as demonstrated below.

To best present these principles of alternative text, most images within this article have been given alternative text of "example image". However, the content of the images is typically presented within page context.

Example 1

Because of his role as the Commander in Chief of American forces in the Revolutionary War, and, later, the first President of the United States, George Washington is often called the "Father of his Country".

What would be appropriate alternative text for the image in Example 1?

1. "Image of George Washington"

2. "George Washington, the first president of the United States"

3. An empty alt attribute (alt="") will suffice.

4. "George Washington"

The first step when determining appropriate alternative text for an image is to decide if the image presents content and if the image has a function. In most cases, an image will only have a function if it is contained within a link (or is an image map hotspot or a button). Determining if the image presents content and what that content is can be much more difficult. If the content that the image conveys is presented within text in the surrounding context of the image, then an empty alt attribute may suffice. In the example above, the content being presented by the image is to inform the user that this is George Washington. The image has no function because it is not a link and is not clickable.

Let's look at some important rules regarding the alt attribute.

The alt attribute should typically:

Be accurate and equivalent in presenting the same content and function of the image.

Be succinct. This means the correct content (if there is content) and function (if there is a function) of the image should be presented as succinctly as is appropriate. Typically no more than a few words are necessary, though rarely a short sentence or two may be appropriate.

NOT be redundant or provide the same information as text within the context of the image.

NOT use the phrases "image of ..." or "graphic of ..." to describe the image. It is usually apparent to the user that it is an image. And if the image is conveying content, it is typically not necessary that the user know that it is an image that is conveying the content, as opposed to text. If the fact that an image is a photograph or illustration, etc. is important content, it may be useful to include this in alternative text.

Based upon these rules, Option D ( alt="George Washington") would likely be the best alternative text in this instance. Option A unnecessarily describes the image as an image. Option B provides extra information that is not presented directly in the image and it is also redundant with content presented later within the text. Option C (no alt attribute) is not appropriate because the image conveys content that is not directly presented in the surrounding context. Even though the surrounding text does indicate that it's referring to George Washington, visual users can tell this directly from the content of the image - so if the image conveys content, it should be given alternative text.

Example 2

Because of his role as the Commander in Chief of American forces in the Revolutionary War, and, later, the first President of the United States, George Washington is often called the "Father of his Country".

What would be the appropriate alt attribute for the image in Example 2?

1. "George Washington"

2. An empty alt attribute (alt="") will suffice.

3. "Image"

4. The image does not need an alt attribute.

In this case, the content of the image is presented within the surrounding content, so Option B ( alt="") is the best choice. Option A would be redundant. Option C provides extraneous and useless information. Option D (no alt attribute) is never the right choice - every image must have an alt attribute.

Example 3

What would be the appropriate alt attribute for the image in Example 3?

1. An empty alt attribute (alt="") will suffice.

2. "Wikipedia entry for George Washington"

3. "Read More"

4. "George Washington"

In this case, the image is also a link, so it has a function. Whenever an image is within a link, the function of the image must be presented in alternative text that is also within the link. In this case, there is no adjacent text within the link that describes the function, so it must be presented within the alt attribute. As a result, option D ("George Washington") is likely the best choice. While the words "George Washington" in the alt attribute are redundant with the text that follows, in this case the redundancy is necessary to adequately describe the function.

Option A is not adequate. An image that is the only thing inside a link must never have a missing or empty alt attribute. This is because the screen reader must read SOMETHING to identify the link. Screen readers might read the image file name or the URL of the page being linked to, which may or may not be useful. And remember, that the link may be read out of context of the surrounding text, such as when the user is navigating by links within the page. Option B provides content that is not available through the image alone (i.e., you can't tell the image links to Wikipedia simply by looking at it). Option C does not provide an adequate description of the function, especially out of context.

This entire example could also be make much better by placing both the image and the text caption within one link:

In this case, both the content and function of the link and image are presented within the link, so the image can be given alt="" to avoid any redundancy.

When possible, avoid using "link to..." or "click this image to..." or similar wording in the alt attribute. Links are identified as links by screen readers and should be visually apparent to sighted users.

Example 4

In this painting, the artist Emanuel Leutze used light, color, form, perspective, proportion, and motion to create the composition.

What would be the most appropriate alt attribute for the image in Example 4?

1. "George Washington"

2. "Painting of George Washington"

3. "Painting of George Washington crossing the Delaware River"

4. "A classic painting demonstrating the use of light and color to create composition."

5. "Painting of George Washington crossing the Delaware River. Swirling waves surround the boat where the majestic George Washington looks forward out of the storm and into the rays of light across the river as he leads his wary troops to battle."

As before, we should determine if the content of the image is presented in the surrounding context. In this case, it is not (at least not entirely). The image is not within a link, so there is no function. But this image provides a much more difficult examination, and the best answer may not be adequately determined by the limited context we've been given. Regardless, let's look at the possible options.

Option A ("George Washington") probably does not adequately describe the content of the image. The fact that it is George Washington in the painting may not necessarily be relevant in this context. Option B ("Painting of George Washington") may be adequate, but does not provide much additional content. However, it may be appropriate to describe the image as a painting, as opposed to a photograph or other image type. Option C provides more information that may help the user identify the content itself. Remember that alternative text is not just for the blind. Many sighted users would be able to identify the specific painting in question given this description, whereas "George Washington" alone would not be descriptive enough. Option D might be appropriate if the purpose of the image is to present a specific art technique and the content of the image itself is not important. Option E may also be an appropriate alternative if a detailed examination of the painting is in order, but is too long and verbose to be of much use - such text would be better served as text within the web page.

As you can see, there is no one right answer here. The best alternative text will depend on the context and intended content of the image.

Functional Images

Images are often used not only to provide content, but to provide important functions, such as navigation.

Example 5

The "Products" image is part of a navigation bar.

What would be the most appropriate alt attribute for the "Products" navigation image in Example 5?

1. "Products"

2. "Link to Products"

3. The image doesn't convey content, so (alt="") will suffice.

In this case, option A is the best answer. It provides both the content and the function of the image. The image displays the word "Products" and also is a link to the products page on the site. The image will be identified as being within a link, so "Link to" is not necessary, making option B a poor choice. Because the image is the only object within a link, alt="" is never appropriate. When an image contains only text, the text being displayed can usually be used as alternative text.

Example 6

Continue to the next page to read about George Washington's presidency.

What would be the most appropriate alt attribute for the blue arrow image in Example 6?

1. "next"

2. "next page"

3. "George Washington's Presidency"

4. "Continue to George Washington's Presidency"

Again, this is an example that does not have a clear cut best answer. In fact, any of the options could probably be appropriate in this example. Option A and B will probably be sufficient in most cases, as long as it is clear to the user that there are multiple pages within the article. Option C presents very clearly the function of the link, but does not present that the link goes to the next page in a series. Option D may be the best solution as it presents the function of the link and conveys that it is part of a series of pages. As stated previously, determining the most appropriate alternative text is up to personal interpretation based upon the larger context of the image in question. A description of this image ("arrow") would not be appropriate. Perhaps a better solution would be to have the text "Next Page" or similar adjacent to the image and within the link, in which case, the image could be given alt="".

Example 7

What would be the most appropriate alt attribute for the icon image in Example 7? Note that the icon is within the link.

1. "Employment Application"

2. "PDF File"

3. "PDF icon"

4. The content of the image is presented in context, so (alt="") is appropriate.

Notice that the image is within the link. If it were not within the link, then the alt text might be different. In this case, because the image provides additional information about the function of the link, it's important that it be within the link itself and is read with the link. This is vital because links are often accessed out of context from their surroundings.

Option A ("Employment Application") is redundant with surrounding text so it is not the best choice. Option B is the best choice (though perhaps even the more succinct "PDF" would be sufficient) - it clearly provides the content that is being presented by the image - that the link is to a PDF file. The function ("Download the Employment Application") is presented within the text of the link, so it does not need to be included again within the alt attribute. Option C ("PDF icon") really describes the image itself, so it is not most appropriate for this context. In another context, it may be important that the user know that this image is indeed an icon. Option D (empty alt text) would not provide the important information that the image presents.

It is important to note here that if the icon itself were the link to the document, the alternative text should provide a full alternative of the content and function of the link/image combination. Something like, "Download the employment application in PDF format". "PDF format" itself would not be sufficient, especially if there are multiple documents all with links of this nature. In that case, a screen reader user that is navigating through the links on a page would hear, "PDF format, PDF format, PDF format..." As a general rule, if the same image is used multiple times on a page to link to different locations, alternative text within the link should identify the differences.

Decorative Images

Decorative images do not present important content, are used for layout or non-informative purposes, and do not appear within a link. In almost all cases, spacer and decorative images should have empty alt attribute values ( alt="").

Example 8

Content text here.

Footer text here.

What would be the appropriate alt attribute for horizontal separator image in Example 8?

1. "decorative line"

2. "Beginning of footer"

3. "separator"

4. alt="" will suffice

Because the image does not convey content and is not within a link, option D is the most appropriate choice. A description of the image is not appropriate.

When an image is used only for decorative purposes, it is often best to remove the image from the page content and add it as a background image using CSS. This will remove the need for alternative text at all and will remove the image from the semantic and structural flow of the page.

Example 9

Our business promises the best service you will find on the planet. Our team is professionally trained to offer excellent customer service throughout the contract negotiation process.

Customer satisfaction is our top priority and is guaranteed, or your money back.

What would be the appropriate alt attribute for the image in Example 9?

1. "handshake"

2. "Businessmen shake hands to complete a contract"

3. alt="" will suffice

4. "We guarantee our professional services"

When analyzing this example, determine whether the image is presenting important content. In this case, I would argue that it does not. In current practice on the web, many such images are given descriptive alternative text even though the images don't seem to provide useful content. Option C ( alt="") would probably be most appropriate in this case because the image does not convey relevant or important content. Options A and B are descriptive of the image, but do not convey an equivalent of what the image itself is conveying - which in this case is nothing, or perhaps only an emotive mood or feeling. In other words, the image is mostly decorative. Option D is clearly not correct, though it is worth noting that additional information is often injected into alt text to provide additional information or to provide additional keywords to search engines. Such practices are not an appropriate use of alternative text.

In many cases you can ask the question "If I could not use this image, what would I put in its place?" to determine appropriate alternative text.

In the example above, it's not likely that the handshake photo would be replaced with text, thus alt="" is probably sufficient.

Advanced Images

There are some cases wherein determining alternative text can be more difficult. With all images, user testing and testing in screen readers and text-only browsers can help you determine the most appropriate method for implementing alternative text.

Form image buttons

Form image buttons must have an alt attribute that describes the function of the button. Image buttons are often used to provide a more visually appealing or a smaller version of the standard form buttons. The alternative text should describe what the button will do when selected, such as "Search", "Submit", "Register", "Place your order", etc. For instance, <input type="image" alt="Submit Search"> might be appropriate for an image button on a site search form.

Image maps

When using client-side image maps, the main image must have an alt attribute. The alt attribute should present any content that is presented with the image, but that is not presented with the image map hotspots. For instance, if you had a State of New York map that had hotspots for each region, the image may have an alt attribute value of "Regions of New York ". If the main image does not convey content, but is primarily just a container for the hot spots (e.g., a navigation bar), then alt="" is appropriate.

Each image map hotspot ( area element) must have an equivalent alt attribute. Because the hot spots are clickable, each one must have alternative text that describes the function of that hotspot.

Because hotspots for server-side image maps cannot be given alternative text and because they are not keyboard accessible, they should not be used.

Image slices

Sometimes large images are sliced into multiple images on a web site for design purposes. When multiple image slices together convey content, then that content must be presented to the user. Typically, this is done by providing the alternative text in the alt attribute of the largest or most prominent image slice. It is not appropriate to repeat the alternative text unnecessarily, break the alternative text across multiple image alt attributes, or provide no alternative at all. If an image slice is within a link, alternative text describing the function of the link must be provided in the images alt attribute, in the alt attribute of another image within the same link, or within text within the same link. Each link must contain functional text that describes the links function.

Background images

It is not possible to add alternative text directly to CSS or other background images. Images that convey content should not generally be placed in page or element backgrounds.

Background images can, however, be used for decorative images, thus removing the image from the content flow of the page and removing the need for an empty alt attribute.

Sometimes image sprites or other background images are used to present content. While these should generally be avoided, if they are used, any content conveyed through the background image must be made accessible within the page markup. If the PDF icon image in Example 7 above were instead presented via a CSS background image, you could use a text replacement technique to present the content within the link:
<a href="application.pdf">Download the Employment Application<span class="pdficon"> (PDF)</span></a>
You would then use CSS to position the "(PDF)" text (the span class="pdficon" element) off-screen. See CSS in Action: Invisible Content Just for Screen Reader Users for more details. Sighted users would see the PDF background image and screen reader users would hear the off-screen "(PDF)" text.

Complex images

When an equivalent alternative for a complex image, such as a chart, graph, or map cannot be limited to a succinct alt attribute (perhaps a couple sentences in length), then the alternative should be provided elsewhere. The alternative content can often be presented within the context of the page, such as in an adjacent data table. The alternative text can also be provided by linking to a separate web page that provides the longer description of the complex image. The link can be adjacent to the image or the image itself could be linked to the long description page. The alternative text for the image should still describe the general content of the image.

<img src="sales.jpg" alt="Line chart of annual sales data"><br>
<a href="salesdata.htm">View sales data</a>

Figure and figcaption

HTML5 introduces the figure element, optionally with a figcaption, which is self-contained and that is typically referenced as a single unit from the main flow of the document. A figure can be moved away from the main flow of the document without affecting the document's meaning.

figure and figcaption allow a semantic association between a figure and the figure's caption. The figcaption may provide a summary of or additional information about the figure and/or relate the figure back to the containing document. However, any image within a figure must still have an alt attribute value that presents the alternative text of the image - this should not be conveyed via the figcaption.

You can learn much more about figure and figcaption in How do you figure?

Conclusion

Despite being the biggest issue affecting web accessibility, there are still divergent and incorrect methods for implementing alternative text. By following the basic principles outlined here, web developers can make their web content more accessible to individuals with disabilities.

Adding alternative text to images is one of the easiest accessibility principles to learn and one of the hardest to master.

Alternative text may be provided in the alt attribute or in the surrounding context of the image.

Every image must have an alt attribute.

Alternative text should:

present the CONTENT and FUNCTION of the image.

be succinct.

Alternative text should not:

be redundant (be the same as adjacent or body text).

use the phrases "image of..." or "graphic of...".

Appropriate alternative text depends heavily on the image's context.

Alt text of a functional image (e.g., an image within a link) should describe the function as well as the content.

Decorative images still need an alt attribute, but it should be empty (alt="").

The accessibility of the web in general would increase dramatically if alternative text were provided and implemented correctly.

# data[].attributes.attachment_link.description
Introduction Alternative Text Basics Context is Everything Functional Images Decorative Images Advanced Images Form image buttons Image maps Image slices Background images Logos Complex images Figure and figcaption Conclusion Adding alternative text for images is the first principle of web accessibility. It is also one of the most difficult to properly implement.

# data[].attributes.body
No alt text

# data[].attributes.attachment_link.readable_text
Article Contents

1. Introduction

2. Alternative Text Basics

3. Context is Everything

4. Functional Images

5. Decorative Images

6. Advanced Images

1. Form image buttons

2. Image maps

3. Image slices

4. Background images

5. Logos

6. Complex images

7. Figure and figcaption

7. Conclusion

Introduction

Adding alternative text for images is the first principle of web accessibility. It is also one of the most difficult to properly implement. The web is replete with images that have missing, incorrect, or poor alternative text. Like many things in web accessibility, determining appropriate, equivalent, alternative text is often a matter of personal interpretation. Through the use of examples, this article will present our experienced interpretation of appropriate use of alternative text.

Alternative Text Basics

Alternative text provides a textual alternative to non-text content in web pages. We will be discussing alternative text for images only, though the principles can be applied to media, applets, or other non-text web content.

Alternative text serves several functions:

It is read by screen readers in place of images allowing the content and function of the image to be accessible to those with visual or certain cognitive disabilities.

It is displayed in place of the image in browsers if the image file is not loaded or when the user has chosen not to view images.

It provides a semantic meaning and description to images which can be read by search engines or be used to later determine the content of the image from page context alone.

The key principle is that computers and screen readers cannot analyze an image and determine what the image presents. As developers, text must be provided to the user which presents the CONTENT and FUNCTION of the images within your web content.

Alternative text can be presented in two ways:

Within the alt attribute of the img element.

Within the context or surroundings of the image itself.

This means that the alt attribute (sometimes called the alt tag, though technically this is incorrect) is not the only mechanism for providing the content and function of the image. This information can also be provided in text adjacent to the image or within the page containing the image. In some cases where the equivalent cannot be presented succinctly, a link to a separate page that contains a longer description of the image content can be provided.

The term alternative text, as used in this article, refers to the text equivalent for an image, regardless of where that text resides. It does not refer solely to the alt attribute of the image tag. Alt attribute will be used when referring to the attribute itself, which often will, but does not exclusively, contain the alternative text.

Every image must have an alt attribute. This is a requirement of HTML standard (with perhaps a few exceptions in HTML5). Images without an alt attribute are likely inaccessible. In some cases, images may be given an empty alt attribute value (e.g., alt="", sometimes call "null" alternative text).

Context is Everything

When determining appropriate alternative text for images, context is everything. The alternative text for one image may be vastly different based upon the context and surroundings of the image itself. Take, for instance, the following image of George Washington:

The alternative text for this image might change immensely based upon context, as demonstrated below.

To best present these principles of alternative text, most images within this article have been given alternative text of "example image". However, the content of the images is typically presented within page context.

Example 1

Because of his role as the Commander in Chief of American forces in the Revolutionary War, and, later, the first President of the United States, George Washington is often called the "Father of his Country".

What would be appropriate alternative text for the image in Example 1?

1. "Image of George Washington"

2. "George Washington, the first president of the United States"

3. An empty alt attribute (alt="") will suffice.

4. "George Washington"

The first step when determining appropriate alternative text for an image is to decide if the image presents content and if the image has a function. In most cases, an image will only have a function if it is contained within a link (or is an image map hotspot or a button). Determining if the image presents content and what that content is can be much more difficult. If the content that the image conveys is presented within text in the surrounding context of the image, then an empty alt attribute may suffice. In the example above, the content being presented by the image is to inform the user that this is George Washington. The image has no function because it is not a link and is not clickable.

Let's look at some important rules regarding the alt attribute.

The alt attribute should typically:

Be accurate and equivalent in presenting the same content and function of the image.

Be succinct. This means the correct content (if there is content) and function (if there is a function) of the image should be presented as succinctly as is appropriate. Typically no more than a few words are necessary, though rarely a short sentence or two may be appropriate.

NOT be redundant or provide the same information as text within the context of the image.

NOT use the phrases "image of ..." or "graphic of ..." to describe the image. It is usually apparent to the user that it is an image. And if the image is conveying content, it is typically not necessary that the user know that it is an image that is conveying the content, as opposed to text. If the fact that an image is a photograph or illustration, etc. is important content, it may be useful to include this in alternative text.

Based upon these rules, Option D ( alt="George Washington") would likely be the best alternative text in this instance. Option A unnecessarily describes the image as an image. Option B provides extra information that is not presented directly in the image and it is also redundant with content presented later within the text. Option C (no alt attribute) is not appropriate because the image conveys content that is not directly presented in the surrounding context. Even though the surrounding text does indicate that it's referring to George Washington, visual users can tell this directly from the content of the image - so if the image conveys content, it should be given alternative text.

Example 2

Because of his role as the Commander in Chief of American forces in the Revolutionary War, and, later, the first President of the United States, George Washington is often called the "Father of his Country".

What would be the appropriate alt attribute for the image in Example 2?

1. "George Washington"

2. An empty alt attribute (alt="") will suffice.

3. "Image"

4. The image does not need an alt attribute.

In this case, the content of the image is presented within the surrounding content, so Option B ( alt="") is the best choice. Option A would be redundant. Option C provides extraneous and useless information. Option D (no alt attribute) is never the right choice - every image must have an alt attribute.

Example 3

What would be the appropriate alt attribute for the image in Example 3?

1. An empty alt attribute (alt="") will suffice.

2. "Wikipedia entry for George Washington"

3. "Read More"

4. "George Washington"

In this case, the image is also a link, so it has a function. Whenever an image is within a link, the function of the image must be presented in alternative text that is also within the link. In this case, there is no adjacent text within the link that describes the function, so it must be presented within the alt attribute. As a result, option D ("George Washington") is likely the best choice. While the words "George Washington" in the alt attribute are redundant with the text that follows, in this case the redundancy is necessary to adequately describe the function.

Option A is not adequate. An image that is the only thing inside a link must never have a missing or empty alt attribute. This is because the screen reader must read SOMETHING to identify the link. Screen readers might read the image file name or the URL of the page being linked to, which may or may not be useful. And remember, that the link may be read out of context of the surrounding text, such as when the user is navigating by links within the page. Option B provides content that is not available through the image alone (i.e., you can't tell the image links to Wikipedia simply by looking at it). Option C does not provide an adequate description of the function, especially out of context.

This entire example could also be make much better by placing both the image and the text caption within one link:

In this case, both the content and function of the link and image are presented within the link, so the image can be given alt="" to avoid any redundancy.

When possible, avoid using "link to..." or "click this image to..." or similar wording in the alt attribute. Links are identified as links by screen readers and should be visually apparent to sighted users.

Example 4

In this painting, the artist Emanuel Leutze used light, color, form, perspective, proportion, and motion to create the composition.

What would be the most appropriate alt attribute for the image in Example 4?

1. "George Washington"

2. "Painting of George Washington"

3. "Painting of George Washington crossing the Delaware River"

4. "A classic painting demonstrating the use of light and color to create composition."

5. "Painting of George Washington crossing the Delaware River. Swirling waves surround the boat where the majestic George Washington looks forward out of the storm and into the rays of light across the river as he leads his wary troops to battle."

As before, we should determine if the content of the image is presented in the surrounding context. In this case, it is not (at least not entirely). The image is not within a link, so there is no function. But this image provides a much more difficult examination, and the best answer may not be adequately determined by the limited context we've been given. Regardless, let's look at the possible options.

Option A ("George Washington") probably does not adequately describe the content of the image. The fact that it is George Washington in the painting may not necessarily be relevant in this context. Option B ("Painting of George Washington") may be adequate, but does not provide much additional content. However, it may be appropriate to describe the image as a painting, as opposed to a photograph or other image type. Option C provides more information that may help the user identify the content itself. Remember that alternative text is not just for the blind. Many sighted users would be able to identify the specific painting in question given this description, whereas "George Washington" alone would not be descriptive enough. Option D might be appropriate if the purpose of the image is to present a specific art technique and the content of the image itself is not important. Option E may also be an appropriate alternative if a detailed examination of the painting is in order, but is too long and verbose to be of much use - such text would be better served as text within the web page.

As you can see, there is no one right answer here. The best alternative text will depend on the context and intended content of the image.

Functional Images

Images are often used not only to provide content, but to provide important functions, such as navigation.

Example 5

The "Products" image is part of a navigation bar.

What would be the most appropriate alt attribute for the "Products" navigation image in Example 5?

1. "Products"

2. "Link to Products"

3. The image doesn't convey content, so (alt="") will suffice.

In this case, option A is the best answer. It provides both the content and the function of the image. The image displays the word "Products" and also is a link to the products page on the site. The image will be identified as being within a link, so "Link to" is not necessary, making option B a poor choice. Because the image is the only object within a link, alt="" is never appropriate. When an image contains only text, the text being displayed can usually be used as alternative text.

Example 6

Continue to the next page to read about George Washington's presidency.

What would be the most appropriate alt attribute for the blue arrow image in Example 6?

1. "next"

2. "next page"

3. "George Washington's Presidency"

4. "Continue to George Washington's Presidency"

Again, this is an example that does not have a clear cut best answer. In fact, any of the options could probably be appropriate in this example. Option A and B will probably be sufficient in most cases, as long as it is clear to the user that there are multiple pages within the article. Option C presents very clearly the function of the link, but does not present that the link goes to the next page in a series. Option D may be the best solution as it presents the function of the link and conveys that it is part of a series of pages. As stated previously, determining the most appropriate alternative text is up to personal interpretation based upon the larger context of the image in question. A description of this image ("arrow") would not be appropriate. Perhaps a better solution would be to have the text "Next Page" or similar adjacent to the image and within the link, in which case, the image could be given alt="".

Example 7

What would be the most appropriate alt attribute for the icon image in Example 7? Note that the icon is within the link.

1. "Employment Application"

2. "PDF File"

3. "PDF icon"

4. The content of the image is presented in context, so (alt="") is appropriate.

Notice that the image is within the link. If it were not within the link, then the alt text might be different. In this case, because the image provides additional information about the function of the link, it's important that it be within the link itself and is read with the link. This is vital because links are often accessed out of context from their surroundings.

Option A ("Employment Application") is redundant with surrounding text so it is not the best choice. Option B is the best choice (though perhaps even the more succinct "PDF" would be sufficient) - it clearly provides the content that is being presented by the image - that the link is to a PDF file. The function ("Download the Employment Application") is presented within the text of the link, so it does not need to be included again within the alt attribute. Option C ("PDF icon") really describes the image itself, so it is not most appropriate for this context. In another context, it may be important that the user know that this image is indeed an icon. Option D (empty alt text) would not provide the important information that the image presents.

It is important to note here that if the icon itself were the link to the document, the alternative text should provide a full alternative of the content and function of the link/image combination. Something like, "Download the employment application in PDF format". "PDF format" itself would not be sufficient, especially if there are multiple documents all with links of this nature. In that case, a screen reader user that is navigating through the links on a page would hear, "PDF format, PDF format, PDF format..." As a general rule, if the same image is used multiple times on a page to link to different locations, alternative text within the link should identify the differences.

Decorative Images

Decorative images do not present important content, are used for layout or non-informative purposes, and do not appear within a link. In almost all cases, spacer and decorative images should have empty alt attribute values ( alt="").

Example 8

Content text here.

Footer text here.

What would be the appropriate alt attribute for horizontal separator image in Example 8?

1. "decorative line"

2. "Beginning of footer"

3. "separator"

4. alt="" will suffice

Because the image does not convey content and is not within a link, option D is the most appropriate choice. A description of the image is not appropriate.

When an image is used only for decorative purposes, it is often best to remove the image from the page content and add it as a background image using CSS. This will remove the need for alternative text at all and will remove the image from the semantic and structural flow of the page.

Example 9

Our business promises the best service you will find on the planet. Our team is professionally trained to offer excellent customer service throughout the contract negotiation process.

Customer satisfaction is our top priority and is guaranteed, or your money back.

What would be the appropriate alt attribute for the image in Example 9?

1. "handshake"

2. "Businessmen shake hands to complete a contract"

3. alt="" will suffice

4. "We guarantee our professional services"

When analyzing this example, determine whether the image is presenting important content. In this case, I would argue that it does not. In current practice on the web, many such images are given descriptive alternative text even though the images don't seem to provide useful content. Option C ( alt="") would probably be most appropriate in this case because the image does not convey relevant or important content. Options A and B are descriptive of the image, but do not convey an equivalent of what the image itself is conveying - which in this case is nothing, or perhaps only an emotive mood or feeling. In other words, the image is mostly decorative. Option D is clearly not correct, though it is worth noting that additional information is often injected into alt text to provide additional information or to provide additional keywords to search engines. Such practices are not an appropriate use of alternative text.

In many cases you can ask the question "If I could not use this image, what would I put in its place?" to determine appropriate alternative text.

In the example above, it's not likely that the handshake photo would be replaced with text, thus alt="" is probably sufficient.

Advanced Images

There are some cases wherein determining alternative text can be more difficult. With all images, user testing and testing in screen readers and text-only browsers can help you determine the most appropriate method for implementing alternative text.

Form image buttons

Form image buttons must have an alt attribute that describes the function of the button. Image buttons are often used to provide a more visually appealing or a smaller version of the standard form buttons. The alternative text should describe what the button will do when selected, such as "Search", "Submit", "Register", "Place your order", etc. For instance, <input type="image" alt="Submit Search"> might be appropriate for an image button on a site search form.

Image maps

When using client-side image maps, the main image must have an alt attribute. The alt attribute should present any content that is presented with the image, but that is not presented with the image map hotspots. For instance, if you had a State of New York map that had hotspots for each region, the image may have an alt attribute value of "Regions of New York ". If the main image does not convey content, but is primarily just a container for the hot spots (e.g., a navigation bar), then alt="" is appropriate.

Each image map hotspot ( area element) must have an equivalent alt attribute. Because the hot spots are clickable, each one must have alternative text that describes the function of that hotspot.

Because hotspots for server-side image maps cannot be given alternative text and because they are not keyboard accessible, they should not be used.

Image slices

Sometimes large images are sliced into multiple images on a web site for design purposes. When multiple image slices together convey content, then that content must be presented to the user. Typically, this is done by providing the alternative text in the alt attribute of the largest or most prominent image slice. It is not appropriate to repeat the alternative text unnecessarily, break the alternative text across multiple image alt attributes, or provide no alternative at all. If an image slice is within a link, alternative text describing the function of the link must be provided in the images alt attribute, in the alt attribute of another image within the same link, or within text within the same link. Each link must contain functional text that describes the links function.

Background images

It is not possible to add alternative text directly to CSS or other background images. Images that convey content should not generally be placed in page or element backgrounds.

Background images can, however, be used for decorative images, thus removing the image from the content flow of the page and removing the need for an empty alt attribute.

Sometimes image sprites or other background images are used to present content. While these should generally be avoided, if they are used, any content conveyed through the background image must be made accessible within the page markup. If the PDF icon image in Example 7 above were instead presented via a CSS background image, you could use a text replacement technique to present the content within the link:
<a href="application.pdf">Download the Employment Application<span class="pdficon"> (PDF)</span></a>
You would then use CSS to position the "(PDF)" text (the span class="pdficon" element) off-screen. See CSS in Action: Invisible Content Just for Screen Reader Users for more details. Sighted users would see the PDF background image and screen reader users would hear the off-screen "(PDF)" text.

Complex images

When an equivalent alternative for a complex image, such as a chart, graph, or map cannot be limited to a succinct alt attribute (perhaps a couple sentences in length), then the alternative should be provided elsewhere. The alternative content can often be presented within the context of the page, such as in an adjacent data table. The alternative text can also be provided by linking to a separate web page that provides the longer description of the complex image. The link can be adjacent to the image or the image itself could be linked to the long description page. The alternative text for the image should still describe the general content of the image.

<img src="sales.jpg" alt="Line chart of annual sales data"><br>
<a href="salesdata.htm">View sales data</a>

Figure and figcaption

HTML5 introduces the figure element, optionally with a figcaption, which is self-contained and that is typically referenced as a single unit from the main flow of the document. A figure can be moved away from the main flow of the document without affecting the document's meaning.

figure and figcaption allow a semantic association between a figure and the figure's caption. The figcaption may provide a summary of or additional information about the figure and/or relate the figure back to the containing document. However, any image within a figure must still have an alt attribute value that presents the alternative text of the image - this should not be conveyed via the figcaption.

You can learn much more about figure and figcaption in How do you figure?

Conclusion

Despite being the biggest issue affecting web accessibility, there are still divergent and incorrect methods for implementing alternative text. By following the basic principles outlined here, web developers can make their web content more accessible to individuals with disabilities.

Adding alternative text to images is one of the easiest accessibility principles to learn and one of the hardest to master.

Alternative text may be provided in the alt attribute or in the surrounding context of the image.

Every image must have an alt attribute.

Alternative text should:

present the CONTENT and FUNCTION of the image.

be succinct.

Alternative text should not:

be redundant (be the same as adjacent or body text).

use the phrases "image of..." or "graphic of...".

Appropriate alternative text depends heavily on the image's context.

Alt text of a functional image (e.g., an image within a link) should describe the function as well as the content.

Decorative images still need an alt attribute, but it should be empty (alt="").

The accessibility of the web in general would increase dramatically if alternative text were provided and implemented correctly.

# data[].attributes.attachment_link.description
Introduction Alternative Text Basics Context is Everything Functional Images Decorative Images Advanced Images Form image buttons Image maps Image slices Background images Logos Complex images Figure and figcaption Conclusion Adding alternative text for images is the first principle of web accessibility. It is also one of the most difficult to properly implement.

# data[].attributes.headline
Add your own example of a complex image 

# data[].attributes.subject
Add your own example of a complex image 

# data[].attributes.body
Add any historical, artistic, or scientific image, your HTML code with a brief context description