156 issues found for 1.1.1 Non-text Content

Text content should be actual text, icon should then use a null alt attribute.

Use appropriate alt texts to convey visually communicated information. This could be:

1. "Screenshot: Android Einstellungen. Menüpunkt 'Verbindungen' ist hervorgehoben"

2. "Screenshot: Menü 'Verbindungen'. Menüpunkt 'Mobile Netzwerke' ist hervorgehoben"

3. "Screenshot: Menü 'Mobile Netzwerke'. Menüpunkt Schalter 'Daten-Roaming' ist hervorgehoben und aktiviert"

Alternatively you can ensure the provided text is already serving an equivalent purpose:

1. Wählen Sie in den Android Einstellungen den Menüpunkt „Verbindungen“ aus.

2. Wählen Sie im Menü „Verbindungen“ den Menüpunkt „Mobile Netzwerke“ aus.

3. Aktivieren Sie im Menü „Mobile Netzwerke“ den Menüpunkt Schalter “Daten-Roaming”.

Doing so, the images could then be marked decorative by using a null alt attribute.

Decorative non-text content (images, icons) MUST not be described via alt attribute. They must use a null alt attribute (alt="").

Ensure, the icons have a purpose equivalent text alternative present. On an <img> tag, use the alt attribute. On an <svg>, use the <title> element.

Purpose equivalent means, it is not a description of the icon but a description of its purpose. For the Partnernetze table this could be "Enthalten" & "Nicht enthalten" or similar.

Ensure, the text alternative for the image serves an equivalent purpose to the image. Given the specific offer character of the image, the text alternative must include all offer details, conveyed by the image.

It is worth mentioning, that for sighted users as well, "UNLIMITED" might not be an appropriate heading or page introduction as well. Structuring the content for all users, introducing the "unlimited" offer first, will be helpful for all users. The "UNLIMITED" wording, without clicking through to other pages, is not resolved at all on the page.

There usually are two options.

1. Decide, the image is decorative, without any informative value, and set a null alt attribute

2. Set appropriate text alternative for the image

Option 1 is often used to save time and cost but must only be used for actual decorative images. If a non-decorative image uses a null alt attribute, it is considered a clear failure of the success criterion. If you find yourself, arguing the images being decorative only, consider re-structuring the page so that the images are not needed at all.

Thus, option 2 usually is the preferred method to handle the issue. Ensure, following a method like the W3C Alt decision tree to evaluate, whether you need a text alternative and to figure out what appropriate (purpose equivalent) text alternative could look like.

Use appropriate, purpose equivalent text alternative on images. This can be "Logo Apple TV+", "Logo Disney+", ...

Describe the actual content of the image like "Samsung Galaxy S25 in Farbe XYZ". While this is not necessary for all, the screenshot example shows at least one product that will fail under this success criterion. The text alternative of the Google Pixel 9a must include not only the smartphone but also a mention of the headphones.

Ideally, these images are taken from the product detail pages, making it easy to also get a designated text alternative in programmatically. This text alternative should be set manually to ensure it being purpose equivalent.

Decorative images must use null alt attributes.

All non-decorative images must have a text alternative that serves an equivalent purpose of the image.

Ensure, making all informative content of the images (text, device choice, device specifics, logos, etc.) accessible through text.

If there is no way around using the delivered assets, this can be done by adding a visually hidden (screen reader only) CSS class, replicating the text and non-text content text alternative.

Example for a visually hidden class by Chris Coyer:

.visually-hidden:not(:focus):not(:active) {
  clip: rect(0 0 0 0); 
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap; 
  width: 1px;
}

• Ankaufsbonus

  • Change the text alternative to communicate the icon's purpose, e.g. by setting alt="Ankaufspreis Ihres Altgerätes".

• Vorbestellung

  • Add <title> element to SVG or embed SVG from file and treat like <img>

  • If declaring icon as decorative, ensure <title> element is empty and SVG is hidden from screen readers by setting aria-hidden="true"

Change the text alternative to communicate the image's purpose, e.g. by setting it to the displayed text content: alt="2× Speicher-Upgrade".

There are multiple ways to remediate this issue.

Image description

The ideal way would be to use the actual image description. Possible text alternatives for the example devices in the screenshot could be in the following style:

• "Apple iPad Air 13" (2025) M3 in Space Grau. Vorderseite mit generischem Wallpaper, Hinterseite mit Kamera"

• "Samsung Galaxy S25 Edge in Titanium Icyblue (hellblau). Vorderseite mit Gerätenamen als Schriftzug, Seitenansicht, Promotion für 2× Speicher-Upgrade inklusive"

• "Samsung Galaxy S25 Ultra in Schwarz. Vorderseite mit Gerätenamen als Schriftzug, Rückseite mit 5 Kameras"

Declare decorative

A less ideal way would be to declare the device image as decorative by using a null alt attribute, removing it from the accessibility tree. There are a few caveats to this "tactic", though and if using it, there are multiple other steps to be done, to ensure conformance with this success criterion.

• While this would improve the current use of the images' text alternatives, removing the content duplication, it does not really solve the issue of the images' purpose not being communicated.

• A decorative image only is purely decorative, if not adding any information that is not communicated otherwise. While device name and device color might be information which is available elsewhere, the actual description of the device is not.

• Declaring the images decorative, you additionally MUST ensure, all other information (color, promotions, add-ons, extra devices like styluses, etc.) is available as text in the product card.

Change the text alternative to communicate the icon's purpose, e.g. by setting alt="Geräte von Apple anzeigen". Ensure to deliver accessible, purpose equivalent text alternatives for all filter states.

• No manufacturer filter selected: "Nur Geräte von MANUFACTURER anzeigen"

• One manufacturer filter selected

  • selected filter: "Alle Geräte anzeigen"

  • non-selected filter: "Geräte von MANUFACTURER anzeigen"

• Multiple manufacturer filters selected

  • selected filter: "Geräte von MANUFACTURER nicht mehr anzeigen" (or ideally even announcing the still selected filters, see notes below)

  • non-selected filter: "Geräte von MANUFACTURER anzeigen"

One possible solution would be to use native checkbox inputs for the manufacturer filters. But the structural idea down below can be used with other methods as well.

<fieldset>
  <legend>Filter nach Endgeräte-Hersteller</legend>

  <input type="checkbox" 
         id="manufacturer-apple" 
         name="manufacturer" 
         value="Apple" 
         checked />
  <label for="manufacturer-apple">
    <svg><title>Apple</title>...</svg>
  </label>

  <input type="checkbox" 
         id="manufacturer-google" 
         name="manufacturer" 
         value="Google" />
  <label for="manufacturer-google">
    <svg><title>Google</title>...</svg>
  </label>

  <input type="checkbox" 
         id="manufacturer-samsung" 
         name="manufacturer" 
         value="Samsung" 
         checked />
  <label for="manufacturer-samsung">
    <svg><title>Samsung</title>...</svg>
  </label>

  <input type="checkbox" 
         id="manufacturer-telekom" 
         name="manufacturer" 
         value="Telekom" />
  <label for="manufacturer-telekom">
    <svg><title>Telekom</title>...</svg>
  </label>

  <input type="checkbox" 
         id="manufacturer-xiaomi" 
         name="manufacturer" 
         value="Xiaomi" />
  <label for="manufacturer-xiaomi">
    <svg><title>Xiaomi</title>...</svg>
  </label>
</fieldset>

From there work with the ids of checked/unchecked to create the accessible names by dynamically adding IDs of checked inputs. This way, you could create something like "Geräte von MANUFACTURER nicht mehr anzeigen. Es werden Geräte gezeigt von: CHECKED_MANUFACTURERS"

Change the text alternative to communicate the icon's purpose, e.g. by setting alt="Tarifdetails anzeigen/ausblenden".

Ensure, purely decorative images have a null alt attribute set. SVGs must have an empty <title> element instead and ideally be hidden manually via aria-hidden="true".

For more information about accessible icon buttons, refer to Sara Soueidan's "Accessible Icon Buttons" article.

If an image is declared to be informative rather than decorative, a purpose equivalent text alternative must be programmatically determinable. Duplicating already existing text content never is purpose equivalent of an image. See the W3C Alt-decision tree for more information about types of non-text content.

The ideal way would be to use the actual image description. Possible text alternatives for the example devices in the screenshot could be in the following style:

• "Kids Watch Xplora X6 Play in schwarz mit orangenem Akzent. Auf dem Display die Anzeige eines eingehenden Anrufs von 'Mama'."

• ...

Ensure, using proper text alternatives for images. If the image contains text content, the text alternative should include all of its text content as well.

A text alternative does not need to be within the image's alt attribute. It can be conveyed by the text beside it, as long as it is purpose equivalent. So either, an equivalent alt attribute should be set, or a null alt attribute is used to mark image decorative in combination with changing the text besides it to convey all visible information from the image.

As an alt attribute is already set, removing the aria-hidden="true" is all that needs to be done.

Side note: there is no need for using ARIA attribute to hide an image from screen readers. A null alt attribute is the preferred native HTML method to do so.

The content of the images show more than the heading says. Arguably, the team names are purpose equivalent to the team's shields and so is the league logo. If so, the image is decorative and must use a null alt attribute to hide it from screen readers.

If the image is not declared decorative, a purpose equivalent text alternative must be presented, by e.g. describing the contents as "Vereinslogos von Real Madrid und Real Sociedad, das Logo der 1. spanischen Liga 'La Liga' und das DAZN Logo".

Purpose of the image is to convey information about the league and optionally to be clicked to reveal more information. An equivalent could be:

"LEAGUE NAME Logo. Klicken Sie für mehr Informationen."

Ensure all visually conveyed information are available in a text alternative. This does not need to be via alt attribute and can also be done via visually presented text, but in either case, the purpose equivalent alternative must be met.

"Logos der Dienste, die in der MegaSport Option enthalten sind. Penny..., Magenta Sport, WOW, ..."

Ensure, all non-decorative images have a purpose equivalent text alternative set.

The images need a purpose equivalent text alternative. This can be done via the images' alt attribute but does not have to be. If doing it, ensure to not only add the media name but also the category as this is part of the visually communicated information.

Purpose of the marquee teaser is to show the categories (movies, tv shows, sports channels) and examples in each category. A purpose equivalent text alternative needs to communicate all those information and could be a nested list like this:

<ul>
  <li><strong>WOW Filme</strong>
    <ul>
      <li>Der wilde Roboter</li>
      ...
    </ul>
  </li>

  <li><strong>WOW Live-Sport</strong>
    <ul>
      <li>1. Bundesliga</li>
      ...
    </ul>
  </li>

  <li><strong>WOW Serien</strong>
    <ul>
      <li>The White Lotus S3</li>
      ...
    </ul>
  </li>
</ul>

The list could then be hidden by using a class="visually-hidden" with:

.visually-hidden:not(:focus):not(:active) {
  clip: rect(0 0 0 0); 
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap; 
  width: 1px;
}

This will keep the list accessible to assistive technology while not presenting it visually.

While not a failure of a success criterion, the heading structure can be simplified by using best practices. Please also refer to observation 1.3.1 Info and Relationships – "Semantic HTML" for general remarks about the use of semantic HTML. Example simplification, using the already existing text alternative of the image within the heading:

<h3>
  <img alt="WOW" width="200" height="133" src="...">
  <span>Sport, Filme &amp; Serien in einem Paket</span>
</h3>

Ensure understanding the purpose of the used imagery and create a purpose equivalent text alternative to be accessible to e.g. screen readers by describing image's purpose in text or using the image's alt attribute.

Usually, images' text alternatives should also be unique. As the alternatives must be purpose equivalent and using multiple images for the exact same purpose would be a rare occasion, so should be the use of the same text alternative. If the purpose indeed is the exact same, evaluate the need to include this duplication in content.

All non-decorative images must have a purpose equivalent text alternative.

All decorative images must be hidden from assistive technology (e.g. by providing a null alt attribute: <img alt="" />).

All non-decorative images must have a purpose equivalent text alternative.

All decorative images must be hidden from assistive technology (e.g. by providing a null alt attribute: <img alt="" />).

All decorative images must be hidden from assistive technology (e.g. by providing a null alt attribute: <img alt="" />).

All decorative images must be hidden from assistive technology (e.g. by providing a null alt attribute: <img alt="" />).

All decorative images must be hidden from assistive technology (e.g. by providing a null alt attribute: <img alt="" />).

Side note: do not use graphics for layout purposes at all. Please (also) refer to observation 1.3.1 Info and Relationships – "Semantic HTML" for general remarks about the use of semantic HTML.

Purpose equivalent text alternative to a functional image is the description of the function of the image. As the images are used as "Select / Deselect" buttons for user's choice, answering the question "Welchen Sport wollen Sie live bei MagentaTV sehen?", a more appropriate text alternative would be "[Bundesliga] hinzufügen / entfernen".

The construct has more issues, which should be remediated together. As the section is used as a selection form, proper form structure with fieldset, checkboxes for inputs (rather than buttons with switch role) and the images as the input field's label, would create a more usable and accessible experience. The base construct could look like this:

<div>
  <fieldset aria-describedby="sports-hint">
    <legend>
      <h2>
        Welchen Sport wollen Sie live bei MagentaTV sehen?
      </h2>
    </legend>
    <div id="sports-hint">
      Wählen Sie alle zutreffenden Optionen
    </div>

    <div>
      <div>
        <input id="sports-1" name="sports" type="checkbox" value="bundesliga">
        <label for="sports-1">
          <img src="..." alt="Bundesliga" />
        </label>
      </div>
      <div>
        <input id="sports-2" name="sports" type="checkbox" value="bundesliga2">
        <label for="sports-2">
          <img src="..." alt="2. Bundesliga" />
        </label>
      </div>
      <div>
        <input id="sports-3" name="sports" type="checkbox" value="bundesliga3">
        <label for="sports-3">
          <img src="..." alt="3. Liga" />
        </label>
      </div>

      ...
    </div>
  </fieldset>
</div>

Hide decorative images by using a null alt attribute (alt="").

The image is informative. As such, it is most appropriate to describe its contents to accurately convey its purpose. Instead of duplicating the section heading, a better alternative could be "Die Spanische Fußball-Nationalmannschaft der Männer feiert nach dem Finalsieg mit dem Pokal. Es fliegt Konfetti."

Purpose of the image is to convey information about the league and optionally to be clicked to reveal more information. An equivalent could be:

"LEAGUE NAME Logo. Klicken Sie für mehr Informationen."

As the purpose of the images is to convey the visually presented text, no other content should be present in the text alternative. Remove the "Logo" parts and use "Mega" and "Sport" as text alternatives.

Side note / Alternative: As the images are used as the page's main heading, ideally they're used inside the HTML heading element. It should also be considered, moving them into one image to avoid the need for users of assistive technology to click through two items to get the text content of the main heading. This can also be achieved, by moving the images into the HTML heading element, keep the heading's text content, and setting null alt attributes on the images to hide them from assistive technology: <h1><img src="..." alt="" /><img src="..." alt="" />MegaSport</h1>

When using images as headings, ensure the text alternative does only represent the wanted heading content and does not describe the image (like "XYZ Logo").

Ensure, purely decorative images have a null alt attribute set. SVGs must have an empty <title> element instead and ideally be hidden manually via aria-hidden="true".

Side notes:

For more information about accessible icon buttons, refer to Sara Soueidan's "Accessible Icon Buttons" article.

If an image is declared to be informative rather than decorative, a purpose equivalent text alternative must be programmatically determinable. Duplicating already existing text content never is purpose equivalent of an image. See the W3C Alt-decision tree for more information about types of non-text content.

• "Penny DEL" → "Penny DEL – Deutsche Eishockeyliga"

• "Fyleralarm Frauen-Bundesliga" → "Google Pixel Frauen-Bundesliga Fußball"

• "Basketball BBL" → "Turkish Airlines Euroleague Basketball"

• "Basketball DBB" → "Deutscher Basketball Bund – DBB"

• "Basketball DEB" → "Deutscher Eishockey-Bund – DEB"

Purpose of the image is to convey information about the league and optionally to be clicked to reveal more information. An equivalent could be:

"LEAGUE NAME. Klicken Sie für mehr Informationen."

Ensure accuracy when writing text alternatives while meeting equivalent purpose of the image. The image does show a variety of devices that run MagentaSport. A purpose equivalent text alternative could be "Beispiel-Inhalte aus MagentaSport auf einer Vielzahl von Geräten".

Or, if specificity is of importance the previous recommendation can be extended by adding more details after: "Beispiel-Inhalte aus MagentaSport auf einer Vielzahl von Geräten – Eishockey, Fußball und Basketball auf Fernseher, Laptop, Tablet und DEVICE XYZ.".

Ensure accuracy when writing text alternatives while meeting equivalent purpose of the image. Remediation depends on wanted specificity. Possible text alternatives could be

• "Push-Mitteilung über den Start eines kommenden Eishockey-Spiels"

• "Beispiel Push-Mitteilung auf dem Sperrbildschirm eines Smartphones"

• "MagentaSport App zeigt Push-Mitteilung, dass ein Eishockey-Spiel bald startet"

Ensure all visually conveyed information are available in a text alternative. This does not need to be via alt attribute and can also be done via visually presented text, but in either case, the purpose equivalent alternative must be met.

"Logos der Dienste, die in der MegaSport Option enthalten sind. Penny..., Magenta Sport, WOW, ..."

Ensure, providing purpose equivalent text alternatives to all non-decorative images. In this cases, accurate image descriptions are needed. E.g.:

• Zwei verschiedene Smartwatches zeigen ihren Anruf-Bildschirm mit Bild der anrufenden Person (Mama) und Knöpfen zum Ablehnen oder Annehmen des Anrufs.

• Im Vordergrund hervorgehoben eine Smartwatch in verschiedenen Farben. Grün, Schwarz, Pink. Die Uhren zeigen unterschiedliche Bildschirme. Schrittzähler, Anruf-Bildschirm, Zifferblatt. Im Hintergrund zwei Kinder in Waldlandschaft. Sie schauen zusammen auf eine Armbanduhr.

• Zwei Kinder in einem Schulzimmer sitzen an ihren Tischen und schreiben. Das Kind im Vordergrund lächelt zufrieden. Es trägt eine Smartwatch mit pinkem Bildschirm-Rahmen.

Ensure, added image description via alt attribute accurately describes the image. Add relevant information of the image and keep out all information that is not part of the image. Ensure, not adding false information to the image description.

Provide purpose equivalent text alternative for all non-decorative images, especially for relevant images like the smartwatch image that is the main topic of the page.

Provide purpose equivalent text alternative for all non-decorative images, especially for relevant images like the smartwatch image that is the main topic of the page.

Ensure, understanding the purpose of the images to provide accurate, equivalent text alternatives. As a recommendation, replace the images in a layout with the image's purpose. What is the intention of using the image? When the intended purpose is final, use this as text alternative.

When referring to specific context, ensure, using the same wordings (Umrandung vs. Farbe der Uhr vs. Uhrrahmen).

The image's text alternative depends on the intended purpose.

• If the purpose is to show a video still, ensure, added image description via alt attribute accurately describes the image. Add relevant information of the image and keep out all information that is not part of the image. Ensure, not adding false information to the image description.

• If the purpose is to function as the play button, describe the function as "Video XYZ abspielen"

• If the image is decorative, provide null alt attribute

Ensure, added image description via alt attribute accurately describes the image. Add relevant information of the image and keep out all information that is not part of the image. Ensure, not adding false information to the image description.

Ensure, added image description via alt attribute accurately describes the image. Add relevant information of the image and keep out all information that is not part of the image. Ensure, not adding false information to the image description.

When the "Coins verdienen" functionality of the watch is the intended purpose of the image, the focus can be on this functionality. It is important to not add inaccurate information to the text alternative. If the real-life image part in the background is decorative to the image's intended purpose, it does not have to be described at all. A possible text alternative could be "Xplora Schrittzähler zeigt X Schritte und sammelt damit Y Xplora Coins"

Side note: if 1k steps equal 1 coin, the image should not show 3 coins while only showing 450 steps

Ensure, functional images are using a text alternative that describes the function, rather than the image content. Use

• "Für Apple iPhone die Xplora App im App Store herunterladen" and

• "Für Android Handys die Xplora App bei Google Play herunterladen"

Ensure, all decorative icons use null alt attributes. Remove the accessible name from decorative images by setting alt="".

Ensure, the icons use purpose equivalent text alternatives. Text alternative wording is dependent on the table header column wording as well. Possible text alternatives could be "Ja" for checkmark icon and "Nein" for cross icon. Ensure, wording matches the wording of table header column.

Ensure, using accurate image descriptions for informative images.

Ensure, all decorative icons use null alt attributes. Remove the accessible name from decorative images by setting alt="".

Ensure, functional images are using a text alternative that describes the function, rather than the image content. Use

• "Für Apple iPhone die App XYZ im App Store herunterladen" and

• "Für Android Handys die App XYZ bei Google Play herunterladen"

Ensure, all decorative icons use null alt attributes. Remove the accessible name from decorative images by setting alt="".

Ensure, using accurate image descriptions for informative images. Add color names to text alternative.

Ensure, using accurate image descriptions for informative images. Add color names to text alternative.

Ensure, all decorative icons use null alt attributes. Remove the accessible name from decorative images by setting alt="".

Ensure, functional images are using a text alternative that describes the function, rather than the image content. Use

• "Für Apple iPhone die App XYZ im App Store herunterladen" and

• "Für Android Handys die App XYZ bei Google Play herunterladen"

Ensure, all decorative icons use null alt attributes. Remove the accessible name from decorative images by setting alt="".

Ensure, using accurate image descriptions for informative images.

Ensure purpose equivalent text alternatives are present for every non-decorative image. Depending on the purpose, the text alternative may be describing the contents of an image or the functionality it serves (e.g. as a link to a specific page).

When the image shows informational content, it must set an alt attribute that serves the equivalent purpose. This arguably is the case for images of devices. In that case, the description of the device must be set. E.g. "Apple iPhone 15 Pro in silber und Apple iPhone 15 in blau. Jeweils mit Vorder- und Rückseite".

Ensure, all purely decorative images are not accessible by assistive technology. Depending on the way, in image is embedded, the following methods can be used to remove it from the accessibility tree:

• HTML image element: Set a null alt attribute as follows: <img alt="" />; do not use ARIA to hide the HTML image element

• HTML SVG element: Remove the SVGs <title> element or keep it empty and use ARIA to explicitly hide the element to ensure highest compatibility across browsers and assistive technology: <svg aria-hidden="true">

Ensure, all HTML image elements properly set the alt attribute. Depending on the purpose of the image, choose whether to declare an image decorative, informative, or functional. For more guidance in choosing, refer to the W3C Alt-decision tree.

If the image is

• purely decorative, set a null alt attribute as follows: <img alt="" />

• not purely decorative, the alt attribute must not be null

Ensure purpose equivalent text alternatives are present for every non-decorative image. Depending on the purpose, the text alternative may be describing the contents of an image or the functionality it serves (e.g. as a link to a specific page).

The smartphone images need to be described properly. The text alternative must be equivalent to the images' purpose and must not duplicate existing text content.

Ensure purpose equivalent text alternatives are present for every non-decorative image. Depending on the purpose, the text alternative may be describing the contents of an image or the functionality it serves (e.g. as a link to a specific page).

Ensure, no information that is not visible in the image, is conveyed via alt attribute but all information that is visible, is conveyed.

Ensure, all purely decorative images are not accessible by assistive technology. Depending on the way, in image is embedded, the following methods can be used to remove it from the accessibility tree:

• HTML image element: Set a null alt attribute as follows: <img alt="" />; do not use ARIA to hide the HTML image element

• HTML SVG element: Remove the SVGs <title> element or keep it empty and use ARIA to explicitly hide the element to ensure highest compatibility across browsers and assistive technology: <svg aria-hidden="true">

Ensure purpose equivalent text alternatives are present for every non-decorative image. Depending on the purpose, the text alternative may be describing the contents of an image or the functionality it serves (e.g. as a link to a specific page).

There are multiple ways to remediate this issue.

Image description

The ideal way would be to use the actual image description.

Declare decorative

A less ideal way would be to declare the device image as decorative by using a null alt attribute, removing it from the accessibility tree. There are a few caveats to this "tactic", though and if using it, there are multiple other steps to be done, to ensure conformance with this success criterion.

• While this would improve the current use of the images' text alternatives, removing the content duplication, it does not really solve the issue of the images' purpose not being communicated.

• A decorative image only is purely decorative, if not adding any information that is not communicated otherwise. While device name and device color might be information which is available elsewhere, the actual description of the device is not.

• Declaring the images decorative, you additionally MUST ensure, all other information (color, promotions, add-ons, extra devices like styluses, etc.) is available as text in the product card.

Change the text alternative to communicate the icon's purpose, e.g. by setting alt="Tarifdetails anzeigen/ausblenden".

Ensure, purely decorative images have a null alt attribute set. SVGs must have an empty <title> element instead and ideally be hidden manually via aria-hidden="true".

For more information about accessible icon buttons, refer to Sara Soueidan's "Accessible Icon Buttons" article.

If an image is declared to be informative rather than decorative, a purpose equivalent text alternative must be programmatically determinable. Duplicating already existing text content never is purpose equivalent of an image. See the W3C Alt-decision tree for more information about types of non-text content.

• Ankaufsbonus

  • Change the text alternative to communicate the icon's purpose, e.g. by setting alt="Ankaufspreis Ihres Altgerätes".

• Vorbestellung

  • Add <title> element to SVG or embed SVG from file and treat like <img>

  • If declaring icon as decorative, ensure <title> element is empty and SVG is hidden from screen readers by setting aria-hidden="true"

There are multiple ways to remediate this issue.

Image description

The ideal way would be to use the actual image description. Possible text alternatives for the example devices in the screenshot could be in the following style:

• "Apple iPad Air 13" (2025) M3 in Space Grau. Vorderseite mit generischem Wallpaper, Hinterseite mit Kamera"

• "Samsung Galaxy S25 Edge in Titanium Icyblue (hellblau). Vorderseite mit Gerätenamen als Schriftzug, Seitenansicht, Promotion für 2× Speicher-Upgrade inklusive"

• "Samsung Galaxy S25 Ultra in Schwarz. Vorderseite mit Gerätenamen als Schriftzug, Rückseite mit 5 Kameras"

Declare decorative

A less ideal way would be to declare the device image as decorative by using a null alt attribute, removing it from the accessibility tree. There are a few caveats to this "tactic", though and if using it, there are multiple other steps to be done, to ensure conformance with this success criterion.

• While this would improve the current use of the images' text alternatives, removing the content duplication, it does not really solve the issue of the images' purpose not being communicated.

• A decorative image only is purely decorative, if not adding any information that is not communicated otherwise. While device name and device color might be information which is available elsewhere, the actual description of the device is not.

• Declaring the images decorative, you additionally MUST ensure, all other information (color, promotions, add-ons, extra devices like styluses, etc.) is available as text in the product card.

Change the text alternative to communicate the icon's purpose, e.g. by setting alt="Geräte von Apple anzeigen". Ensure to deliver accessible, purpose equivalent text alternatives for all filter states.

• No manufacturer filter selected: "Nur Geräte von MANUFACTURER anzeigen"

• One manufacturer filter selected

  • selected filter: "Alle Geräte anzeigen"

  • non-selected filter: "Geräte von MANUFACTURER anzeigen"

• Multiple manufacturer filters selected

  • selected filter: "Geräte von MANUFACTURER nicht mehr anzeigen" (or ideally even announcing the still selected filters, see notes below)

  • non-selected filter: "Geräte von MANUFACTURER anzeigen"

One possible solution would be to use native checkbox inputs for the manufacturer filters. But the structural idea down below can be used with other methods as well.

<fieldset>
  <legend>Filter nach Endgeräte-Hersteller</legend>

  <input type="checkbox" 
         id="manufacturer-apple" 
         name="manufacturer" 
         value="Apple" 
         checked />
  <label for="manufacturer-apple">
    <svg><title>Apple</title>...</svg>
  </label>

  <input type="checkbox" 
         id="manufacturer-google" 
         name="manufacturer" 
         value="Google" />
  <label for="manufacturer-google">
    <svg><title>Google</title>...</svg>
  </label>

  <input type="checkbox" 
         id="manufacturer-samsung" 
         name="manufacturer" 
         value="Samsung" 
         checked />
  <label for="manufacturer-samsung">
    <svg><title>Samsung</title>...</svg>
  </label>

  <input type="checkbox" 
         id="manufacturer-telekom" 
         name="manufacturer" 
         value="Telekom" />
  <label for="manufacturer-telekom">
    <svg><title>Telekom</title>...</svg>
  </label>

  <input type="checkbox" 
         id="manufacturer-xiaomi" 
         name="manufacturer" 
         value="Xiaomi" />
  <label for="manufacturer-xiaomi">
    <svg><title>Xiaomi</title>...</svg>
  </label>
</fieldset>

From there work with the ids of checked/unchecked to create the accessible names by dynamically adding IDs of checked inputs. This way, you could create something like "Geräte von MANUFACTURER nicht mehr anzeigen. Es werden Geräte gezeigt von: CHECKED_MANUFACTURERS"

Change the text alternative to communicate the icon's purpose, e.g. by setting alt="Tarifdetails anzeigen/ausblenden".

Ensure, purely decorative images have a null alt attribute set. SVGs must have an empty <title> element instead and ideally be hidden manually via aria-hidden="true".

For more information about accessible icon buttons, refer to Sara Soueidan's "Accessible Icon Buttons" article.

If an image is declared to be informative rather than decorative, a purpose equivalent text alternative must be programmatically determinable. Duplicating already existing text content never is purpose equivalent of an image. See the W3C Alt-decision tree for more information about types of non-text content.

Change the text alternative to communicate the icon's purpose, e.g. by setting alt="Geräte von Apple anzeigen". Ensure to deliver accessible, purpose equivalent text alternatives for all filter states.

• No manufacturer filter selected: "Nur Geräte von MANUFACTURER anzeigen"

• One manufacturer filter selected

  • selected filter: "Alle Geräte anzeigen"

  • non-selected filter: "Geräte von MANUFACTURER anzeigen"

• Multiple manufacturer filters selected

  • selected filter: "Geräte von MANUFACTURER nicht mehr anzeigen" (or ideally even announcing the still selected filters, see notes below)

  • non-selected filter: "Geräte von MANUFACTURER anzeigen"

One possible solution would be to use native checkbox inputs for the manufacturer filters. But the structural idea down below can be used with other methods as well.

<fieldset>
  <legend>Filter nach Endgeräte-Hersteller</legend>

  <input type="checkbox" 
         id="manufacturer-apple" 
         name="manufacturer" 
         value="Apple" 
         checked />
  <label for="manufacturer-apple">
    <svg><title>Apple</title>...</svg>
  </label>

  <input type="checkbox" 
         id="manufacturer-google" 
         name="manufacturer" 
         value="Google" />
  <label for="manufacturer-google">
    <svg><title>Google</title>...</svg>
  </label>

  <input type="checkbox" 
         id="manufacturer-samsung" 
         name="manufacturer" 
         value="Samsung" 
         checked />
  <label for="manufacturer-samsung">
    <svg><title>Samsung</title>...</svg>
  </label>

  <input type="checkbox" 
         id="manufacturer-telekom" 
         name="manufacturer" 
         value="Telekom" />
  <label for="manufacturer-telekom">
    <svg><title>Telekom</title>...</svg>
  </label>

  <input type="checkbox" 
         id="manufacturer-xiaomi" 
         name="manufacturer" 
         value="Xiaomi" />
  <label for="manufacturer-xiaomi">
    <svg><title>Xiaomi</title>...</svg>
  </label>
</fieldset>

From there work with the ids of checked/unchecked to create the accessible names by dynamically adding IDs of checked inputs. This way, you could create something like "Geräte von MANUFACTURER nicht mehr anzeigen. Es werden Geräte gezeigt von: CHECKED_MANUFACTURERS"

Change the text alternative to communicate the icon's purpose, e.g. by setting alt="Tarifdetails anzeigen/ausblenden".

There are multiple ways to remediate this issue.

Image description

The ideal way would be to use the actual image description.

Declare decorative

A less ideal way would be to declare the device image as decorative by using a null alt attribute, removing it from the accessibility tree. There are a few caveats to this "tactic", though and if using it, there are multiple other steps to be done, to ensure conformance with this success criterion.

• While this would improve the current use of the images' text alternatives, removing the content duplication, it does not really solve the issue of the images' purpose not being communicated.

• A decorative image only is purely decorative, if not adding any information that is not communicated otherwise. While device name and device color might be information which is available elsewhere, the actual description of the device is not.

• Declaring the images decorative, you additionally MUST ensure, all other information (color, promotions, add-ons, extra devices like styluses, etc.) is available as text in the product card.

Ensure, purely decorative images have a null alt attribute set. SVGs must have an empty <title> element instead and ideally be hidden manually via aria-hidden="true".

For more information about accessible icon buttons, refer to Sara Soueidan's "Accessible Icon Buttons" article.

If an image is declared to be informative rather than decorative, a purpose equivalent text alternative must be programmatically determinable. Duplicating already existing text content never is purpose equivalent of an image. See the W3C Alt-decision tree for more information about types of non-text content.

Change the text alternative to communicate the icon's purpose, e.g. by setting alt="Tarifdetails anzeigen/ausblenden".

Ensure, purely decorative images have a null alt attribute set. SVGs must have an empty <title> element instead and ideally be hidden manually via aria-hidden="true".

For more information about accessible icon buttons, refer to Sara Soueidan's "Accessible Icon Buttons" article.

If an image is declared to be informative rather than decorative, a purpose equivalent text alternative must be programmatically determinable. Duplicating already existing text content never is purpose equivalent of an image. See the W3C Alt-decision tree for more information about types of non-text content.

There are multiple ways to remediate this issue.

Image description

The ideal way would be to use the actual image description.

Declare decorative

A less ideal way would be to declare the device image as decorative by using a null alt attribute, removing it from the accessibility tree. There are a few caveats to this "tactic", though and if using it, there are multiple other steps to be done, to ensure conformance with this success criterion.

• While this would improve the current use of the images' text alternatives, removing the content duplication, it does not really solve the issue of the images' purpose not being communicated.

• A decorative image only is purely decorative, if not adding any information that is not communicated otherwise. While device name and device color might be information which is available elsewhere, the actual description of the device is not.

• Declaring the images decorative, you additionally MUST ensure, all other information (color, promotions, add-ons, extra devices like styluses, etc.) is available as text in the product card.

Change the text alternative to communicate the icon's purpose, e.g. by setting alt="Geräte von Apple anzeigen". Ensure to deliver accessible, purpose equivalent text alternatives for all filter states.

• No manufacturer filter selected: "Nur Geräte von MANUFACTURER anzeigen"

• One manufacturer filter selected

  • selected filter: "Alle Geräte anzeigen"

  • non-selected filter: "Geräte von MANUFACTURER anzeigen"

• Multiple manufacturer filters selected

  • selected filter: "Geräte von MANUFACTURER nicht mehr anzeigen" (or ideally even announcing the still selected filters, see notes below)

  • non-selected filter: "Geräte von MANUFACTURER anzeigen"

One possible solution would be to use native checkbox inputs for the manufacturer filters. But the structural idea down below can be used with other methods as well.

<fieldset>
  <legend>Filter nach Endgeräte-Hersteller</legend>

  <input type="checkbox" 
         id="manufacturer-apple" 
         name="manufacturer" 
         value="Apple" 
         checked />
  <label for="manufacturer-apple">
    <svg><title>Apple</title>...</svg>
  </label>

  <input type="checkbox" 
         id="manufacturer-google" 
         name="manufacturer" 
         value="Google" />
  <label for="manufacturer-google">
    <svg><title>Google</title>...</svg>
  </label>

  <input type="checkbox" 
         id="manufacturer-samsung" 
         name="manufacturer" 
         value="Samsung" 
         checked />
  <label for="manufacturer-samsung">
    <svg><title>Samsung</title>...</svg>
  </label>

  <input type="checkbox" 
         id="manufacturer-telekom" 
         name="manufacturer" 
         value="Telekom" />
  <label for="manufacturer-telekom">
    <svg><title>Telekom</title>...</svg>
  </label>

  <input type="checkbox" 
         id="manufacturer-xiaomi" 
         name="manufacturer" 
         value="Xiaomi" />
  <label for="manufacturer-xiaomi">
    <svg><title>Xiaomi</title>...</svg>
  </label>
</fieldset>

From there work with the ids of checked/unchecked to create the accessible names by dynamically adding IDs of checked inputs. This way, you could create something like "Geräte von MANUFACTURER nicht mehr anzeigen. Es werden Geräte gezeigt von: CHECKED_MANUFACTURERS"

Change the text alternative to communicate the icon's purpose, e.g. by setting alt="Tarifdetails anzeigen/ausblenden".

Ensure, purely decorative images have a null alt attribute set. SVGs must have an empty <title> element instead and ideally be hidden manually via aria-hidden="true".

For more information about accessible icon buttons, refer to Sara Soueidan's "Accessible Icon Buttons" article.

If an image is declared to be informative rather than decorative, a purpose equivalent text alternative must be programmatically determinable. Duplicating already existing text content never is purpose equivalent of an image. See the W3C Alt-decision tree for more information about types of non-text content.

Ensure purpose equivalent text alternatives are present for every non-decorative image. Depending on the purpose, the text alternative may be describing the contents of an image or the functionality it serves (e.g. as a link to a specific page).

If the image does not give new information to the user, the image may be declared decorative, by using a null alt attribute <img src="..." alt="" />.

Ensure, all HTML image elements properly set the alt attribute. Depending on the purpose of the image, choose whether to declare an image decorative, informative, or functional. For more guidance in choosing, refer to the W3C Alt-decision tree.

If the image is

• purely decorative, set a null alt attribute as follows: <img alt="" />

• not purely decorative, the alt attribute must not be null

Ensure, added image description via alt attribute accurately describes the image. Add relevant information of the image and keep out all information that is not part of the image. Ensure, not adding false information to the image description.

Provide purpose equivalent text alternative for all non-decorative images, especially for relevant images like the smartwatch image that is the main topic of the page.

Provide purpose equivalent text alternative for all non-decorative images, especially for relevant images like the smartwatch image that is the main topic of the page.

Ensure, understanding the purpose of the images to provide accurate, equivalent text alternatives. As a recommendation, replace the images in a layout with the image's purpose. What is the intention of using the image? When the intended purpose is final, use this as text alternative.

When referring to specific context, ensure, using the same wordings (Umrandung vs. Farbe der Uhr vs. Uhrrahmen).

The image's text alternative depends on the intended purpose.

• If the purpose is to show a video still, ensure, added image description via alt attribute accurately describes the image. Add relevant information of the image and keep out all information that is not part of the image. Ensure, not adding false information to the image description.

• If the purpose is to function as the play button, describe the function as "Video XYZ abspielen"

• If the image is decorative, provide null alt attribute

Ensure, no text alternative is used twice. As with images, there rarely is a reason to show multiple images that give the exact same information and are meant to convey the exact same purpose. As the text alternative must be able to replace the image, same goes for the text alternative.

Ensure, functional images are using a text alternative that describes the function, rather than the image content. Use

• "Für Apple iPhone die Xplora App im App Store herunterladen" and

• "Für Android Handys die Xplora App bei Google Play herunterladen"

Ensure, all decorative icons use null alt attributes. Remove the accessible name from decorative images by setting alt="".

Ensure, the icons use purpose equivalent text alternatives. Text alternative wording is dependent on the table header column wording as well. Possible text alternatives could be "Ja" for checkmark icon and "Nein" for cross icon. Ensure, wording matches the wording of table header column.

Ensure, all purely decorative images are not accessible by assistive technology. Depending on the way, in image is embedded, the following methods can be used to remove it from the accessibility tree:

• HTML image element: Set a null alt attribute as follows: <img alt="" />; do not use ARIA to hide the HTML image element

• HTML SVG element: Remove the SVGs <title> element or keep it empty and use ARIA to explicitly hide the element to ensure highest compatibility across browsers and assistive technology: <svg aria-hidden="true">

Ensure purpose equivalent text alternatives are present for every non-decorative image. Depending on the purpose, the text alternative may be describing the contents of an image or the functionality it serves (e.g. as a link to a specific page).

• Apple Watch Familienkonfiguration

  • "iPhone mit Einrichtungsbildschirm der Familienkonfiguration. Drei Apple Watches zeigen verschiedene Funktionen. Eine Watch eingerichtet für Opa, zeigt iMessage Konversation. Eine Watch eingerichtet für Mama zeigt Standort von Kind Luis. Eine Watch eingerichtet für Kind Luis zeigt eingehenden Anruf von Papa."

• Immer in Verbindung mit der Apple Watch für Kinder und Smart Connect M

  • arguably, this image is decorative; if not:

  • "Mama und Tochter formen mit ihren Händen gemeinsam ein Herz in der Luft"

• Sorgenfreier dank der Apple Watch für Kinder

  • arguably, this image is decorative; if not:

  • "Papa umarmt Sohn von hinten. Beide lächeln in die Kamera"

• Jetzt Apple Watch SE mit Smart Connect M bestellen

  • "Apple Watch SE in Farbe Polarstern"

Ensure purpose equivalent text alternatives are present for every non-decorative image. Depending on the purpose, the text alternative may be describing the contents of an image or the functionality it serves (e.g. as a link to a specific page).

As background images cannot use alt attributes another method to display text alternative must be used. This can be done with properly visually (display: none will still fail this criterion) hidden text at the same position in DOM order.

Ideally, embed image with HTML image element instead of as background image.

Ensure, all HTML image elements properly set the alt attribute. Depending on the purpose of the image, choose whether to declare an image decorative, informative, or functional. For more guidance in choosing, refer to the W3C Alt-decision tree.

If the image is

• purely decorative, set a null alt attribute as follows: <img alt="" />

• not purely decorative, the alt attribute must not be null

• Evaluate use of non-visual CAPTCHA solutions.

• Embed audio CAPTCHA as non-visual alternative.

Is image element is used:

Ensure, all HTML image elements properly set the alt attribute. Depending on the purpose of the image, choose whether to declare an image decorative, informative, or functional. For more guidance in choosing, refer to the W3C Alt-decision tree.