37 issues found on iPhone Erleben

When dynamically added content can be activated by the user, correct focus order must be ensured. This includes:

• Opening a dialog window

• Expanding an accordion item

• Dynamically loading more content (e.g. more products in a product list) via "Load more" button

Adding and removing dynamic content must not remove focus from the triggering element. E.g. a footnote or info icon opening (adding) a dialog window. When the dialog window is closed (removed) again, focus must be on the triggering element.

Focusable elements must have a visually distinct focus state. Moving keyboard focus to a focusable element must clearly identify the element as being focused. If this is not the case, sighted users of keyboard navigation will have difficulties navigating a page. Especially when multiple focusable elements do not show visible focus indicators, properly navigating the page may become impossible.

Elements in "Handyankauf" form:

• "In welchem Zustand ist Ihr..." Radio buttons

Open dialog windows can obscure focus of underlying interactive elements. Obscuring can be partial or complete. This will impact users of keyboard navigation as focus cannot be tracked while a dialog window is open. Dialog windows may be triggered by:

• Footnotes

• Info Icons

• Buttons

When (non-native) functionality relies on non-single pointer gestures, like swiping sliders, table columns, or opening sidebars by swipe, these must also have a single pointer variant accessible. The situation may occur, when changing to smaller viewports and the component in question is set to not use native overflow methods and to not reflow.

Users, not able to use complex pointer gestures, will not be able to access the elements in question and most likely will have difficulties to access information that is overflowing the viewport.

The page uses carousels for all major content cards on smaller viewports, not implementing pagination/navigation buttons to navigate by single pointer.

Interactive elements, like links, buttons, inputs, must have a label that is visible at all times and an accessible name that is programmatically determinable. The visible label of interactive elements must be equal to, or part of the accessible name.

If the accessible name is changed programmatically to differ from the natively set name, the visible label must be part of it in the exact wording. If the accessible name is changed, ideally, the visible label is the first part of the accessible name.

Assistive technology like voice control software uses the accessible name to control interactive elements. By stating the accessible name, the interactive element can be activated. So to activate a button, labeled "Submit", a user of voice control software can say "Click button Submit". If the accessible name of the button has been changed to "Send Form", the user is not able to access the button this way. If the accessible name of the button has been changed to "Submit Form", the name differs from the visible label but still includes the visible name as first part, making it still accessible to voice control software.

Mismatch of text content and accessible name:

• "Mehr erfahren" has accessible name "Entdecken Sie die innovative Mobilfunktechnologie"

• "Fragen? Wir helfen auch persönlich." has accessible name "Weiter zum Apple Business Chat"

• "Mehr erfahren" has accessible name "Erfahre mehr wie wir uns für einen verantwortungsvollen Umgang mit der Umwelt einsetzen"

• "Jetzt iPhone Modelle vergleichen" has accessible name "iPhone vergleichen: Alle Modelle im Überblick"

• "iPhone Vergleich" has accessible name "Zum iPhone Vergleich"

• "Smartphone-Tarif" has accessible name "Zu unseren Smartphone-Tarifen"

• "Prepaid-Tarife" has accessible name "Zu unseren Prepaid-Tarifen"

• "monatlich kündbaren Handyverträge" has accessible name "Wechselassistent für Smartphones"

• "Handyvergleich" has accessible name "Zu unserem Handyvergleich"

• "iPad" has accessible name "Alle iPads bei der Telekom entdecken"

title attribute on link:

• "Wo finde ich die Angaben?" uses title attribute that duplicates accessible name

• "Zurück" uses title attribute that duplicates accessible name

Cards show button style link; mismatch of text content and accessible name:

• "iPhone 'Zum Angebot'" have accessible names "Zum iPhone X Angebot"

Focusing the tabs "Bereit für ein neues iPhone?" & "Bereit für den Wechsel zum iPhone?" by assistive technology will automatically select the tab. This results in behavior, that the first tab can be selected by assistive technology but moving to the main content is not possible, as navigating through the page will automatically select the second tab.

Observations on input field "Modell, z. B. Apple iPhone 11":

• Moving screen reader focus to input field announces editable text field.

• Entering character shows list.

• The first item in list is automatically selected.

  • This traps focus of screen reader in the list box.

  • Entering next character will auto select first item.

  • Selection is possible via ARROW UP / DOWN

Handyankauf form marks (some) "Pflichtfelder" with "*". But there is not explanation present.

• Step 1: Modell is Pflichtfeld but not marked

• Step 6

  • Anrede is Pflichtfeld but not marked

  • Checkboxes are Pflichtfeld but not marked

IMEI-Nummer form input requires "15-stellig" which is part of visible label. It also requires the input without spaces, which is not part of the visible label.

Radio button groups in "In welchem Zustand ist Ihr X?" in Handyankauf form step 3 do label each individual radio button by visible text content. The radio button group however does not have appropriate label linked to the inputs.

Handyankauf form input throws errors but known suggestions are not made.

• Step 2: "IMEI ungültig" does not hint to specific format requirements (e.g. number of characters, as shown in label, omitting spaces, etc.)

• Step 5: "Code/IMEI-Nummer ungültig." does not suggest Code/IMEI format requirements (compared to e.g. step 2)

• Step 5: "Achten Sie genau auf die Buchstaben oder Nummern." is not accurate wording for input of IMEI number

• Step 6:

  • "Der Vorname ist ungültig."

  • "Der Nachname ist ungültig."

  • "Die IBAN ist ungültig"

Handyankauf form does not implement error prevention. At least one of the following must be true for submitting data:

• Reversible – Submissions are reversible.

• Checked – Data entered by the user is checked for input errors and the user is provided an opportunity to correct them.

• Confirmed – A mechanism is available for reviewing, confirming, and correcting information before finalizing the submission.

The "Handyankauf" form provides two steps for entering a device IMEI. The IMEI is not auto-populated to the second occurrence.

Form inputs in "Handyankauf" form Step 6 do not use appropriate autocomplete values.

• "PLZ" → "new-password"

• "Ort" → "new-password"

• "Straße" → "new-password"

• "Hausnr." → "new-password"

Some form inputs have autocomplete="off"

• (Anrede) – not using semantic HTML input element

• "Vorname"

• "Nachname"

• "E-Mail Adresse"

• "IBAN"

Input form "Handyankauf" has no "Zurück" button on

• step 6 as opposed to all previous steps. As data, entered to the form, is not saved, and the only way to go back from step 6 is to reload the page, all entered data will be erased. By ensuring, users can navigate all steps back and forth, ideally also being able to jump to specific steps, users will have an easier time, navigating the multi-step form.

• step 3 when choosing "wrong" radio buttons. When choice of radio buttons will terminate the form process, those radio buttons should be separated from the others. When 3 of 4 radio buttons are required to be marked as "YES", this information should be available to the user beforehand. Information like "Wir können Ihr Gerät nur ankaufen, wenn es keine der folgenden Schäden hat" is important to know in advance and is better suited to be displayed as a type="checkbox", where the user can confirm all 3 items ("Ich versichere, dass mein Handy funktionsfähig ist – 1. Das Handy lässt sich einschalten, bleibt mindestens 45 Sekunden lang eingeschaltet und lässt sich aufladen [✔︎], ...") Then adding the last "optional" question that determines the Ankaufs value, could remain a radio button group to differentiate from the mandatory "YES" questions.

Observations:

• Dropdown "Wählen Sie ein iPhone aus" uses span role="combobox" tabindex="0" instead of semantic input field for selection / dropdown

• Handyankauf form

  • Step indicators use <button type="button" disabled> but are not buttons

  • CAPTCHA reload button uses span aria-hidden="true" instead of button element

  • "Wo finde ich die IMEI-Nummer" uses a href="#imei" title="..." instead of button element; side note, #imei is not found in DOM

    • Close button in dialog window uses <button type="button"> which is redundant and unnecessary

  • "Zurück" button use a href="#" title="Zurück" instead of button element

  • Info "i" icon buttons (step 3) use <span aria-hidden="true"><svg>... instead of semantic (accessible) button element

    • Close button in dialog window uses <button type="button"> which is redundant and unnecessary

  • "Wo finde ich die Angabe" uses a href="#imei" title="..." instead of button element; side note, #imei is not found in DOM

    • Close button in dialog window uses <button type="button"> which is redundant and unnecessary

  • "Prüfen" button uses <button type="button"> which is redundant and unnecessary

  • "Ohne Aktion fortfahren" button uses <button type="button"> which is redundant and unnecessary

  • "Anrede" dropdown uses span role="button" tabindex="0" ... and select id="..." name="title" (with non-unique id) instead of semantic input element

All interactive elements that do not use the correct interactive HTML elements must be built in a way, that semantic information is provided and updates to semantic information are accessible via assistive technology. Building interactive components with incorrect HTML elements results in inaccessible content. These accessibility issues might occur:

• Interactivity of element is not announced → user will not know, that element is interactive

• Changes to states (e.g. collapsed/expanded) is not announced → user will not know of the change

• Target resource is not announced → e.g. user will not know, where a link leads to

• Interactive action is not announced → e.g. user will not know, that a dialog window will be opened

Issues in 4.1.2 Name, Role, Value often occur together with other issues e.g. in 2.1.1 Keyboard and 2.4.7 Focus Visible.

Footnote dialog window is not keyboard accessible.

All interactive elements that do not use native, interactive HTML elements must be built in a way, that semantic information is provided and updates to semantic information are accessible via assistive technology. Building interactive components with non-semantic HTML elements results in inaccessible content. These accessibility issues might occur:

• Interactivity of element is not announced → user will not know, that element is interactive

• Changes to states (e.g. collapsed/expanded) is not announced → user will not know of the change

• Target resource is not announced → e.g. user will not know, where a link leads to

• Interactive action is not announced → e.g. user will not know, that a dialog window will be opened

Issues in 4.1.2 Name, Role, Value often occur together with other issues e.g. in 2.1.1 Keyboard and 2.4.7 Focus Visible.

Elements that are visually hidden should not receive keyboard focus.

See links "Gerät ändern", "Wie wird der Wrt berechnet", "Weitere Informationen"

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"

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

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.

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

Links solely rely on color to be differentiated from other, surrounding text content and color contrast ratio of link text color to surrounding text color does not meet minimum required 3:1 color contrast ratio. Links, relying on color only and with insufficient color contrast ratio to surrounding text content include:

• "Telekom Netz" link in "Netz" dialog window

Focused interactive elements with focus states solely relying on color difference:

• "Handyankauf" form

  • All/most steps

    • Buttons

      • Weiter

      • Ohne Aktion fortfahren

      • Verbindliche Anfrage abschicken

  • Step 2

    • Close button in dialog window "Wo finde ich die IMEI-Nummer?"

  • Step 3

    • Close button in dialog windows (triggered by info icon)

  • Step 5

    • Close button in dialog window "Wo finde ich die Angaben?"

    • "Prüfen" button

  • Step 6

    • Select / Dropdown "Anrede"

    • Checkboxes

      • Focus state

      • Error state

Focusing interactive element adds visual focus indicator that does solely rely on color to be differentiated from default, un-focused state and color contrast ratio of default and focused states does not meet minimum required 3:1 color contrast ratio. Interactive elements' focus states, relying on color only and with insufficient color contrast ratio to default, un-focused state include:

• Links

• Buttons

• Input elements (e.g. radio buttons)

• Accordion items

Links solely rely on color to be differentiated from other, surrounding text content and color contrast ratio of link text color to surrounding text color does not meet minimum required 3:1 color contrast ratio. Links, relying on color only and with insufficient color contrast ratio to surrounding text content include "Handyankauf" form:

• General

  • Zurück buttons/links

• Step 2

  • Wo finde ich die IMEI-Nummer?

• Step 5

  • Wo finde ich die Angaben?

• Step 6

  • Checkbox links

    • Ankaufsbedingungen

    • Datenschutzbestimmungen

The visually presented heading structure of the page does not match the use of semantic HTML heading elements. The visually presented structure is as follows:

h1 Wir bringen zusammen, was zusammengehört
  h2 iPhone mit der Telekom: Momente perfekt festhalten. Und superschnell teilen.
    h3 Fortschrittliche Kamera – Das iPhone macht unglaubliche Fotos und Videos.
    h3 Batterie – Eine Batterie, die den ganzen Tag mithält.
    h3 Auflösung – Retina HD Display. Scharf und hell, mit fantastischen Farben.
    h3 Leistung – Die volle Power ultraschneller Chips.
    h3 5G Netz – Mit mehr Speed aufs nächste Level.
  h2 Finden Sie jetzt Ihr neues iPhone bei der Telekom
    h3 iPhone 16 Pro Max. Übernimm die Kamerasteuerung.
    h3 ...
  h2 Ein ganzes Netzwerk eingebauter Sicherheits­features.
    h3 App Tracking Transparenz – Ohne Erlaubnis dürfen Apps keine Aktivitäten tracken.
    h3 Face ID – Face ID funktioniert ohne ein Selfie zu speichern.
    h3 Mehr Sicherheit mit 5G – Bewahren Sie Ihre persönlichen Daten sicher auf, wo immer Sie sind.
    h3 Fotos – Selbst entscheiden, wer was auf der Fotos App sehen kann.
  h2 Einfach das iPhone bei der Telekom finden, das am besten passt
    h3 Apple iPhone 16
    h3 Apple iPhone 16 Pro
    h3 Apple iPhone 16 Plus
    h3 Apple iPhone 16 Pro Max
  h2 Immer in Verbindung. Und besser für die Umwelt.
    h3 Rohstoffe – Apple setzt sich ein für 100% recycelte oder erneuerbare Materialien.
    h3 Erneuerbare Energien – Telekom 5G läuft zu 100 % mit erneuerbaren Energien.
    h3 Green Magenta – Grüne und nachhaltige Produkte und Initiativen.
    h3 Langlebigkeit – Für alle, die ein Smartphone wollen, das lange hält – das iPhone.
    h3 Handyankauf
      h4 Welches Smartphone wollen Sie verkaufen?
      h4 IMEI-Nummer Ihres ...
      h4 In welchem Zustand ist Ihr ...
      h4 Leider können wir Ihr Smartphone nicht ankaufen
      h4 Zusammenfassung
      h4 Jetzt Ankaufsbonus erhalten
      h4 Ankaufsanfrage abschließen
        h5 Ihre Kontaktdaten
        h5 Ihre Kontodaten
        h5 Ankaufsanfrage
    h3 Die iPhone Modelle entdecken – Welches iPhone ist das richtige?
  h2 Häufig gestellte Fragen zum iPhone bei der Telekom
    h3 Was kostet ein iPhone bei Vertragsverlängerung bei der Telekom?
    h3 Wie kann ich auf ein neueres iPhone Modell bei der Telekom wechseln?
    h3 Welcher SIM-Kartentyp der Telekom passt in das neueste iPhone?
    h3 Kann ich mein altes iPhone bei der Telekom in Zahlung geben?

The programmatically determinable heading structure, using HTML heading elements is as follows:

h1 iPhone mit der Telekom: Momente perfekt festhalten. Und superschnell teilen.
  h2 Das iPhone macht unglaubliche Fotos und Videos.
  h2 Eine Batterie, die den ganzen Tag mithält.
  h2 Retina HD Display. Scharf und hell, mit fantastischen Farben.
  h2 Die volle Power ultraschneller Chips.
  h2 Mit mehr Speed aufs nächste Level.
  h2 Finden Sie jetzt Ihr neues iPhone bei der Telekom
    h3 iPhone 16 Pro Max. Übernimm die Kamerasteuerung.
  h2 Ein ganzes Netzwerk eingebauter Sicherheits­features.
    h3 Ohne Erlaubnis dürfen Apps keine Aktivitäten tracken.
    h3 Face ID funktioniert ohne ein Selfie zu speichern.
    h3 Bewahren Sie Ihre persönlichen Daten sicher auf, wo immer Sie sind.
    h3 Selbst entscheiden, wer was auf der Fotos App sehen kann.
  h2 Einfach das iPhone bei der Telekom finden, das am besten passt
  h2 Immer in Verbindung. Und besser für die Umwelt.
    h3 Telekom 5G läuft zu 100 % mit erneuerbaren Energien.
    h3 Grüne und nachhaltige Produkte und Initiativen.
    h3 Für alle, die ein Smartphone wollen, das lange hält – das iPhone.



  <!-- HANDYANKAUF FORM WITH STEPS -->

  h2 Handyankauf

  h2 Welches Smartphonewollen Sie verkaufen?
    h3 Geben Sie den Namen Ihres Smartphones ein und wählen Sie es aus der Liste aus.

  h2 IMEI-Nummer Ihres ... für Ihren Ankauf
      h4 Basierend auf Ihrer Auswahl haben wir einen geschätzten Ankaufswert ermittelt: ... €  Für die genaue Preisermittlung und den Ankauf Ihres Geräts benötigen wir zusätzlich die IMEI-Nummer Ihres Smartphones.
  
  h2 In welchem Zustand ist Ihr ...?
      h4 Bitte beantworten Sie vier kurze Fragen, damit wir ermitteln können, ob wir Ihr Gerät ankaufen und um Ihnen ein vorläufiges Angebot machen zu können.
      h4 Lässt sich das Handy einschalten?
      h4 Ist das Handy frei von erheblichen Schäden und/oder sichtbaren Flüssigkeitsschäden?
      h4 Verfügt das Handy über ein funktionstüchtiges Display, das keine Risse oder andere Schäden aufweist?
      h4 Ist die Rückseite des Handys intakt und frei von Rissen?
  
  (h2 Leider können wir Ihr Smartphone nicht ankaufen)
  h2 Zusammenfassung
      h4 Basierend auf Ihren Angaben erhalten Sie für Ihr... bis zu:

  h2 Jetzt Ankaufsbonus erhalten
      h4 Wenn Sie ein Neugerät gekauft haben, für das die Telekom einen Ankaufsbonus bietet, geben Sie die IMEI des erworbenen Neugerätes ein. Oder tippen Sie hier einen Aktionscode ein.

  h2 Ankaufsanfrage abschließen
      h4 Die Gesamtsumme für Ihr ... (ggf. mit einem Ankaufsbonus) beträgt bis zu:
      h4 Um Ihre Anfrage für den Ankauf Ihres ... abzuschließen, benötigen wir Ihre persönlichen Daten (bitte keine Packstation als Absender verwenden). Bitte nennen Sie uns zudem noch das Bankkonto, auf das wir den Ankaufswert und ggf. Ankaufsbonus nach erfolgreicher Prüfung Ihres Gerätes überweisen können.
    h3 Ihre Kontaktdaten
    h3 Ihre Kontodaten
    h3 Ankaufsanfrage
     h4 Bitte senden Sie uns Ihr ... innerhalb von 21 Tagen zu. Sobald dieses in unserem Logistikzentrum eingetroffen ist und der Zustand des Gerätes den Angaben entspricht, kontaktieren wir Sie mit dem ermittelten Ankaufspreis von bis zu ... € und schließen den Ankauf ab.

  <!-- END OF FORM -->



  h2 Häufig gestellte Fragen zum iPhone bei der Telekom
    h3 Was kostet ein iPhone bei Vertragsverlängerung bei der Telekom?
    h3 Wie kann ich auf ein neueres iPhone Modell bei der Telekom wechseln?
    h3 Welcher SIM-Kartentyp der Telekom passt in das neueste iPhone?
    h3 Kann ich mein altes iPhone bei der Telekom in Zahlung geben?

While disabled interactive elements do not have to adhere to same contrast requirements as enabled elements, text content still should use proper color contrast ratio.

Given that this usually is not too easy to manage with existing design system guidelines, it should be evaluated to remove disabled form elements completely. Especially if they will not be editable anyways.

Multiple (nested) main elements found. Ensure only a single main landmark is used per page.

Text content in certain containers may overflow the container's boundaries, when text spacings are changed, making some text harder, other text impossible to perceive. This often includes:

• Stage areas

• Badges

• Manually outlined elements like buttons (e.g. footnote icon buttons)

• Teasers

• Card components

"Handyankauf" form step headings use control characters for line breaks.

<h2 class="...">
  "IMEI-Nummer "
  "Ihres"
  "iPhone 11"
  " mit "
  "128"
  "GB "
  " für Ihren Ankauf "
</h2>

Character codes are 000D, Carriage Return, \r & 000A, Line Feed, \n.

A screen reader announces this as follows:

Heading
IMEI-Nummer Ihres iPhone 11 mit 128GB für Ihren Ankauf
8 Items
You are currently on a Heading level 2
IMEI-Nummer, level 1
Ihres, level 1
Leerzeichen, level 1
iPhone 11, level 1
mit, level 1
128, level 1
GB, level 1
für Ihren Ankauf, level 1
End of Heading Level 2

Subsequent heading levels (e.g. right now the whole body copy text below this heading level 2 in step 2 is a heading with 9 items, including announced space characters) will further worsen the announcements as levels are going deeper.

When opening a dialog window (e.g. via footnote or info icon), said dialog window does not receive keyboard focus. This leads to multiple issues:

• The contents of the dialog window are not accessible via keyboard.

• The dialog window can not be closed by keyboard (easily or at all).

• While the dialog window is open, keyboard navigation of the underlying page is still possible; the dialog window however blocks the view. (see also 2.4.11 Focus Not Obscured (Minimum))

• Since keyboard navigation stays possible, opening multiple dialog windows above each other also is possible.

• CAPTCHA reload icon button not operable by keyboard

  • Button uses non-semantic <span>

  • Button is hidden by using aria-hidden="true"

Interactive element can be operated by mouse but not by keyboard. The issue may occur when:

• Non-semantic HTML elements (e.g. <div>, <span>) are used for interactive purposes (e.g. links, buttons, inputs), instead of semantic HTML elements (e.g. <a href="">, <button>). This often also leads to other issues, concerning 4.1.2 Name, Role, Value.

• Semantic elements are used but required attributes are missing (e.g. <a>, missing href attribute)

• Semantic HTML elements are mis-used (e.g. <a> used as a button, or <button> used as a link)

Dropdown / selection "Wählen Sie ein iPhone aus" uses <span role="combobox" tabindex="0" ...>. Dropdown caret icon uses <span aria-hidden="true"><svg role="img" focusable="false">.

Navigating by screen reader, after the section heading, the main image is selected. After that, the right container half is skipped by the screen reader.

All interactive elements that do not use the correct interactive HTML elements must be built in a way, that semantic information is provided and updates to semantic information are accessible via assistive technology. Building interactive components with incorrect HTML elements results in inaccessible content. These accessibility issues might occur:

• Interactivity of element is not announced → user will not know, that element is interactive

• Changes to states (e.g. collapsed/expanded) is not announced → user will not know of the change

• Target resource is not announced → e.g. user will not know, where a link leads to

• Interactive action is not announced → e.g. user will not know, that a dialog window will be opened

Issues in 4.1.2 Name, Role, Value often occur together with other issues e.g. in 2.1.1 Keyboard and 2.4.7 Focus Visible.

"Question tiles" / cards in Handyankauf form step 3 ("Lässt sich das Handy einschalten?", etc.) use radio buttons for "yes" an "no" values. The radio buttons are not grouped by <fieldset>. While this is no strict failure on its own, it only works accurately, when heading structure and structured content of the card is presented and programmatically determinable in a way so that the context always is clear.

The code syntax is as follows:

<div class="...">
  <div class="">
    <div class="...">
      <h4 class="">Lässt sich das Handy einschalten?</h4>
      <span class="..." aria-hidden="true">
        <svg>...</svg>
      </span>
    </div>
    <ul class="...">
      <li class="...">
        <span class="">Das Handy lässt sich einschalten.</span>
      </li>
      <li class="...">
        <span class="">Es bleibt mindestens 45 Sekunden lang eingeschaltet.</span>
      </li>
      <li class="...">
        <span class="">Es lässt sich aufladen.</span>
      </li>
    </ul>
    <div class="...">
      <div>
        <input type="radio" id="POWERON_YES" name="1_POWER_ON_WCTI" value="POWERON_YES">
        <label for="POWERON_YES" class="">Ja, lässt sich einschalten</label>
      </div>
      <div>
        <input type="radio" id="POWERON_NO" name="1_POWER_ON_WCTI" value="POWERON_NO">
        <label for="POWERON_NO" class="">Nein</label>
      </div>
    </div>
  </div>
</div>

Observations:

• No <fieldset> used to group radio buttons

• While each radio button has a label, provided by for="..." and id="..." attributes, the radio button group does not have a label programmatically attached (e.g. via <legend>

• The list contains "features" or "functionality states" of the device in question, but the list is introduced by heading "Lässt sich das Handy einschalten?"; wording can be improved

What arguably is list content:

• Das iPhone macht unglaubliche Fotos und Videos.

• Eine Batterie, die den ganzen Tag mithält.

• Retina HD Display. Scharf und hell, mit fantastischen Farben.

• Die volle Power ultraschneller Chips.

• Mit mehr Speed aufs nächste Level.

and

• Ohne Erlaubnis dürfen Apps keine Aktivitäten tracken.

• Face ID funktioniert ohne ein Selfie zu speichern.

• Bewahren Sie Ihre persönlichen Daten sicher auf, wo immer Sie sind.

• Selbst entscheiden, wer was auf der Fotos App sehen kann.

and

• Telekom 5G läuft zu 100 % mit erneuerbaren Energien.

• Grüne und nachhaltige Produkte und Initiativen.

• Für alle, die ein Smartphone wollen, das lange hält – das iPhone.

is using heading elements instead.

List in Handyankauf form does not use semantic HTML list element.

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.