16 issues found on VIP Lieferung

Changing text spaces does not affect images of text. As such, "VIP Lieferung" image text content is not affected by text space changes in user preferences. This does not to be a failure of criterion 1.4.12 Text Spacing per se and as such is marked Priority 5 – Best Practice in this observation. Ideally, the text is displayed as text content instead of in an image. Arguably, the image might even be considered decorative, as the text content already is present in the main heading.

Page uses HTML heading element <h2> but not having a main heading <h1> present. When headings are used for structuring the page content, a main heading should be present.

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 AGB link in "VIP Lieferung" footnote dialog window

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 iPhone 16 mit VIP Lieferung
  h2 So einfach geht's
    h3 Ihr Gutscheincode
    h3 Persönliche Daten
    h3 Kontakt
    h3 Ihr favorisiertes iPhone (keine verbindliche Buchung)

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

  h2 So einfach geht's

Observations for heading structure:

• No main heading used

• Visually presented headings do not use HTML heading elements

Note: This observation is not considered a failure of the success criterion 1.4.3 Contrast (Minimum). As the observation still may affect usability and accessibility for certain user groups, it is recommended to follow the observation details and remediation notes.

Text content must meet minimum color contrast ratio of 4.5:1 to its background. Large text (>24px) content must meet minimum color contrast ratio of 3:1 to its background. The following text content does not meet the required minimum contrast ratios:

• Input labels, when input has error and input is focused, will use color #d90000 on #fceded background, which results in a 4.7:1 color contrast ratio. Given the font size, the line strength of the label at that font size, and the resulting font aliasing, no or very few pixel(s) in the font will actually reach the set color and color contrast ratio as a result.

All for inputs, asking for a user's personal data, must use accurate autocomplete attributes to allow for autocompletion of said user data.

Selection inputs not operable by keyboard as it does not use semantic HTML selection element:

• "Modell"

• "Farbe"

• "Speicher"

Selection input element can be navigated to and from and opened and closed; a selection however cannot be made by the required input methods ARROW UP / DOWN.

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)

Selection inputs' ("Modell", "Farbe", "Speicher") accessible name is equal to the selected item. Selecting "Modell iPhone 16" gives the input element the accessible name "iPhone 16", as it uses aria-labelledby="label-dropdown-1". The accessible name of the selection input must be the visible label ("Modell").

Input fields with no visible, in-text error message:

• "Modell" → No error shown

• "Farbe" → No error shown

• "Speicher" → No error shown

• "Datenschutzhinweise" → No text shown

"E-Mail-Adresse" must be entered twice in the form. Redundant entry must be avoided, as it is not essential to the form.

Navigating the form by assistive technology, leaving an input field in error state will announce the error to the assistive technology. In the scenario we are

• moving to the form by assistive technology,

• moving to the empty "Vorname" input field,

• leaving it empty and

• moving to the "Nachname" input field.

The "Vorname" input will error, announcing the error message "Vorname", "Bitte geben Sie Ihren Vornamen ein." – as the focus right now is already set to input "Nachname", but announcement is "Bitte geben Sie Ihren Vornamen ein.", users of assistive technology will inevitable send wrong data via the form.

Error messages merely duplicate label content ("Vorname" → "Bitte geben Sie Ihren Vornamen ein."). Error messages must inform the user about the error, not about existing information.

Checkbox input "Datenschutzhinweise" error state is solely conveyed by use of color.

"Pflichtfeld*" is an instruction to fill out the form but is given after the input fields. The instruction must be places before the first input field that is marked as "Pflichtfeld".

• "Datenschutzhinweise" checkbox input is not marked "*" as a "Pflichtfeld" but errors while being unchecked.

• "Modell", "Farbe", "Speicher" selection inputs not marked "*" as "Pflichtfeld"; error state cannot be checked due to missing credentials (Gutscheincode); as the inputs are not marked required in code markup, these can be considered a side note and do not contribute to the failure of the success criterion, as the other observation does

Link "Datenschutzhinweise" will download a PDF document. PDF documents must be made accessible as well. As PDF documents are out of scope for this audit, the document's accessibility is not evaluated.

As the user experience for all users is the same with this observation, it is not considered a failure under success criterion 2.4.4 Link Purpose (In Context).