Jump to main content
University Computer Centre
Alternative Texts

Guideline: Alternative Texts for Graphics

Graphics embedded in HTML require a description of the graphic in the form of an alternative text inside the alt-attribute of the <img>-tag.

<img src="image.png"; alt="Objective and short alternative text about image">

This attribute can be used to provide an initial set text for the graphic. This is important if a graphic cannot be displayed or perceived by the user, for example when using a screen reader. The alternative text is not used to add additional information to the graphic, but to reflect its content depending on the context.

Further information about accessible websites:

But how should such an alternative text look like?

General Problems

For most graphics there is no such thing as the "right" alternative text. When formulating alternative texts, the following two aspects must be taken into account:

  1. Alternative texts should be formulated as objectively as possible. Interpretations are permissible only if an editorial team wants to achieve a certain effect or if an image obviously transmits emotions.
  2. Alternative texts should be formulated as concisely as possible (maximal 100 characters). Especially text for graphics with different content and/or design features can therefore only cover essential features of a graphic. This is further complicated by the fact that different users may be interested in different details in an image.

It is important that

  • the content requirement for the alternative text depends on the context (body text and, if applicable, caption), and
  • additional description forms are available for graphics - so called long descriptions - besides alternative text.

In certain situations the specification of an image type is advantageous. e. g. alt="logo: ..." oralt="book cover: ...". This conveys the kind of graphic. If the content of a graphic is already described in the context of the same, is it acceptable to refer to this in the alternative text.

Since it is not possible to establish a formulation rule for every single conceivable graphic, the following guideline focuses on examples of alternative texts. They are distinguished into Functional, Identifying, Descriptive and Empty. The choice of examples is based on the study Alternative text of images .

Functional Alternative Texts

Functional alternative texts are applied when graphics are linked or used as buttons. The aim when using functional alternative texts is to select the alternative texts in such a way that the purpose of the link and its function are unambiguous. The printer icon for printing a web page must therefore be labelled "Print" and not "Stylized printer". Graphics are often used together with the text as active elements - thus the link text or designation is composed of text and alternative text. In short: When using functional alternative texts the link text or the form description is the important matter, not the description of the graphic.

Further information about web accessibility:

If the button for a search is represented exclusively by a magnifying glass, the alternative text must be "Search":

Input field with magnifying glass icon on the right and an option for full text search

<img src="magnifying_glass.png" alt="Search">

However, if a text is added to the icon, the alternative text must be null:

Input field followed by button with magnifying glass and text 'Search'.

<button>
    <img src="magnifying_glass.png" alt=""> Search
</button>

Sometimes icons are placed in front of a link. If the link text itself has no corresponding text, alternative texts for the following icons are required:

  • format change for icons for PDF, MS Word, video or audio ("PDF", "Microsoft Word", "Video", "Audio")
  • open new browser window ("New window")
  • leaving the website ("External" or "External page")

Not every prefixed icon needs an alternative text. The most important reason for considering an alternate text for a prefixed icon is the announcement of a context change - i.e. a new application, a new window, a new tab.

Furthermore, there are situations in which an icon appears several times on a page, but has different meanings - for example, an icon for further or supporting information at different form fields. This can be seen in following excerpt of an event form:

Section of a form with information icons at individual input fields

In the above case the alternative texts must be clearly formulated because they represent link texts. Possible are statements such as: "Information on event description " for the event description field or "Information on third party revenue" for the funding field, etc. It is important to use the same word stem "Information on ..." (also "notes on ...", "help on ...").

Further information about web accessibility:

Graphics of text should be avoided whenever possible. If graphics of text are used, the alternative text should reflect the visible text. For components of the user interface, short functional notations should be chosen.

Further information about web accessibility:

If the logo of TU Chemnitz is linked,

Logo of the TU Chemnitz with mouse pointer

following the alternative texts is acceptable:

  • "Homepage TU Chemnitz" - the alternative text indicates the link purpose within the same webpage
  • "to TU Chemnitz" - the alternative text specifies the link purpose on another webpage

If a graphic contains writing and is linked, but there are no references to the text in the context, the image type and the essential texts should be in the alternative text:

Book Cover: Technology edition of the URZ, central IT-Services at the TU Chemnitz. Fiscal years 2014/ 2015 – with mouse pointer.

  • Recommendation: "Book Cover: Technology edition of the URZ, central IT-Services at the TU Chemnitz. Fiscal years 2014/ 2015".
  • Furthermore, additional information on the link purpose can be considered, for example, whether it is a publisher's or library's site. Such additions should only be written when aiming to create a distinct link purpose.

There is usually more information on an event poster than on a book cover. If this information cannot be retrieved from the context of the graphic, the following alternative texts can be used for the linked image of text.

Poster of Chemnitz Linux-Days 2015 showing event highlights – with mouse pointer

  • Recommendation: "Chemnitz Linux-Days 2015, Open-Source-Event, central auditorium- and seminar building of the TU Chemnitz, 21. and 22. March 2015" - name, type, place and date of the event.
  • It is not recommended to specify details about the program, sponsors, or design, otherwise the link text will be too long.

Alternative texts for banners should include the product or event in question, in this case, "Chemnitz Linux-Days 2016". In addition, a short description of the motive and/or the indication of the advertising slogan can be added: "Robot tinkering Tux" respectively: "Motto: It's your project". If there are no comparable link texts on the page, the name of the provider may also be a sufficient alternative text.

Banner of the Chemnitz Linux-Days 2016 with robot tinkering Tux


Identifying Alternative Text

Many graphics have little meaning in terms of content or are already explained in the body text, such as illustrative photos of people or a curve diagram. If a graphic merely illustrates the surrounding text, a concise identifying alternative text is sufficient, e. g. alt="Coach hugs several players" or alt="Curve diagram as described in the previous paragraph". In the alternative text the content of the graphic is given, but a more detailed description of the graphic is obtained by reading the context or through a long description.

If a graphic does not contribute to the understanding of the rest of the content, but still has special details that are not described in the text, a short alternative text indicating the detail should be applied. In the following example, it is assumed that the graphic is shown on a web page about a report of the Chemnitz city festival:

The monument of Karl Marx watches the Ferris wheel Image: Uwe Meinhold, Press photo archive of the TU Chemnitz

Possible alternative texts:

  • Recommended: Identify the photo and provide details that are out of context, e. g. the corresponding image description in the press archive: "The monument of Karl Marx watches the Ferris wheel."
  • Follow the effect the editor intended/the image shows
  • Specification of the image type: "Photo: The monument of Karl Marx in front of the Ferris wheel". Such additions are usually not necessary, unless the graphic must be distinguished from other similar graphics.

Certain graphics cannot be described succinctly. This applies e. g. for information graphs such as diagrams:

Bar chart with data on student numbers from 2004 to 2015 and proportion male/female

Possible Alternative Texts:

  • Recommendation: Description in context (e. g. as a table, see facts and numbers of the TU Chemnitz) and alternative text "Bar chart with data on student numbers from 2004 to 2015 and proportion male/female".
  • It is also possible to display the values in the diagram as text. However, the alternative text then usually contains significantly more than 100 characters and is not easily understood.

Images of artwork do not need to be described according to WCAG 2.0, as they primarily serve the sensory experience. Identifying alternative texts are therefore to be used, e. g. "Mural by Klaus Neubauer in the staircase of the TU Chemnitz, 1969"s:

Photo of a mural by Klaus Neubauer in the staircase of the TU Chemnitz Photo: Mario Steinebach, Press article about the artwork

Generally suitable alternative texts:

  • Name of the artwork and the artist, type of work, century/era/style. For example: The famous painting of the Mona Lisa "Mona Lisa (La Joconde). Oil painting by Leonardo da Vinci (early 16th century)" or
  • Type: title, artist's name, for example "Mona Lisa (La Joconde) by Leonardo da Vinci".

Descriptive Alternative Texts

Images that are not described in context require descriptive alternative text e. g. alt="A visibly satisfied Juergen Klopp hugs several players in the centre circle" or alt="Curve diagram: visitor numbers rise steadily from 56,000 in 2010 to 98,000 in 2015". With the descriptive alternative text, the content of the graphic is described as objectively as possible, but still concisely. Descriptive alternative texts are required, especially when the content or effect of a graphic cannot be retrieved from the context alone. When determining descriptive alternative texts, it should always be checked whether the context can be expanded beforehand. Ideally, the information can be fully understood within the context.

There are numerous graphics that display text. In most cases, the visible text must be included in the alternative text. Sometimes special features must be considered:

Logo of the TU Chemnitz

For example, the following texts can be applied for the not linked TU Chemnitz logo:

  • Recommendation: "Logo: TU Chemnitz" (image type, content)
  • "TU Chemnitz logo"

For some logos a long description is useful. As an example, we take the logo of the Faculty of Computer Science:

Logo of the faculty of Computer Science

<img longdesc="description.txt" src="if-logo.png" alt="Logo of the faculty of Computer Science">

A book or album cover primarily provides text. However, the design can also play a fair role:

Album cover example with photo of robot and handwritten looking lettering

If the textual information is provided within the context, the following alternative texts can be used appropriately:

  • Recommendation: Image type and description of subject, "Album cover with photo of blue and white robot with glowing eyes"
  • When information such as the album name, style details, e. g. photo and type design, and the artists are missing in the context, they can also be included in the alternative text.

When observing election posters, the design plays a decent role, but the core message is all about the people, parties and slogans.

Suitable Alternative Texts:

  • Recommendation: image type, name of the person depicted and description of the design.
  • In other cases, indication of the party and slogan also have to be considered.
  • Image type and name of the person, if necessary slogan
  • The restriction of the alternative text to 100 characters might require a long description.

Event posters usually contain even more specific dates. Important information, such as date and location, should always be provided within the context and not just on the graphic.

Event poster of the Django course from 2015

Suitable Alternative Texts:

  • Recommendation: Image type and name of the event. For example "Poster: Programming course 'Dynamic websites with Python and Django'".
  • Furthermore, other texts can be included in the alternative text -depending on the context. A long description may have to be considered.

Describing photographs is significantly more difficult than describing written graphics. Photos can convey information, but they can also trigger emotions. For example, a photo of the controversial pilot whale fishery on the Faroe Islands: Below are shown different possibilities on how to handle such photos.

Suitable Alternative Texts:

  • Recommendation: As objective and factual as possible: "Fishermen cut up the catch on the spot."
  • Expression of effect/intention, for example: "Splitting the catch in the bay stained red by blood".
  • Depending on the context, the emotion to be conveyed may be different (pride or shock): "The fishermen with 50 whales killed."

Similarly, the use of images to achieve a specific effect, for example, pictures of happy graduates on the university website convey a positive feeling:

Photo of the 500 round graduates throwing their hats Photo: Steve Conrad

Suitable Alternative Texts:

  • Recommendation: Photo of the jubilant graduates after successful graduation.
  • Photo: Around 500 graduates happily throw their barrettes in the air.

For photos of people, the first thing that matters is the name.

Mario Haustein and Antje Schreiber planning the lecture program of the Chemnitz Linux Days Photo: Steve Conrad

Suitable Alternative Texts:

  • Naming the person by name: Antje Schreiber and Mario Haustein
  • If applicable, describe the situation/action: Antje Schreiber, Mario Haustein and a plush Tux sitting at a desk that is covered with pieces of paper
  • Long description - information about facial expression, location of shot, type of image, and/or an evaluation of facial expression - consider on a case-by-case basis.

These requirements also apply to the creation of alternative texts for photos of known persons.

Empty Alternative Texts

An empty alternative text has no content. Empty alternative texts are to be used for purely decorative or redundant graphics. The specification alt="" causes a screen reader to ignore a graphic.

<img src="bild.png" alt="">

In this case, the browser does not transmit any information to the Accessibility-Tree of the operating system, a screen reader will be able to ignore the graphic entirely.

Empty alternative texts come into question for decorative, invisible graphics that are redundant to the text.

Decorative graphics do not show any independent information. The header images on the web pages of the TU Chemnitz are suitable representatives of such graphics:

Screenshot excerpt, university communication website with decorative header image.

Continuous text with two links to internal pages, marked by icons

This includes graphics that are unnecessary for the text. For example: continuous texts with links to internal pages, marked by icons. The link is already identified by a screen reader and the icon does not provide any significant additional information. Only when an icon signals a change in context should this case be included in the alternative text, also see Section "Functional Alternative Texts". Other examples of redundant graphics are icons that visualize a text.

Furthermore, (partly invisible) graphics are occasionally used for layout purposes. Such graphics also require an empty alternative text.

Graphics with an empty alternative text can be included for screen readers just as well as via CSS. To ensure these graphics are still detectable when using contrast mode, the background CSS-feature is to be waived. Instead the pseudo-element :before or :after in connection with the property content are to be used.

Situational Decisions

As illustrated in the examples above, different alternative texts can be considered for certain graphics, depending on function and context. In addition, the technical implementation can have an impact on the text alternative. For example, graphics that are embedded using CSS require text alternatives in the form of invisible text. HTML implementation techniques can also have an impact on the choice of alternative text - for example, when using teaser graphics.

There are many variants for the implementation of teasers. Typically, they consist of a linked headline, a graphic, a brief description and possibly another link ("more" or similar). A clear recommendation for the alternative text type cannot be given.

  • If the graphics are not linked, they need identifying alternative text.
  • If the graphics are linked, they need functional alternative texts, e. g. the associated heading texts.
  • If the graphics are linked together with the headline texts, they need empty alternative texts.

On the website of the TU Chemnitz there is the section "University news", which provides access to current news of the university via teaser images and texts. There the image and headline are linked, the alt text is null.

Detail from the start screen of the TU website with teaser images for messages


Supplementary Notes

Finally, some problematic issues and implementation techniques are demonstrated.

For alternative texts, there are some aspects that can be considered in the editorial work:

  • There are no binding specifications regarding the length of an alternative text. In general, it is assumed that a length of 100 characters, i.e. one to two sentences, should not be exceeded. Otherwise, it is no longer a short text alternative, but a long description. The basic problem with a too log text is, that the alternative texts do not have any structures, while longer texts are normally structured by paragraphs or headings.
  • The order of words in the alternative text is generally unimportant. Whether "letter carrier is bitten by a dog" or "dog bites the letter carrier" is written, is subject to the preference of the editor. Whether alternative text should be written in complete sentences or in keywords is also not important and up to the editor.
  • When using illustrative graphics, there always occurs the problem of differentiating between decorative and informative graphics. This problem is further complicated by varying contexts. In case of doubt, alternative texts should be provided (differentiation from decorative graphics) or the graphics should be described (differentiation from informative graphics).

With HTML5, graphics can be semantically grouped with a caption:

<figure>
    <img src="mona-lisa.jpg" alt="Painting">
    <figcaption>Mona Lisa</figcaption>
</figure>

A screen reader should output the following:

  • group Mona Lisa
  • graphic painting
  • group end

This pure HTML5 technique is certainly the best way to structurally merge an image and caption. So far, however, it is still little supported by browsers and screen readers. Therefore, the caption must currently be linked to the image using a different technique:

<figure>
    <img src="mona-lisa.jpg" alt=" " aria-labelledby="bildunterschrift-ID">
    <figcaption id="bildunterschrift-ID" aria-hidden="true"> Mona Lisa (La Joconde).
    Oil painting from Leonardo da Vinci (early 16th century)</figcaption>
</figure>

The following should be noted:

The alternative text (a space) prevents the graphic from being evaluated as decorative and allows information about the graphic to be transferred from the browser to the accessibility tree. The attribute aria-labelledby replaces the alternative text with the linked text - in this case the caption. The attribute aria-hidden removes the caption from the screen reader's reading flow to avoid redundancy.

Accessibility support for HTML5 and ARIA techniques in browsers and screen readers is currently subject to constant change. In long-term projects, pure HTML5 technology is likely to be used, but for current projects you should always use aria-labelledby.

If an additional description is required in addition to the alternative text, several technical options are available. Basically, descriptions in the immediate context are to be preferred:

  • Reference to the context in an identifying alternative text, e. g. alt="Number of students in 2016 as described in the previous paragraph".
  • Grouping of image and context with the <figure>-element, see previous section on captions.
  • Linking a long description with the graphic through the longdesc-attribute for the <img>-element:
    <img src="image.png" alt="Alternative text as objective and concise as possible" longdesc="descriptionpage.html" />, the longdesc-attribute is only useful for non-functional graphics.
  • Putting a visible link to the long description right next to the graphic - like the longdesc-attribute, with the difference that everyone can perceive the link. This technique can also be used for functional graphics.
  • Using the aria-describedby-attribute for a graphic, to link a description on the same page with the graphic: <img src="image.png" alt="Alternative text as objective and concise as possible" aria-describedby="#previous_paragraph" />
  • On no account is it appropriate to use the title-attribute.

Press Articles