Guideline: Alternative Texts for Graphics

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

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

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

<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:

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:

• Success Criterion 3.2.5 (Change on Request)
• Success Criterion 3.2.4 (Consistent Identification)

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:

• Success Criterion 1.4.5 (Images of Text)
• Success Criterion 1.4.9 (Images of Text with no Exception)

If the logo of TU Chemnitz is linked,

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:

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.

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.

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:

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:

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: 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".

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:

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:

<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:

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.

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: 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.

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.

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:

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

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.