Images do not have purpose equivalent text alternatives

Aktionen (1 issues)

Non-text content without purpose equivalent text alternative

Alle Geräte (5 issues)

Device images do not have purpose equivalent text alternative
Icons do not have purpose equivalent text alternative
"Speicher-Upgrade" image does not have purpose equivalent text alternative
Info Icon does not have purpose equivalent text alternative
Manufacturer logo images do not have purpose equivalent text alternative

Android Betriebssystem (6 issues)

Background image without text alternative
Image text alternative does not serve equivalent purpose
Image text alternative does not serve equivalent purpose
Image is missing alt attribute
Image text alternative does not serve equivalent purpose
Image text alternative "wrong way round"

Apple (2 issues)

Background images have no purpose equivalent text alternative
Decorative images use alt attribute

Apple Watch Familienkonfiguration (2 issues)

Image text alternative does not serve equivalent purpose
Image is decorative but has text alternative

Apple iPad Air 11 2025 (5 issues)

Image text alternative does not serve equivalent purpose
Image is missing alt attribute
Image is missing alt attribute
Decorative "Anmelden" icon has no alt attribute
Image is decorative but has text alternative

Daten Tarife (3 issues)

Image text alternative does not serve equivalent purpose
Image is missing alt attribute
Decorative icon has non-null alt attribute

Flex Tarife Weitere Informationen (1 issues)

Image text alternative does not serve equivalent purpose

For Friends (4 issues)

Image is missing text alternative
Icons in data table have no text alternative
Image text alternative does not serve equivalent purpose
Image is decorative but has text alternative

Handy Verkaufen (7 issues)

Icons used non-decoratively in "Zusammenfassung" list but are hidden from assistive technology
Image text alternative does not serve equivalent purpose
CAPTCHA used; no text alternative present
Image is missing text alternative
Image text alternative does not serve equivalent purpose
Non-text content missing text alternative
Image is decorative but has text alternative

Handyversicherung (3 issues)

Image is missing text alternative
Image text alternative does not serve equivalent purpose
Image is decorative but has text alternative

IoT-Verteilerseite (1 issues)

Images do not have purpose equivalent text alternative

Kider Uhr GPS Oneshop (7 issues)

Image "Was ist das Besondere an der Anio Kinderuhr mit GPS?" does not have purpose equivalent text alternative
Image(s) "Die GPS-Kinderuhr – so individuell wie Ihr Kind" do not have purpose equivalent text alternatives
Video still images for video player dialog windows do not have purpose equivalent text alternatives
Image "Schulmodus" does not have purpose equivalent text alternative
Informative images (checkmark / cross) in table do not have purpose equivalent text alternative
Decorative icons have non-null alt attribute set
App store / Play store icons used as functional images do not have purpose equivalent text alternative

Kids-Watch (9 issues)

Image "Wie funktioniert die Kids Watch" does not have purpose equivalent text alternative
Image(s) "Eine Kinder Smartwatch – drei Farben" do not have purpose equivalent text alternatives
Video still images for video player dialog windows do not have purpose equivalent text alternatives
Image "Datenschutz" does not have purpose equivalent text alternative
Image "GPS-Kinderuhr mit Schrittzähler" does not have purpose equivalent text alternative
Informative images (checkmark / cross) in table do not have purpose equivalent text alternative
Image "Schulmodus Kalender" does not have purpose equivalent text alternative
Decorative icons have non-null alt attribute set
App store / Play store icons used as functional images do not have purpose equivalent text alternative

Magena Sport (5 issues)

Images in stage do not have accurate text alternatives
Images used as interactive elements do not have purpose equivalent text alternative
Image in section "Alle Geräte" does not have accurate text alternative
Image in section "Push-Mitteilungen" does not have accurate text alternative
Image does not have purpose equivalent text alternative

Magenta TV Streaming Dienste Partner DAZN (5 issues)

Images used as interactive elements do not have purpose equivalent text alternative
Stage background image has no text alternative
Images do not have appropriate purpose equivalent text alternative
Decorative icons do not have null alt attribute
Image does not have purpose equivalent text alternative

Magenta TV Streaming Dienste Partner wow (3 issues)

Images in marquee teaser do not communicate purpose equivalent text alternative
WOW logo image hidden and contents then duplicated
List marker icons without text alternative

Magenta Tarife Young (2 issues)

Product image text alternative not purpose equivalent of image
Image's text alternative does not accurately describe image's purpose

Mobile Router (3 issues)

Device images do not have purpose equivalent text alternative
Info Icon does not have purpose equivalent text alternative
Decorative icons have non-null alt attribute or no text alternative at all

Mobilfunk Netzausbau (5 issues)

Image does not have purpose equivalent text alternative
Image does not have purpose equivalent text alternative
Decorative images have alt attribute set
Decorative images have alt attribute set
Decorative images have alt attribute set

Prepaid Tarife (3 issues)

Image text alternative duplicated text content
Image text alternative does not serve equivalent purpose
Decorative icons use alt text

Roaming Optionen (5 issues)

Image text alternative does not serve equivalent purpose
Icons in Partnernetze table do not have text alternative
Images do not have appropriate text alternative
Icon's alt text is also visible text
Decorative images have alt text

Senioren Smartwatch (6 issues)

Images do not have purpose equivalent text alternative
Informative images (checkmark / cross) in table do not have purpose equivalent text alternative
Images do not have purpose equivalent text alternative
Decorative icons have non-null alt attribute set
Decorative icons have non-null alt attribute set
App store / Play store icons used as functional images do not have purpose equivalent text alternative

Shop (2 issues)

Image text alternative does not serve equivalent purpose
Image is decorative but has text alternative

Smart Connect (1 issues)

Image declared decorative, arguably informative

Smartphone Tarife (4 issues)

Image text alternative does not serve equivalent purpose
Decorative "Anmelden" icon has no alt attribute
"Pluskarte" image has no purpose equivalent text alternative
Image text alternative does not serve equivalent purpose

Smartphones (5 issues)

Device images do not have purpose equivalent text alternative
Icons do not have purpose equivalent text alternative
Info Icon does not have purpose equivalent text alternative
Manufacturer logo images do not have purpose equivalent text alternative
Decorative icons have non-null alt attribute or no text alternative at all

Smartwatch mit Gesundheitsfunktionen (5 issues)

Images do not have purpose equivalent text alternative
Decorative icons have non-null alt attribute set
Decorative icons have non-null alt attribute set
Images do not have purpose equivalent text alternative
App store / Play store icons used as functional images do not have purpose equivalent text alternative

Smartwatches (4 issues)

Device images do not have purpose equivalent text alternative
Info Icon does not have purpose equivalent text alternative
Manufacturer logo images do not have purpose equivalent text alternative
Decorative icons have non-null alt attribute or no text alternative at all

Sonim XP100 (2 issues)

Image text alternative does not serve equivalent purpose
Image is missing alt attribute

Sport (3 issues)

"EM" image does not have purpose equivalent text alternative
Functional images (sports league logos) do not have purpose equivalent text alternative
Decorative images have determinable text alternative

Sport Megasport Option (4 issues)

Images used as interactive elements do not have purpose equivalent text alternative
Image of text not using purpose equivalent text alternative
Decorative icons have non-null alt attribute or no text alternative at all
Logo images are used as headings

Tablets (4 issues)

Device images do not have purpose equivalent text alternative
Info Icon does not have purpose equivalent text alternative
Manufacturer logo images do not have purpose equivalent text alternative
Decorative icons have non-null alt attribute or no text alternative at all
Image is missing alt attribute

Tastenhandys (3 issues)

Device images do not have purpose equivalent text alternative
Info Icon does not have purpose equivalent text alternative
Decorative icons have non-null alt attribute or no text alternative at all

Telefonieren SMS Ins Ausland (2 issues)

Image text alternative does not serve equivalent purpose
Image is decorative but has text alternative

Travel Mobil Optionen (2 issues)

Image is decorative but has text alternative
Image text alternative does not serve equivalent purpose

Travel Surf (3 issues)

Image text alternative does not serve equivalent purpose
Image is decorative but is accessible to assistive technology
Image text alternative does not serve equivalent purpose

Vertragsverlängerung (3 issues)

Image text alternative does not serve equivalent purpose
Image text alternative does not serve equivalent purpose
Image is decorative but has text alternative

Xiaomi 15 (5 issues)

Image text alternative does not serve equivalent purpose
Image text alternative does not serve equivalent purpose
Image is missing alt attribute
Decorative "Anmelden" icon has no alt attribute
Image is decorative but has text alternative

iPad Vergleich (2 issues)

Image text alternative does not serve equivalent purpose
Image is decorative but has text alternative

iPhone Erleben (5 issues)

Image text alternative does not serve equivalent purpose
Image is missing alt attribute
CAPTCHA used; no text alternative present
Image text alternative does not serve equivalent purpose
Icons used non-decoratively in "Zusammenfassung" list but are hidden from assistive technology

iPhone Vergleich (2 issues)

Image text alternative does not serve equivalent purpose
Image is decorative but has text alternative
Accompanying Files
Observation Details

The icon's alt text is also presented as text besides the icon

Remediation Notes

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

Accompanying Files
Observation Details

The explanatory images in "So aktivieren Sie Datenroaming im Ausland" do not have appropriate text alternatives attached. For both tabs they read:

Datenroaming für ... aktivieren - Schritt 1

Datenroaming für ... aktivieren - Schritt 2

Datenroaming für ... aktivieren - Schritt 3

The text alternative must convey the image's content and/or purpose, making it an equivalent of the image.

Remediation Notes

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.

Accompanying Files
Observation Details

Decorative images (icons) have alt text filled making them be announced by assistive technology resulting in content duplication (e.g. announcement of icon and following heading).

Remediation Notes

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

Priority: Critical Medium Page: Roaming Optionen Observation Permalink
Accompanying Files
Observation Details

The checkmark and cross icons inside the Partnernetze table do not have an accessible name (text alternative), thus are announced as "image" only.

Remediation Notes

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.

Priority: Critical Low Page: Aktionen Observation Permalink
Accompanying Files
Observation Details

The shown image has "UNLIMITED" as its accessible name and text alternative. The following significant parts of the image are missing in the text alternative:

  • Infinity symbol, symbol for "unlimited"

  • Smartphones / devices

  • "Galaxy S25 Ultra - Galaxy AI" wording

As the image is meant to be a Samsung Galaxy S25 Ultra offer teaser, the given text alternative "UNLIMITED" does not serve an equivalent purpose.

Assistive technology will announce "UNLIMITED" without any further context, possibly rendering the contents of the image completely inaccessible to blind or otherwise visually impaired screen reader users.

Remediation Notes

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.

Priority: Moderate Unknown Page: Prepaid Tarife Observation Permalink
Accompanying Files
Observation Details

Decorative icons must use null alt attributes.

Accompanying Files
Observation Details

The text alternative of the section images duplicate the section's heading's text content.

Remediation Notes

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.

Accompanying Files
Observation Details

The streaming service logos are using "Telekom Young ..." text alternative. The images themselves however are simply service logos, having nothing to do with "Telekom Young".

Remediation Notes

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

Accompanying Files
Observation Details

The product images of the smartphones use "Produktbild des ..." with the product's heading as their text alternative. While this may suffice for some images, it fails for others. The text alternative must serve an equivalent purpose to the image itself.

Remediation Notes

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.

Priority: Moderate Low Page: Apple Observation Permalink
Accompanying Files
Observation Details

Remediation Notes

Decorative images must use null alt attributes.

Priority: Critical Medium Page: Apple Observation Permalink
Accompanying Files
Observation Details

The Apple imagery uses text and displays important devices or device features. There is however no text alternative determinable for these images.

Remediation Notes

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;
}
Accompanying Files
Observation Details
  • Image

    • In the badge, the purpose of the content is to show, the user getting 200 € "Ankaufsbonus" on top of the "Ankaufsangebot für das Altgerät". The icon's purpose is to communicate "Ankaufsangebot für das Altgerät".

    • The Trade-In icon uses "tradeIn icon" as its text alternative which does not serve the equivalent purpose of what the icon is communicating.

  • Inline SVG icons have no text alternative. As the icon is embedded as inline SVG, the SVG's <title> element must be present if no other text alternative is provided, in which case the SVG must be hidden from screen readers

    • Badge – Vorbestellung

    • Sidebar – Info

    • Incompatible plan dialog window – Close & Change

Remediation Notes
  • 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"

Accompanying Files
Observation Details

Speicher-Upgrade image has text alternative set to device name "Samsung Galaxy S25 Edge" which does not communicate the contents (purpose) of the image.

Remediation Notes

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

Priority: Critical Low Page: Alle Geräte Observation Permalink
Accompanying Files
Observation Details

Device images use device name as text alternative, not serving the equivalent purpose of the image and simply duplicating text content that is already presented down below.

Please read remediation notes carefully.

Remediation Notes

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.

Priority: Serious Medium Page: Alle Geräte Observation Permalink
Accompanying Files
Observation Details

In the filter section, the purpose of the manufacturer's logos is to filter device list by manufacturer. The image's purpose is to communicate, depending on filter status, "Zeige Geräte von MANUFACTURER".

The logos use the name of the manufacturer as its text alternative which does not serve the equivalent purpose of what the image is communicating.

Remediation Notes

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"

Accompanying Files
Observation Details

Info icon in sticky sidebar has no text alternative, thus no accessible name. The icons are used as interactive elements and MUST have an accessible name.

Remediation Notes

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

Priority: Moderate Low Page: Smartphones Observation Permalink
Accompanying Files
Observation Details

Decorative icons are announced by screen reader. This happens when images have a non-null alt attribute or in the case of SVGs a non-null <title> element or none at all without being hidden manually.

On the /shop pages, this concerns the

  • device category navigation at the page's top,

  • icons used in the services list in section "Verlässlicher Service rund um Ihre Bestellung"

  • icons used in the FAQ section at the page's bottom,

  • the "Vertragsverlängerung" icon in the sidebar section "Ich möchte"

Remediation Notes

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.

Priority: Critical Low Page: Smartwatches Observation Permalink
Accompanying Files
Observation Details

Device images use device name as text alternative, not serving the equivalent purpose of the image and simply duplicating text content that is already presented down below.

Remediation Notes

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

  • ...

Accompanying Files
Observation Details

The silhouette icon on the "Anmelden" button has no alt attribute. When the icon is considered decorative, as it arguably can be, the image must have a null alt attribute set to hide it from the accessibility tree.

Accompanying Files
Observation Details

The image uses "Pluskarte" as text alternative. The text content of the image alone is "Hauptkarte Unlimited = 1. PlusKarte Unlimited". The text beside it says "Durch Zubuchung mindestens einer PlusKarte für Erwachsene zum Hauptvertrag, erhalten ab dem Tarif MagentaMobil M alle Karten unbegrenztes Datenvolumen."

Those three (accessible alt attribute, image contents, description text) do not convey the same information, making the used text alternative for the image inequivalent to the image's purpose.

Remediation Notes

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.

Accompanying Files
Observation Details

Smartwatch images in the first page section are declared decorative by setting aria-hidden="true". While the Kids Watch can be declared decorative, the first image has content which is not available in the text beside it, thus should be accessible via screen reader.

Remediation Notes

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.

Observation Details

"Demnächst live" images have non-null alt attribute set, that duplicates the following heading. Image either must use purpose equivalent text alternative or must be declared decorative by using a null alt attribute.

Remediation Notes

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

Accompanying Files
Observation Details

The images use alt attributes "Klicken Sie für weitere Informationen auf das LEAGUE NAME Logo". The instruction however is only conveyed via alt text and such is only communicated when the logo image is per definition not visible.

Remediation Notes

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

Accompanying Files
Observation Details

Icons, when declared decorative, should use a null alt attribute (for <img> elements) or an empty <title> in inline SVG images (with appropriate hiding mechanism) to hide them from screen readers.

Accompanying Files
Observation Details

Image conveys more information than used alt attribute "Mega Sport".

Remediation Notes

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

Accompanying Files
Observation Details

Stage background image has no purpose equivalent text alternative set. All non-decorative images must have a text alternative present. All information, visually communicated only by the image, must be included in the purpose equivalent text alternative.

Remediation Notes

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

Observation Details

Images in marquee teaser set text alternative via alt attribute but are hidden by aria-hidden="true". Images must only be hidden if they are purely decorative without adding any information that is not already communicated otherwise in text content.

The images in marquee teaser communicate movie, tv show, and sport channel names as available content for the "WOW / MagentaTV" service. This information (movie, tv show, sport channel names) is not communicated otherwise, making the images informative. They must not be hidden from assistive technology.

Remediation Notes

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.

Accompanying Files
Observation Details

The WOW logo uses an img element, including an alt="WOW" attribute, but hidden via aria-hidden="true". The heading then goes ahead and uses the same text content, making this the markup for the heading

<div class="...">
  <img
    class="..."
    alt="WOW" 
    aria-hidden="true"
    width="200" height="133"
    src="..." data-src="..."
  >
  <div class="..." style="...">
    <div class="...">
      <h3 class="...">
        <span class="...">WOW&nbsp;</span>
        Sport, Filme &amp; Serien in einem Paket
      </h3>
    </div>
  </div>
</div>

creating unnecessary complexity in markup.

Remediation Notes

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>
Priority: Critical Medium Page: 5G Netz Observation Permalink
Accompanying Files
Observation Details

Multiple images on page do not have purpose equivalent text alternatives set. Images that are not purely decorative must use purpose equivalent text alternatives.

Remediation Notes

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.

Accompanying Files
Observation Details

Accessible name: "Telekom Netzausbau Bühne", content: "T 5G". Text alternative does not serve the same purpose as the image.

Remediation Notes

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="" />).

Accompanying Files
Observation Details

Accessible name: "Deutsche Funkturm - 5G Ausbau Funkmasten", content is image of 5G Funkmasten. Text alternative does not serve the same purpose as the image. Neither "Deutsche Funkturm", nor the aspect of "Ausbau" are part of the image. The image's text alternative must not include information that is not actually part of the image.

Remediation Notes

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="" />).

Accompanying Files
Observation Details

Accessible name: "Icon XYZ", content is decorative icon. Decorative icons must be hidden from assistive technology.

Remediation Notes

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

Accompanying Files
Observation Details

Accessible name: "Telekom Netz / Mobilfunk", content is decorative icon / checkmark icon. Decorative icons must be hidden from assistive technology.

Remediation Notes

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

Accompanying Files
Observation Details

Accessible name: "Abstand", content is empty, used as layout graphic / spacer. Decorative icons must be hidden from assistive technology.

Remediation Notes

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.

Priority: Serious Medium Page: Sport Observation Permalink
Accompanying Files
Observation Details

The sports league logos in section "Welchen Sport wollen Sie live bei MagentaTV sehen?" do not have purpose equivalent text alternatives set. The images use the league names as accessible names. As the images are used as interactive elements, they are used as functional images, making the function of the interactive element the purpose of the image. Simply naming the sports league does not describe the element's function accurately.

Remediation Notes

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>
Priority: Moderate Low Page: Sport Observation Permalink
Accompanying Files
Observation Details

Decorative images must use a null alt attribute to hide them from assistive technology. The icons in section "Die Sportoptionen im Überblick" have non-null alt attributes set, despite being decorative. The icons are decorative, as they duplicate already determinable text content. "MEGA Sport" → "MegaSport 12M Option", etc.

Remediation Notes

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

Priority: Critical Low Page: Sport Observation Permalink
Accompanying Files
Observation Details

The image for section "Mehr EM ging nicht!" duplicates the heading as text alternative by using alt="Mehr EM ging nicht!". The text alternative does not equivalently describes the image's purpose.

Remediation Notes

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

Accompanying Files
Observation Details

The images use alt attributes "LEAGUE NAME Logo". The instruction however is only conveyed via alt text and such is only communicated when the logo image is per definition not visible.

Remediation Notes

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

Accompanying Files
Observation Details

The images "Mega Logo" and "Sport Logo" are used as the main heading, replacing the main heading's text content "MegaSport". As such a replacement, they must convey equivalent purpose, not adding "Logo" to the text which is announced by assistive technology.

Remediation Notes

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>

Accompanying Files
Observation Details

The logo images of sports channels are used as headings for the content blocks but use "XYZ Logo" as text alternatives. As they're not actual headings as they don't use HTML heading elements, it is not considered a failure of this success criterion.

Remediation Notes

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

Accompanying Files
Observation Details

Decorative icons are announced by screen reader. This happens when images have a non-null alt attribute or in the case of SVGs a non-null <title> element or none at all without being hidden manually.

On the /sport pages, this concerns the section

  • "Erleben Sie MegaSport auf all Ihren Geräten"

Remediation Notes

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.

Priority: Critical Low Page: Magena Sport Observation Permalink
Accompanying Files
Observation Details

Images in stage section do not have purpose equivalent text alternatives. Images use wrong descriptions or lack detail in description.

See screenshot for image's alt attributes.

Remediation Notes
  • "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"

Priority: Critical Low Page: Magena Sport Observation Permalink
Accompanying Files
Observation Details

The images use alt attributes "LEAGUE NAME". The instruction however is only conveyed via alt text and such is only communicated when the logo image is per definition not visible.

Remediation Notes

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

Priority: Moderate Low Page: Magena Sport Observation Permalink
Observation Details

The image for section "Alle Geräte" does not have a purpose equivalent text alternative. Image uses "MagentaSport auf allen Geräten". As the section defines "Alle Geräte" with a specific list, the image of "Alle Geräte", which does not show all devices, is misleading.

Remediation Notes

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

Priority: Moderate Low Page: Magena Sport Observation Permalink
Accompanying Files
Observation Details

The image for section "Push-Mitteilungen" does not have a purpose equivalent text alternative. Image uses "MagentaSport Push Mitteilungen" while showing one specific push notification on a smartphone screen.

Remediation Notes

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"

Priority: Moderate Low Page: Magena Sport Observation Permalink
Accompanying Files
Observation Details

Image conveys more information than used alt attribute "Mega Sport".

Remediation Notes

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

Accompanying Files
Observation Details

Images use corresponding heading as their text alternative. Heading content does not provide purpose equivalent text alternative to the images.

Remediation Notes

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.

Priority: Critical Low Page: Kids-Watch Observation Permalink
Accompanying Files
Observation Details

Image uses text alternative "Kinder tragen in der Natur die Kids Watch XPLORA X6 am Handgelenk und schauen aus einem Zelt heraus."

  • Not "Kinder" but "Kind" wears the watch

  • The kids do not "schauen aus einem Zelt heraus"

  • The actual main watch image is built-in as background image and has no appropriate text alternative

Remediation Notes

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.

Priority: Critical Low Page: Kids-Watch Observation Permalink
Accompanying Files
Observation Details

Image(s) in section "Eine Kinder Smartwatch – drei Farben" do not have purpose equivalent text alternatives. Text alternatives used:

  • Armband der XPLORA X6

  • Digitale Anzeige der XPLORA X6 (four times)

  • Pfeil der auf verschiedenen Farbknöpfe zeigt (for "Gleich ausprobieren" graphic)

  • Verpackung zu den verschiedenen Armbändern und Uhrrahmen.

Observations for these text alternatives:

  • "Armband" implies an image of only the wristband; visually communicated is the watch as a whole; the purpose of the "Armband" image is not to only show the wristband, making the text alternative non-equivalent to the image's purpose

  • "Digitale Anzeige" used for four different images; text alternatives must be as unique as the images' purpose. The same text alternative must only be used if the purpose of those images is the same as well

  • "Pfeil" graphic including text "Gleich ausprobieren" does not mention said text in text alternative; when informative text content is part of a graphic, it must be part of the text alternative as well

  • "Verpackung" but showing two "Verpackungen"; "zu den verschiedenen" without the context of "Erweiterungspakete", there is no easy way to tell what is meant by the "verschiedenen"; "Uhrrahmen" wording is not used before.

Remediation Notes

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

Priority: Serious Low Page: Kids-Watch Observation Permalink
Accompanying Files
Observation Details

Image uses text alternative "XPLORA X6 Schuldmodus Kalender"

  • Typo in "Schuldmodus"

  • Calendar view is not shown as view of a smartwatch

Remediation Notes

Priority: Critical Low Page: Kids-Watch Observation Permalink
Accompanying Files
Observation Details

Images use text alternative

  • "Video Beispiel vom SOS-Knopf in Aktion"

  • "Video Tutorial zum Download der Xplora App"

Image purpose is to show background image still of video.

Remediation Notes

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

Priority: Critical Low Page: Kids-Watch Observation Permalink
Accompanying Files
Observation Details

Image uses text alternative "Kleiner Junge der rennt und mit der Xplora Schrittzählerfunktion Xplora Coins verdient." Text alternative of other image is used (duplicated) here.

Remediation Notes

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.

Priority: Critical Low Page: Kids-Watch Observation Permalink
Accompanying Files
Observation Details

Image uses text alternative "Kleiner Junge der rennt und mit der Xplora Schrittzählerfunktion Xplora Coins verdient."

  • There are three kids in the image

  • None of the kids are running

Remediation Notes

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

Accompanying Files
Observation Details

Store icons are used as functional images for store links. Being functional images, the image's purpose is to describe the function of the link rather than the contents of the image itself.

The icons use text alternatives:

  • Icon des Apple App Store

  • Icon des Google Play Store

Remediation Notes

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"

Priority: Moderate Low Page: Kids-Watch Observation Permalink
Accompanying Files
Observation Details

Decorative icons must not have an accessible text alternative set. The decorative icons in question use non-null alt attributes.

Remediation Notes

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

Priority: Critical Low Page: Kids-Watch Observation Permalink
Accompanying Files
Observation Details

The checkmark and cross icons in data table "Kids Watches im Vergleich" have no accessible text alternative set. As the icon's purpose is crucial to understanding the content, text alternatives must be present and accessible. The code structure for the icons is as follows:

<span class="...">
  <span class="..." aria-hidden="true">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="64.001"
      height="64"
      viewBox="0 0 64 64"
      role="img"
      class="..."
      focusable="false"
    >
      <path fill="#262626" d="..."></path>
    </svg>
  </span>
</span>

Observations:

  • Icon parent uses aria-hidden="true"

  • Icon has no accessible name as it misses the <title> element

  • Icon uses focusable="false", which is not needed as SVGs are non-focusable elements

Remediation Notes

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.

Accompanying Files
Observation Details

Images used in sections do not have purpose equivalent text alternatives. Images duplicate section headings or similar wordings as text alternative.

Remediation Notes

Ensure, using accurate image descriptions for informative images.

Accompanying Files
Observation Details

Decorative icons must not have an accessible text alternative set. The decorative icons in question use non-null alt attributes.

Remediation Notes

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

Accompanying Files
Observation Details

Store icons are used as functional images for store links. Being functional images, the image's purpose is to describe the function of the link rather than the contents of the image itself.

The icons use text alternatives:

  • App Store

  • Google Play Store

Remediation Notes

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"

Accompanying Files
Observation Details

Decorative icons must not have an accessible text alternative set. The decorative icons in question use non-null alt attributes. "List icons" use "Funktion X" as text alternative.

Side note: Besides non-null alt attribute on decorative image, the used text alternative reads "Funktion X" while the actual content does not provide information about any functionality.

Remediation Notes

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

Observation Details

Image does not have purpose equivalent text alternative. Image shows two specific colors, text alternative generically communicates "in zwei Farben".

Remediation Notes

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

Observation Details

Image does not have purpose equivalent text alternative. Image shows two specific colors, text alternative generically communicates "in zwei Farben".

Remediation Notes

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

Accompanying Files
Observation Details

Decorative icons must not have an accessible text alternative set. The decorative icons in question use non-null alt attributes. "List icons" use "Funktion X" as text alternative.

Side note: Besides non-null alt attribute on decorative image, the used text alternative reads "Funktion X" while the actual content does not provide information about any functionality.

Remediation Notes

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

Accompanying Files
Observation Details

Store icons are used as functional images for store links. Being functional images, the image's purpose is to describe the function of the link rather than the contents of the image itself.

The icons use text alternatives:

  • App Store

  • Google Play Store

Remediation Notes

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"

Accompanying Files
Observation Details

Decorative icons must not have an accessible text alternative set. The decorative icons in question use non-null alt attributes.

Remediation Notes

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

Accompanying Files
Observation Details

Images used in sections do not have purpose equivalent text alternatives. Images duplicate section headings or similar wordings as text alternative.

Remediation Notes

Ensure, using accurate image descriptions for informative images.

Accompanying Files
Observation Details

Images that are not purely decorative, must have a purpose equivalent text alternative set, to be accessible if the image cannot be visually perceived. A prime example is a blind screen reader user. But also if an image cannot be loaded due to network issues, the text alternative ensures perception of the conveyed information.

Images with non-equivalent text alternative:

  • MagentaEins Vorteil

  • Apple und Telekom im besten Netz

Remediation Notes

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

Accompanying Files
Observation Details

Purely decorative images must not have an accessible text alternative present. They must be excluded from the accessibility tree.

Remediation Notes

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

Priority: Critical Low Page: Tarife Observation Permalink
Accompanying Files
Observation Details

The HTML image element must always use have alt attribute present. Either

  • null alt attribute for purely decorative or

  • non-null alt attribute for informative/functional images.

Image elements missing alt attribute:

  • All images in cards (see classes dt_mainImage, dt_column_content_item)

Remediation Notes

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

Accompanying Files
Observation Details

Images that are not purely decorative, must have a purpose equivalent text alternative set, to be accessible if the image cannot be visually perceived. A prime example is a blind screen reader user. But also if an image cannot be loaded due to network issues, the text alternative ensures perception of the conveyed information.

Images with non-equivalent text alternative:

  • Smartphone images use device name as text alternative, not describing the actual contents, nor the purpose of the image

  • Text alternative duplicates existing text content

Remediation Notes

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.

Accompanying Files
Observation Details

Images that are not purely decorative, must have a purpose equivalent text alternative set, to be accessible if the image cannot be visually perceived. A prime example is a blind screen reader user. But also if an image cannot be loaded due to network issues, the text alternative ensures perception of the conveyed information.

Images with non-equivalent text alternative:

  • Unsere Services für Vertrags- und Prepaidkunden: "Zwei junge Frauen am Strand informieren sich am Smartphone über die Services für Vertrags- & Prepaidkunden"

    • two women

    • beach

    • smartphones

  • Roaming-Gebühren: "Junge Frau mit Smartphone informiert sich am Strand über Roaming-Gebühren"

    • image cut off on smaller viewports; smartphone not visible on all viewports

"Informieren sich [...] über [...]" is not visible information.

Remediation Notes

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.

Priority: Moderate Low Page: Shop Observation Permalink
Accompanying Files
Observation Details

Purely decorative images must not have an accessible text alternative present. They must be excluded from the accessibility tree.

Decorative images with text alternative present:

  • Card icons in section "Weitere Mobilfunk-Tarife"

Side note: icons use PNG images for graphics that can be displayed vectorized.

Remediation Notes

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

Priority: Critical Low Page: Shop Observation Permalink
Accompanying Files
Observation Details

Images that are not purely decorative, must have a purpose equivalent text alternative set, to be accessible if the image cannot be visually perceived. A prime example is a blind screen reader user. But also if an image cannot be loaded due to network issues, the text alternative ensures perception of the conveyed information.

Images with non-equivalent text alternative:

  • "Unser Telekom NextMagenta Unlimited Image", using <div role="img" aria-label="...">

  • "Young Smartphone-Tarife Image", using <div role="img" aria-label="...">

Observations:

  • "Image" is part of text alternative; "Image" will be announced by assistive technology by default and should not be part of the text alternative

  • "Image" is part of text alternative; accessible text is not in main page language

  • Generic <div> element used instead of semantic Image element

  • Image contents are not described in text alternative

Remediation Notes

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

Accompanying Files
Observation Details

Device images use device name as text alternative, not serving the equivalent purpose of the image and simply duplicating text content that is already presented down below.

Please read remediation notes carefully.

Remediation Notes

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.

Accompanying Files
Observation Details

Info icon in sticky sidebar has no text alternative, thus no accessible name. The icons are used as interactive elements and MUST have an accessible name.

Remediation Notes

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

Accompanying Files
Observation Details

Decorative icons are announced by screen reader. This happens when images have a non-null alt attribute or in the case of SVGs a non-null <title> element or none at all without being hidden manually.

On the /shop pages, this concerns the

  • device category navigation at the page's top,

  • icons used in the services list in section "Verlässlicher Service rund um Ihre Bestellung"

  • icons used in the FAQ section at the page's bottom,

  • the "Vertragsverlängerung" icon in the sidebar section "Ich möchte"

Remediation Notes

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.

Accompanying Files
Observation Details
  • Image

    • In the badge, the purpose of the content is to show, the user getting 200 € "Ankaufsbonus" on top of the "Ankaufsangebot für das Altgerät". The icon's purpose is to communicate "Ankaufsangebot für das Altgerät".

  • Inline SVG icons have no text alternative. As the icon is embedded as inline SVG, the SVG's <title> element must be present if no other text alternative is provided, in which case the SVG must be hidden from screen readers

    • Sidebar – Info

Remediation Notes
  • 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"

Priority: Critical Low Page: Smartphones Observation Permalink
Accompanying Files
Observation Details

Device images use device name as text alternative, not serving the equivalent purpose of the image and simply duplicating text content that is already presented down below.

Please read remediation notes carefully.

Remediation Notes

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.

Priority: Serious Medium Page: Smartphones Observation Permalink
Accompanying Files
Observation Details

In the filter section, the purpose of the manufacturer's logos is to filter device list by manufacturer. The image's purpose is to communicate, depending on filter status, "Zeige Geräte von MANUFACTURER".

The logos use the name of the manufacturer as its text alternative which does not serve the equivalent purpose of what the image is communicating.

Remediation Notes

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"

Accompanying Files
Observation Details

Info icon in sticky sidebar has no text alternative, thus no accessible name. The icons are used as interactive elements and MUST have an accessible name.

Remediation Notes

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

Priority: Moderate Low Page: Smartwatches Observation Permalink
Accompanying Files
Observation Details

Decorative icons are announced by screen reader. This happens when images have a non-null alt attribute or in the case of SVGs a non-null <title> element or none at all without being hidden manually.

On the /shop pages, this concerns the

  • device category navigation at the page's top,

  • icons used in the services list in section "Verlässlicher Service rund um Ihre Bestellung"

  • the "Vertragsverlängerung" icon in the sidebar section "Ich möchte"

Remediation Notes

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.

Priority: Serious Medium Page: Smartwatches Observation Permalink
Accompanying Files
Observation Details

In the filter section, the purpose of the manufacturer's logos is to filter device list by manufacturer. The image's purpose is to communicate, depending on filter status, "Zeige Geräte von MANUFACTURER".

The logos use the name of the manufacturer as its text alternative which does not serve the equivalent purpose of what the image is communicating.

Remediation Notes

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"

Accompanying Files
Observation Details

Info icon in sticky sidebar has no text alternative, thus no accessible name. The icons are used as interactive elements and MUST have an accessible name.

Remediation Notes

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

Priority: Critical Low Page: Tastenhandys Observation Permalink
Accompanying Files
Observation Details

Device images use device name as text alternative, not serving the equivalent purpose of the image and simply duplicating text content that is already presented down below.

Please read remediation notes carefully.

Remediation Notes

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.

Priority: Moderate Low Page: Tastenhandys Observation Permalink
Accompanying Files
Observation Details

Decorative icons are announced by screen reader. This happens when images have a non-null alt attribute or in the case of SVGs a non-null <title> element or none at all without being hidden manually.

On the /shop pages, this concerns the

  • device category navigation at the page's top,

  • icons used in the services list in section "Verlässlicher Service rund um Ihre Bestellung"

  • the "Vertragsverlängerung" icon in the sidebar section "Ich möchte"

Remediation Notes

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.

Accompanying Files
Observation Details

Info icon in sticky sidebar has no text alternative, thus no accessible name. The icons are used as interactive elements and MUST have an accessible name.

Remediation Notes

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

Priority: Moderate Low Page: Tablets Observation Permalink
Accompanying Files
Observation Details

Decorative icons are announced by screen reader. This happens when images have a non-null alt attribute or in the case of SVGs a non-null <title> element or none at all without being hidden manually.

On the /shop pages, this concerns the

  • device category navigation at the page's top,

  • icons used in the services list in section "Verlässlicher Service rund um Ihre Bestellung"

  • the "Vertragsverlängerung" icon in the sidebar section "Ich möchte"

Remediation Notes

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.

Priority: Critical Low Page: Tablets Observation Permalink
Accompanying Files
Observation Details

Device images use device name as text alternative, not serving the equivalent purpose of the image and simply duplicating text content that is already presented down below.

Please read remediation notes carefully.

Remediation Notes

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.

Priority: Serious Medium Page: Tablets Observation Permalink
Accompanying Files
Observation Details

In the filter section, the purpose of the manufacturer's logos is to filter device list by manufacturer. The image's purpose is to communicate, depending on filter status, "Zeige Geräte von MANUFACTURER".

The logos use the name of the manufacturer as its text alternative which does not serve the equivalent purpose of what the image is communicating.

Remediation Notes

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"

Priority: Serious Low Page: Tablets Observation Permalink
Accompanying Files
Observation Details

Info icon in sticky sidebar has no text alternative, thus no accessible name. The icons are used as interactive elements and MUST have an accessible name.

Remediation Notes

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

Priority: Moderate Low Page: Daten Tarife Observation Permalink
Accompanying Files
Observation Details

Decorative icons are announced by screen reader. This happens when images have a non-null alt attribute or in the case of SVGs a non-null <title> element or none at all without being hidden manually.

On the /shop pages, this concerns the

  • MagentaEins Icon

Remediation Notes

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.

Priority: Critical Low Page: Daten Tarife Observation Permalink
Accompanying Files
Observation Details

Images that are not purely decorative, must have a purpose equivalent text alternative set, to be accessible if the image cannot be visually perceived. A prime example is a blind screen reader user. But also if an image cannot be loaded due to network issues, the text alternative ensures perception of the conveyed information.

Images with non-equivalent text alternative:

  • MagentaMobil Data: Datentarife zum attraktiven Preis

  • Erlebnisse teilen

  • Immer in Kontakt bleiben

  • Unterwegs Spaß haben

Images use "mit den Datentarifen" / "mit den Datentarifen der Telekom" which is not information, conveyed in the images and duplicate existing surrounding text content.

Remediation Notes

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="" />.

Priority: Critical Low Page: Daten Tarife Observation Permalink
Accompanying Files
Observation Details

The HTML image element must always use have alt attribute present. Either

  • null alt attribute for purely decorative or

  • non-null alt attribute for informative/functional images.

Image elements missing alt attribute:

  • "Anmelden" button icon

Remediation Notes

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

Accompanying Files
Observation Details

The actual main watch image is built-in as background image and has no appropriate text alternative.

Remediation Notes

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.

Accompanying Files
Observation Details

Image(s) in section "Die GPS-Kinderuhr –so individuell wie Ihr Kind" do not have purpose equivalent text alternatives. Text alternatives used shown in screenshot.

Observations for these text alternatives:

  • "Armband" implies an image of only the wristband; visually communicated is the watch as a whole; the purpose of the "Armband" image is not to only show the wristband, making the text alternative non-equivalent to the image's purpose

  • "Digitale Anzeige" used for multiple different images; text alternatives must be as unique as the images' purpose. The same text alternative must only be used if the purpose of those images is the same as well

  • "Pfeil" graphic including text "Gleich ausprobieren" does not mention said text in text alternative; when informative text content is part of a graphic, it must be part of the text alternative as well

  • "Armband Faecher" does not explain what "Fächer" means

Remediation Notes

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

Accompanying Files
Observation Details

Images use text alternative

  • "Empfehlervideo"

  • "Video Beispiel vom SOS-Knopf in Aktion"

  • "Video Tutorial zum Download der Anio 6 App"

Image purpose is to show background image still of video.

Remediation Notes

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

Accompanying Files
Observation Details

Image uses text alternative "Kids Watch Anio im Schulmodus und daneben Smartphone mit geöffneter Anio App"

  • Text alternative used twice on two different images.

  • Text alternative does not match content of "background" image (two girls, wearing watch)

Remediation Notes

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.

Accompanying Files
Observation Details

Store icons are used as functional images for store links. Being functional images, the image's purpose is to describe the function of the link rather than the contents of the image itself.

The icons use text alternatives:

  • Icon des Apple App Store

  • Icon des Google Play Store

Remediation Notes

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"

Accompanying Files
Observation Details

Decorative icons must not have an accessible text alternative set. The decorative icons in question use non-null alt attributes.

Remediation Notes

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

Accompanying Files
Observation Details

The checkmark and cross icons in data table "GPS-Kinderuhren im Vergleich: Anio 6 vs. XPLORA 6 Play eSIM" have no accessible text alternative set. As the icon's purpose is crucial to understanding the content, text alternatives must be present and accessible. The code structure for the icons is as follows:

<span class="...">
  <span class="..." aria-hidden="true">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="64.001"
      height="64"
      viewBox="0 0 64 64"
      role="img"
      class="..."
      focusable="false"
    >
      <path fill="#262626" d="..."></path>
    </svg>
  </span>
</span>

Observations:

  • Icon parent uses aria-hidden="true"

  • Icon has no accessible name as it misses the <title> element

  • Icon uses focusable="false", which is not needed as SVGs are non-focusable elements

Remediation Notes

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.

Accompanying Files
Observation Details

Purely decorative images must not have an accessible text alternative present. They must be excluded from the accessibility tree.

See used icons in screenshots.

Remediation Notes

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

Accompanying Files
Observation Details

Images that are not purely decorative, must have a purpose equivalent text alternative set, to be accessible if the image cannot be visually perceived. A prime example is a blind screen reader user. But also if an image cannot be loaded due to network issues, the text alternative ensures perception of the conveyed information.

All images have non-equivalent text alternative:

  • Apple Watch Familienkonfiguration

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

  • Sorgenfreier dank der Apple Watch für Kinder

  • Jetzt Apple Watch SE mit Smart Connect M bestellen

Remediation Notes

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"

Accompanying Files
Observation Details

Images that are not purely decorative, must have a purpose equivalent text alternative set, to be accessible if the image cannot be visually perceived. A prime example is a blind screen reader user. But also if an image cannot be loaded due to network issues, the text alternative ensures perception of the conveyed information.

Images with non-equivalent text alternative and observations:

  • Main stage image

    • missing text alternative

  • iPhone das ein Bild von einer schönen Rosa macht

    • User takes photo

    • There is no Rose on the photo

    • Typo in "Rosa"

  • Grüner Batterie Icon

    • Typo in "Grüner"

    • Arguably decorative image

  • Telekom Logo mit 5G daneben stehen

    • Arguably decorative image

    • If not decorative, wording could be "Telekom 5G Logo"

  • Blaues FaceID Icon

    • Description of color only important if icon is known

    • Arguably decorative, since Face ID is already mentioned twice

  • Ein iPhone das

    • Missing parts of text alternative

  • Das Icon von der Foto App von Apple

    • Text alternative, if used in alt attribute should rather be concise than using complete sentences; "Apple Foto Icon" would be enough

    • Arguably decorative

  • Apple setzt sich ein für recycelte Materialien

    • Image has text content but text content is not part of text alternative

    • Text alternative is full duplicate of already existing, visible text content

  • Mädchen das mit ihrem Gelben iPhone auf der Wiese liegt

    • "Mädchen" arguably wrong

    • "Gelbes iPhone" not visible

    • "liegt auf Wiese" not part of image

  • Green Magenta logo

    • Mentioning the logo isn't adding any information; if image is not decorative, added information would be a description (e.g. likes of "Hashtag Green Magenta mit einer Sammlung an grünen Blättern")

  • iPhone von von der seite

    • Two devices shows, color not mentioned

    • "iPhone 16 Pro" is text content but not mentioned

    • Typo "von von"

    • Typo "seite" → "Seite"

Remediation Notes

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

Accompanying Files
Observation Details

The HTML image element must always use have alt attribute present. Either

  • null alt attribute for purely decorative or

  • non-null alt attribute for informative/functional images.

Image elements missing alt attribute:

  • Main stage image embedded as background image

Remediation Notes

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

Accompanying Files
Observation Details

CAPTCHAs will always exclude user groups from accessing functionality of a page. Manually entered CAPTCHAs should always be avoided. If CAPTCHA is used, a text alternative must be presented so users of assistive technology can still access the functionality.

Remediation Notes
  • 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.

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

Accompanying Files
Observation Details

"Handyankauf" form has explanation dialog windows in step 3 (triggered by info icon).

Images all use same alt text "Gerät Schäden".

Images that are not purely decorative, must have a purpose equivalent text alternative set, to be accessible if the image cannot be visually perceived. A prime example is a blind screen reader user. But also if an image cannot be loaded due to network issues, the text alternative ensures perception of the conveyed information.

Remediation Notes

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

This means, each image must have a unique text alternative if it is not marked decorative.

Accompanying Files
Observation Details

The icons in "Zusammenfassung" list are hidden from assistive technology by using aria-hidden="true". The icons however are not decorative. The inform the user about the state of their answers from previous steps. As the icons are hidden, assistive technology announces the list items only.

Remediation Notes

Ensure all non-decorative images use proper text alternatives.

Ideally, the user input is not only displayed visually but reflected in the text content of the list like this:

<h3>Zusammenfassung</h3>
<p>
  Basierend auf Ihren Angaben erhalten Sie für Ihr iPhone 11 mit 128 GB bis zu 
  <span>29&nbsp;€</span>
</p>

<p>Sie haben angegeben, dass</p>
<ul>
  <li>sich Ihr Handy einschalten lässt</li>
  <li>Gehäuse und Bildschirm Ihres Handys nicht zertrümmert oder verbogen sind</li>
  <li>das Display keine Risse hat</li>
  <li>die Glasrückseite Risse aufweist</li>
</ul>

<p>
  Sollten wir nach der Prüfung zu einem anderen Ergebnis...
</p>

Another option would be to split the "YES" and "NO" lists.

Accompanying Files
Observation Details

Images that are not purely decorative, must have a purpose equivalent text alternative set, to be accessible if the image cannot be visually perceived. A prime example is a blind screen reader user. But also if an image cannot be loaded due to network issues, the text alternative ensures perception of the conveyed information.

Images with non-equivalent text alternative:

  • MagentaMobil Young

  • Speedbox-Tarife

Image's text alternative duplicates visible text content.

Remediation Notes

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

Accompanying Files
Observation Details

Images that are not purely decorative, must have a purpose equivalent text alternative set, to be accessible if the image cannot be visually perceived. A prime example is a blind screen reader user. But also if an image cannot be loaded due to network issues, the text alternative ensures perception of the conveyed information.

Functional images like images used as links, must have a text alternative that equivalently describes the purpose of the link.

Functional Images with non-equivalent text alternative:

  • "Testsieger Siegel" images

Remediation Notes

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

Function of the image is linking to detailed information about the test and Telekom's standing in it. Ensure, reflecting the link target (e.g. test results on tester homepage vs. internal information on "Auszeichnungen" page).

Accompanying Files
Observation Details

The silhouette icon on the "Anmelden" button has no alt attribute. When the icon is considered decorative, as it arguably can be, the image must have a null alt attribute set to hide it from the accessibility tree.

Accompanying Files
Observation Details

Images that are not purely decorative, must have a purpose equivalent text alternative set, to be accessible if the image cannot be visually perceived. A prime example is a blind screen reader user. But also if an image cannot be loaded due to network issues, the text alternative ensures perception of the conveyed information.

Images with non-equivalent text alternative:

  • Product images (× 10) all use alt="Apple iPad Air 11" (2025) M3"

  • "Netzteil" images in "Produktinformationen" have empty alt attribute

Remediation Notes

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

Priority: Critical Significant Page: Apple iPad Air 11 2025 Observation Permalink
Accompanying Files
Observation Details

The HTML image element must always use have alt attribute present. Either

  • null alt attribute for purely decorative or

  • non-null alt attribute for informative/functional images.

Image elements missing alt attribute:

  • Full SEO content

Remediation Notes

Informative images must have proper text alternatives. No text content should be presented as an image. If done so, purpose equivalent text alternatives must be present. This means, all text content, conveyed visually via images must be accessible in text.


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

Accompanying Files
Observation Details

Purely decorative images must not have an accessible text alternative present. They must be excluded from the accessibility tree.

Decorative images with text alternative present:

  • Check mark icons in sidebar use <svg aria-hidden="false" aria-label="Not Activated" while arguably being decorative

Remediation Notes

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

Accompanying Files
Observation Details

The HTML image element must always use have alt attribute present. Either

  • null alt attribute for purely decorative or

  • non-null alt attribute for informative/functional images.

Image elements missing alt attribute:

  • Device Thumbnail in "Preisübersicht" dialog window

Remediation Notes

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

Priority: Moderate Low Page: Xiaomi 15 Observation Permalink
Accompanying Files
Observation Details

The silhouette icon on the "Anmelden" button has no alt attribute. When the icon is considered decorative, as it arguably can be, the image must have a null alt attribute set to hide it from the accessibility tree.

Priority: Moderate Low Page: Xiaomi 15 Observation Permalink
Accompanying Files
Observation Details

Purely decorative images must not have an accessible text alternative present. They must be excluded from the accessibility tree.

Decorative images with text alternative present:

  • Check mark icons in sidebar use <svg aria-hidden="false" aria-label="Not Activated" while arguably being decorative

Remediation Notes

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

Priority: Critical Low Page: Xiaomi 15 Observation Permalink
Accompanying Files
Observation Details

Images that are not purely decorative, must have a purpose equivalent text alternative set, to be accessible if the image cannot be visually perceived. A prime example is a blind screen reader user. But also if an image cannot be loaded due to network issues, the text alternative ensures perception of the conveyed information.

Images with non-equivalent text alternative:

  • Product images all use alt="Xiaomi 15"

  • "Netzteil" images in "Produktinformationen" have empty alt attribute

Remediation Notes

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

Priority: Critical Low Page: Xiaomi 15 Observation Permalink
Observation Details

Images that are not purely decorative, must have a purpose equivalent text alternative set, to be accessible if the image cannot be visually perceived. A prime example is a blind screen reader user. But also if an image cannot be loaded due to network issues, the text alternative ensures perception of the conveyed information.

Images with non-equivalent text alternative in SEO content:

  • "Sternstunde der Fotografie"

  • "Smart, schnell und intuitiv"

  • "Leistung, die überzeugt"

Remediation Notes

Ensure purpose equivalent text alternatives are present for every non-decorative image.

Priority: Critical Low Page: Xiaomi 15 Observation Permalink
Accompanying Files
Observation Details

The HTML image element must always use have alt attribute present. Either

  • null alt attribute for purely decorative or

  • non-null alt attribute for informative/functional images.

Image elements missing alt attribute:

  • connect Testsiegel

<img 
    class="sc-kpDqfm bOhZXF dt_mainImage customStyle imgLoaded pdp__award__image" 
    src="https://www.telekom.de/resources/images/1207130/xiaomi-15-connect-sehr-gut.png" 
    data-img="isSafari_undefined isSsr_undefined"
>
Remediation Notes

The image is present twice. The second one does have proper purpose equivalent text alternative, making this one redundant. Consider removing it.

Accompanying Files
Observation Details

Images that are not purely decorative, must have a purpose equivalent text alternative set, to be accessible if the image cannot be visually perceived. A prime example is a blind screen reader user. But also if an image cannot be loaded due to network issues, the text alternative ensures perception of the conveyed information.

Images with non-equivalent text alternative:

  • check mark list icons

Remediation Notes

Arguably, check mark icons could be marked decorative. Ensure to hide decorative icons from screen readers. For svg elements, use 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).

Accompanying Files
Observation Details

The checkmark and cross icons in data table "Safety Watch & Doro Watch im Vergleich" have no accessible text alternative set. As the icon's purpose is crucial to understanding the content, text alternatives must be present and accessible.

Remediation Notes

Side note: Before remediating text alternative, ensure to refer to observations for success criterion 1.3.1 Info and Relationships and create a proper data table by using semantic HTML table structure.

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.

Accompanying Files
Observation Details
  • Checkmark and Plus icons in list markers represent different states (zubuchbar vs. inklusiv)

While sighted users can directly compare the two tariff options, users of assistive technology do not get this difference announced, besides the text content. As the text content arguably is a text alternative, the icons for the second list item ("WOW Premium") have a purpose equivalent alternative present.

The list items from the first lists however do not include "inklusive" wording.

So while the items that do have the equivalent text alternative present are the ones that might confuse users, those are not triggering a fail of the success criterion.

As this is not a strict failure of the criterion, this observation is marked "Best Practice". Alternative methods of presentation of comparable data like this should be evaluated.

Remediation Notes

Accompanying Files
Observation Details

Images in hero carousel are implemented as background images and have no purpose equivalent text alternative present.

  • Xiaomi 15

  • Samsung Galaxy S25 Ultra

Other images without text alternative in all other sections. See attached screenshots.

As no text alternative is present, users of assistive technology cannot access the images' content.

Remediation Notes

Ensure, all image content that is not purely decorative has proper, purpose equivalent text alternatives present. For informational images, this includes accurate description of image purpose / content, including all text content implemented in the image

Accompanying Files
Observation Details

"Google on Android" image in hero carousel uses text alternative "Google Pixel 8a und Xiaomi 14" while order of devices is "Xiaomi 14 und Google Pixel 8a". It is best practice to accurately describe images, which includes implied reading order.

In this case, the order does not effect the meaning and as such, is no strict failure of the success criterion. Thus, the observation is marked as priority 4 – Minor.

Remediation Notes

Ensure accurate text alternatives. As a best practice, follow natural reading order of the default language. As default language is set de-DE, usually description top-down and left-right is used for linear, non-hierarchical content.

Accompanying Files
Observation Details

Images that are not purely decorative, must have a purpose equivalent text alternative set, to be accessible if the image cannot be visually perceived. A prime example is a blind screen reader user. But also if an image cannot be loaded due to network issues, the text alternative ensures perception of the conveyed information.

Images with non-equivalent text alternative:

  • "Google on Android" logo has text alternative "Android on Google"

Remediation Notes

Accompanying Files
Observation Details

Images that are not purely decorative, must have a purpose equivalent text alternative set, to be accessible if the image cannot be visually perceived. A prime example is a blind screen reader user. But also if an image cannot be loaded due to network issues, the text alternative ensures perception of the conveyed information.

Images with non-equivalent text alternative in section "Dein Android-Handy rundum geschützt".

  • "Chrome" uses Google Play icon

  • "Google One" uses Google Wallet icon

Arguably, the icons also are decorative. So a null alt attribute is more suited as the current wrong ones.

Remediation Notes

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

Accompanying Files
Observation Details

The HTML image element must always use have alt attribute present. Either

  • null alt attribute for purely decorative or

  • non-null alt attribute for informative/functional images.

Image elements missing alt attribute, see attached screenshots

Remediation Notes

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

Accompanying Files
Observation Details

Images that are not purely decorative, must have a purpose equivalent text alternative set, to be accessible if the image cannot be visually perceived. A prime example is a blind screen reader user. But also if an image cannot be loaded due to network issues, the text alternative ensures perception of the conveyed information.

Images with non-equivalent text alternative:

  • Manufacturer logos are used as links. As such, the purpose is to describe the link target, not the manufacturers logo

Remediation Notes

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

Accompanying Files
Observation Details

All images that are not purely decorative must have a purpose equivalent text alternative present. The stage image is using CSS background-image and no text alternative is present.

Remediation Notes

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

Accompanying Files
Observation Details

Purely decorative images must not have an accessible text alternative present. They must be excluded from the accessibility tree.

Arguably decorative images with text alternative present in attached screenshots:

  • Icons and symbols

Remediation Notes

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

Accompanying Files
Observation Details

Images that are not purely decorative, must have a purpose equivalent text alternative set, to be accessible if the image cannot be visually perceived. A prime example is a blind screen reader user. But also if an image cannot be loaded due to network issues, the text alternative ensures perception of the conveyed information.

Images with non-equivalent text alternative:

  • Section "Im Falle der Fälle helfen wir gerne" – "Schadensmeldung aufgeben"

    • Uses "Handy mit zersprungenem Display"

Remediation Notes

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

Priority: Moderate Low Page: For Friends Observation Permalink
Accompanying Files
Observation Details

Purely decorative images must not have an accessible text alternative present. They must be excluded from the accessibility tree.

Decorative images with text alternative present as shown in attached screenshots.

  • Icons

  • SIM icons

Remediation Notes

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

Priority: Critical Low Page: For Friends Observation Permalink
Accompanying Files
Observation Details

All images must have text alternatives present. Either

  • null alt attribute for purely decorative or

  • non-null alt attribute for informative/functional images.

Images with missing text alternatives:

  • Stage "Holt euch jetzt Unlimited" image

Remediation Notes

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

Priority: Critical Medium Page: For Friends Observation Permalink
Accompanying Files
Observation Details

Images that are not purely decorative, must have a purpose equivalent text alternative set, to be accessible if the image cannot be visually perceived. A prime example is a blind screen reader user. But also if an image cannot be loaded due to network issues, the text alternative ensures perception of the conveyed information.

Images with non-equivalent text alternative:

  • SIM icons

    • "Zusatzkarten für weitere Personen" while Text content is "1. PlusKarte 19,95 € mtl., 2.-5. PlusKarte 9,95 € mtl.";

    • hint "5. PlusKarte", so maximum number of cards, is not part of any close by accessible text content; even footnote talks about "Max. 10 Zusatzkarten"; Footnote "Ab der zweiten..." does not have any limit set;

    • "Unbegrenztes Datenvolumen" icon says "Hauptkarte Unlimited = 1. PlusKarte Unlimited", while alt attribute says "Unbegrenztes Datenvolumen für alle Karten" and nearby text says something different

    • "Volle Flexibilität" icon text alternative is "Laufzeit? Gerät? Gestalten Sie jede Karte unabhängig" while visually presented text content is "Hauptkarte Vertragslaufzeit: 24 Monate, PlusKarte Vertragslaufzeit: 0 Monate"

  • "Weitere for Friends Angebote"

    • Images duplicate section heading; either with same or similar wording

    • "Speedbox for Friends" image uses "Prepaid for Friends" text alternative

    • "Smart Connect for Friends" image uses "Prepaid for Friends" text alternative

Remediation Notes

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


  • SIM icons could be marked decorative, as long as all content that is included in the images, is also present in accessible text content nearby; this especially means, important information as a card maximum "bis 5. PlusKarte" MUST be present in accessible text content; as of now, no user of assistive technology can get this information easily (or at all)

  • Do not copy text alternatives to other images; as the images themselves, there shouldn't be a reason to have the exact same content multiple times; so unless the image serves exactly the same purpose, the text alternative should also be unique

  • Do not duplicate heading text content with images' text alternatives

Priority: Critical Low Page: For Friends Observation Permalink
Accompanying Files
Observation Details

The icons (checkmark, cross) in data table "Die neuen PlusKarten der Telekom in der Übersicht" have no text alternative and table cells are therefore announced "blank".

Users of assistive technology cannot access the intended information at all.

Remediation Notes

Ensure, all informative images have purpose equivalent text alternatives present and accessible to all users.

Side note about table headers: Table headers might be announced for each table cell for users of assistive technology; navigating row to row, the row header is announced, then the content of the cell. Navigating column to column, the same happens with column headers; as of now, the column headers are very content-rich and as such the whole header is announced for each cell; Ideally, only the most important content part that is distinguishing the columns/rows is part of the header; ("Basis"), "Plus", "Kids & Teens", "Data" would be a lot more user friendly; the repeating content ("MagentaMobil PlusKarte") could be omitted when described before the table; e.g. "Vergleichen sie die verschiedenen MagentaMobil PlusKarten und ihre Funktionen"

Accompanying Files
Observation Details

Purely decorative images must not have an accessible text alternative present. They must be excluded from the accessibility tree.

Remediation Notes

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

Accompanying Files
Observation Details

Images that are not purely decorative, must have a purpose equivalent text alternative set, to be accessible if the image cannot be visually perceived. A prime example is a blind screen reader user. But also if an image cannot be loaded due to network issues, the text alternative ensures perception of the conveyed information.

Observations:

  • Hero image text alternative duplicates heading

  • Device images text alternatives duplicate existing text content

  • Icons

    • camera icons show different camera setup but all use the same text alternative; differences are not available as text and as such must be included in text alternative

    • A17 chip alt text includes information not available in the image

    • M4 chip alt text duplicates existing text content

Remediation Notes

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

Accompanying Files
Observation Details

Purely decorative images must not have an accessible text alternative present. They must be excluded from the accessibility tree.

Remediation Notes

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

Accompanying Files
Observation Details

Images that are not purely decorative, must have a purpose equivalent text alternative set, to be accessible if the image cannot be visually perceived. A prime example is a blind screen reader user. But also if an image cannot be loaded due to network issues, the text alternative ensures perception of the conveyed information.

Remediation Notes

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

Accompanying Files
Observation Details

Images that are not purely decorative, must have a purpose equivalent text alternative set, to be accessible if the image cannot be visually perceived. A prime example is a blind screen reader user. But also if an image cannot be loaded due to network issues, the text alternative ensures perception of the conveyed information.

Images with non-equivalent text alternative:

  • Main image "Alle Infos zu Roaming"

Remediation Notes

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

Accompanying Files
Observation Details

Purely decorative images must not have an accessible text alternative present. They must be excluded from the accessibility tree.

Decorative images with text alternative present:

  • Tariff option card icons

Remediation Notes

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

Accompanying Files
Observation Details

Images that are not purely decorative, must have a purpose equivalent text alternative set, to be accessible if the image cannot be visually perceived. A prime example is a blind screen reader user. But also if an image cannot be loaded due to network issues, the text alternative ensures perception of the conveyed information.

Images with non-equivalent text alternative:

  • Frau und Mann genießen die Vorteile der Travel Mobil Optionen am Strand

  • Zwei junge Frauen am Strand freuen sich über die Travel Mobil Optionen

  • Junge Frau genießt die Vorteile der Travel Mobil Optionen

Images' text alternative include "SEO content" instead of accurately describing image content or purpose.

Note: This is not a strict failure of the success criterion 1.1.1 Non-text Content and as such is marked Priority 4 – Minor. It may be argued, connecting the image description to the "Travel Mobil Option" is the purpose of the images. Rather than trying these argumentation, it is better practice to only include actually visible content of the image when using image description, as the more likely intended purpose of the image is to generally show "happy people, traveling". As an observation Priority 4 – Minor, please see remediation notes as best practice recommendation.

Remediation Notes
  • Ensure purpose equivalent text alternatives are present for every non-decorative image.

  • Ensure, no "extra" information is added to an image alt attribute that is not part of the image; this means more accurate description of the images could be

    • "Mann und Frau stehen am Strand und schauen lächelnd auf ein Handy"

    • "Zwei junge Frauen schauen lächelnd in die Kamera. Sie stehen an einem Strand"

    • "Junge Frau mit Sonnenbrille sonnt sich am Strand und schaut auf ein Handy"

Accompanying Files
Observation Details

Purely decorative images must not have an accessible text alternative present. They must be excluded from the accessibility tree.

Decorative images with text alternative present:

  • Icons

Remediation Notes

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

Accompanying Files
Observation Details

Images that are not purely decorative, must have a purpose equivalent text alternative set, to be accessible if the image cannot be visually perceived. A prime example is a blind screen reader user. But also if an image cannot be loaded due to network issues, the text alternative ensures perception of the conveyed information.

Images with non-equivalent text alternative:

  • Frau macht Foto in New York und surft mit Travel & Surf mobil im Internet

Images' text alternative include "SEO content" instead of accurately describing image content or purpose.

Note: This is not a strict failure of the success criterion 1.1.1 Non-text Content and as such is marked Priority 4 – Minor. It may be argued, connecting the image description to the "Travel & Surf" is the purpose of the images. Rather than trying these argumentation, it is better practice to only include actually visible content of the image when using image description, as the more likely intended purpose of the image is to generally show "people, traveling / tourist activity". As an observation Priority 4 – Minor, please see remediation notes as best practice recommendation.

Remediation Notes
  • Ensure purpose equivalent text alternatives are present for every non-decorative image.

  • Ensure, no "extra" information is added to an image alt attribute that is not part of the image; this means more accurate description of the images could be

    • "Frau macht mit dem Handy ein Foto von der New York Skyline"

Priority: Critical Low Page: Travel Surf Observation Permalink
Accompanying Files
Observation Details

Images that are not purely decorative, must have a purpose equivalent text alternative set, to be accessible if the image cannot be visually perceived. A prime example is a blind screen reader user. But also if an image cannot be loaded due to network issues, the text alternative ensures perception of the conveyed information.

  • Images with non-equivalent text alternative are Step-by-Step guide images for "Buchen Sie Travel & Surf Pässe"

Remediation Notes
  • Ensure purpose equivalent text alternatives are present for every non-decorative image.

  • Text alternative may be presented as text content instead of alt attribute; ensure, all informative content is then available in nearby text content and use a null alt attribute alt="" to declare image decorative to assistive technology

Priority: Moderate Low Page: Travel Surf Observation Permalink
Accompanying Files
Observation Details

Purely decorative images must not have an accessible text alternative present. They must be excluded from the accessibility tree.

Decorative images with text alternative present:

  • Icons "Ländergruppen"

Remediation Notes

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

Accompanying Files
Observation Details

Images that are not purely decorative, must have a purpose equivalent text alternative set, to be accessible if the image cannot be visually perceived. A prime example is a blind screen reader user. But also if an image cannot be loaded due to network issues, the text alternative ensures perception of the conveyed information.

Images with non-equivalent text alternative:

  • Flex Smartphone-Tarife

  • Flex Daten-Tarife

Image text alternatives duplicate existing heading content.

Remediation Notes

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

Priority: Critical Low Page: Sonim XP100 Observation Permalink
Accompanying Files
Observation Details

Images that are not purely decorative, must have a purpose equivalent text alternative set, to be accessible if the image cannot be visually perceived. A prime example is a blind screen reader user. But also if an image cannot be loaded due to network issues, the text alternative ensures perception of the conveyed information.

Images with non-equivalent text alternative:

  • Wissenswertes zum Sonim XP100

  • Unkomplizierte Kommunikation – immer und überall

  • Ein Akku, der durchhält

Remediation Notes

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

Priority: Critical Low Page: Sonim XP100 Observation Permalink
Accompanying Files
Observation Details

The HTML image element must always use have alt attribute present. Either

  • null alt attribute for purely decorative or

  • non-null alt attribute for informative/functional images.

Image elements missing alt attribute:

  • Netzteil

Remediation Notes

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

Accompanying Files
Observation Details

The icons in "Zusammenfassung" list are hidden from assistive technology by using aria-hidden="true". The icons however are not decorative. The inform the user about the state of their answers from previous steps. As the icons are hidden, assistive technology announces the list items only.

Remediation Notes

Ensure all non-decorative images use proper text alternatives.

Ideally, the user input is not only displayed visually but reflected in the text content of the list like this:

<h3>Zusammenfassung</h3>
<p>
  Basierend auf Ihren Angaben erhalten Sie für Ihr iPhone 11 mit 128 GB bis zu 
  <span>29&nbsp;€</span>
</p>

<p>Sie haben angegeben, dass</p>
<ul>
  <li>sich Ihr Handy einschalten lässt</li>
  <li>Gehäuse und Bildschirm Ihres Handys nicht zertrümmert oder verbogen sind</li>
  <li>das Display keine Risse hat</li>
  <li>die Glasrückseite Risse aufweist</li>
</ul>

<p>
  Sollten wir nach der Prüfung zu einem anderen Ergebnis...
</p>

Another option would be to split the "YES" and "NO" lists.

Accompanying Files
Observation Details

"Handyankauf" form has explanation dialog windows in step 3 (triggered by info icon).

Images all use same alt text "Gerät Schäden".

Images that are not purely decorative, must have a purpose equivalent text alternative set, to be accessible if the image cannot be visually perceived. A prime example is a blind screen reader user. But also if an image cannot be loaded due to network issues, the text alternative ensures perception of the conveyed information.

Remediation Notes

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

This means, each image must have a unique text alternative if it is not marked decorative.

Accompanying Files
Observation Details

CAPTCHAs will always exclude user groups from accessing functionality of a page. Manually entered CAPTCHAs should always be avoided. If CAPTCHA is used, a text alternative must be presented so users of assistive technology can still access the functionality.

Remediation Notes
  • 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.

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

Accompanying Files
Observation Details

Manufacturer icons missing text alternative

Remediation Notes

Accompanying Files
Observation Details

Images that are not purely decorative, must have a purpose equivalent text alternative set, to be accessible if the image cannot be visually perceived. A prime example is a blind screen reader user. But also if an image cannot be loaded due to network issues, the text alternative ensures perception of the conveyed information.

Images with non-equivalent text alternative:

  • Device images using generic device name instead of purpose equivalent text alternative; some text alternatives duplicate existing text content, some even name the wrong device

  • "GreenMagenta"

  • "Junger Mann mit Smartphone"

Remediation Notes

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

Accompanying Files
Observation Details

Purely decorative images must not have an accessible text alternative present. They must be excluded from the accessibility tree.

Remediation Notes

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

Accompanying Files
Observation Details

Device color variants use CSS circles <span style="background:#...;" class="hardware-tile-lpg__color-selection-element"></span> without any text alternative present.

Remediation Notes

Ensure, all non-text content, providing information to the user, has a purpose equivalent text alternative present for users of assistive technology. Ideally, this is done by including visible text content, but if this is not possible, this could be done be inserting a visually hidden element with the color variant name like <span class="visually-hidden">Violett</span>.