Important Notice: This website shows interim results and does not represent a complete accessibility audit. The content is not final, is under heavy development, and is not legally binding. The website and all its content is for internal use only; unauthorized use or distribution may result in legal consequences.

Documentation of accessibility observations for Deutsche Telekom – Mobilfunk & OneShop

16 issues found on iPhone Vergleich

Page URL
https://www.telekom.de/unterwegs/hersteller/apple/iphone-vergleich

Issues List

Non-text Content 1.1.1 (A)
Image text alternative does not serve equivalent purpose
Non-text Content 1.1.1 (A)
Image is decorative but has text alternative
Info and Relationships 1.3.1 (A)
Visual presentation of heading structure does not match code markup
Info and Relationships 1.3.1 (A)
Tabular content does not use HTML table element
Info and Relationships 1.3.1 (A)
Improper use of semantic HTML list elements
Info and Relationships 1.3.1 (A)
Semantic HTML elements are used for styling or layout purposes
Meaningful Sequence 1.3.2 (A)
Collapsed content not hidden from assistive technology
Contrast (Minimum) 1.4.3 (AA)
Hovered/Focused link does not meet contrast ratio minimum
Keyboard 2.1.1 (A)
Interactive element, operable by mouse, not accessible by keyboard
Focus Order 2.4.3 (A)
Visually hidden elements in focus order are not shown on focus
Headings and Labels 2.4.6 (AA)
Content not accurately described by preceding heading hierarchy
Focus Not Obscured (Minimum) 2.4.11 (AA)
Collapsed content obscures focus of underlying elements
On Input 3.2.2 (A)
Device selection can cause change of context
Labels or Instructions 3.3.2 (A)
Input elements have no visible label
Name, Role, Value 4.1.2 (A)
FAQ not accessible via assistive technology
Name, Role, Value 4.1.2 (A)
Device selection names are not unique
Priority: Serious Low Page: iPhone Vergleich Observation Permalink
Accompanying Files
Observation Details

Collapsed content must be hidden from being accessed via assistive technology and keyboard navigation.

The collapsed content in "Weitere Details anzeigen" and "Mehr anzeigen" is still accessible.

Remediation Notes

Ensure all collapsed content is properly hidden from being accessed via assistive technology and keyboard navigation.

Priority: Serious Low Page: iPhone Vergleich Observation Permalink
Observation Details

Hovered and focused links in section "iPhones vergleichen: Älteres Modell oder High End-Smartphone?" do not meet minimum contrast ratio.

Remediation Notes

Ensure all links and all link states (default, hover, focus) meet minimum contrast ratio requirements of 4.5:1 for non-large font sizes.

Priority: Serious Medium Page: iPhone Vergleich Observation Permalink
Observation Details

Elements that are visually hidden.

  • interactive elements in collapsed content

should not receive keyboard focus:

  • "Weitere Details anzeigen"

  • "Mehr anzeigen"

Remediation Notes

Ensure, visually hidden elements cannot receive keyboard focus.

Especially elements in collapsed accordion items, non-active tabs, and un-opened dialog windows should not receive keyboard focus.

If they can receive keyboard focus, the elements must be made clearly visible on receiving keyboard focus. This is a common method to hide skip links and un-hide them on keyboard focus, using e.g. a CSS class visually-hidden with selector .visually-hidden:not(:focus):not(:active).

Priority: Serious Low Page: iPhone Vergleich Observation Permalink
Observation Details

Collapsed content 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 content is collapsed/hidden.

  • "Weitere Details anzeigen"

  • "Mehr anzeigen"

Remediation Notes

See remediation notes for 2.4.3 Focus Order.

Priority: Moderate Low Page: iPhone Vergleich Observation Permalink
Accompanying Files
Observation Details

Semantic HTML elements must not be used for styling and layout purposes. Semantic elements carry a certain role that is communicated to assistive technology. Using semantic elements with a certain role for styling or layout purposes while the content does not match the communicated role, it will confuse users of assistive technology. Certain elements will be announced in certain ways, so that e.g. line break elements <br> or empty paragraph elements <p></p> are announced as "empty group".

Remediation Notes

Ensure proper use of semantic HTML.

  • Semantic elements must not solely be used for styling or layout purposes

  • All styling and layout changes must use CSS

  • Limit use of line breaks to intended purposes, e.g. in poetry or code snippets

Priority: Serious Low Page: iPhone Vergleich Observation Permalink
Observation Details

What is arguably list content, is not using semantic list elements. See details in comparison table. Ideally, all list content, e.g. in "Kapazität" it would be "128 GB, 256 GB, 512 GB", is presented and marked up as a list.

Remediation Notes

This observation should be remediated after or together with the observations about the missing data table (1.3.1 Info and Relationships). The current observation would then be remediated for each table cell that includes list content. The easiest approach would be to use unordered list for every list content. For example cells "Kapazität" and "Farben" this could look like this:

...

<td>
  <ul>
    <li>128 GB</li>
    <li>256 GB</li>
    <li>512 GB</li>
  </ul>
</td>

...

<td>
  <ul>
    <li><span class="color-circle"></span><span>Weiß</span></li>
    <li><span class="color-circle"></span><span>Blau</span></li>
    <li><span class="color-circle"></span><span>Violett</span></li>
    <li><span class="color-circle"></span><span>Gold</span></li>
  </ul>
</td>

...

The color name should also be visible, as the color is not only important to users of assistive technology but also e.g. to users with color weakness or color blindness who not necessarily use assistive technology.

Ensure to carefully check all table content for list content. This includes, display information, etc. As a special case, in "Abmessungen", and potentially other cells, a <dl></dl> could also be used. Evaluate use of the best list type per cell.

Priority: Critical Medium Page: iPhone Vergleich Observation Permalink
Accompanying Files
Observation Details

The comparison table with tabular content is not using the semantic HTML table element and as such cannot be accessed in a useful way via keyboard navigation and assistive technology. Each "section" inside the tabular data can only be navigated one column at a time. Navigation from row to row and column to column is important to understand complex tabular content.

Given. the example in the attached screenshot, there are three devices in comparison. Navigating this data by assistive technology, going to section "Kapazität", the content is simply announced as "128 GB, 256 GB, 512 GB, 128 GB, 256 GB, 512 GB, 128 GB, 256 GB, 512 GB". No hint on the compared devices' names is given.

Matching of cell data to the visually presented column heading (device name) is not possible without visual confirmation.

Remediation Notes

Ensure, all tabular data is using proper semantic HTML table elements.

The given data could be implemented in various ways. The most accessible would be the cumulation in a single data table as all data is connected to one device. For technical requirements please refer to BFIT-Bund Handreichung "Accessible design of user interface elements – Table". An example structure could look like this:

<table>
  <caption>DEVICE TYPE Vergleich</caption>

  <thead>
    <tr>
      <th><!-- DATA TYPE --></th>
      <th scope="col">Device Name 1</th>
      <th scope="col">Device Name 2</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th scope="row">Kapazitäten</th>
      <td>
        <ul>
          <li>128 GB</li>
          <li>256 GB</li>
          <li>512 GB</li>
        </ul>
      </td>
      <td>
        <ul>
          <li>128 GB</li>
          <li>256 GB</li>
        </ul>
      </td>
    </tr>

    <tr>
      <th scope="row">Farben</th>
      <td>
        <ul>
          ...
        </ul>
      </td>
      <td>
        <ul>
          ...
        </ul>
      </td>
    </tr>

    ...

  </tbody>
</table>
Priority: Critical Low Page: iPhone Vergleich Observation Permalink
Observation Details

  • FAQ "Häufig gestellte Fragen zum Thema „iPhone vergleichen“" uses definition list instead of interactive elements

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)

Remediation Notes

Ensure, using native, semantic HTML elements for interactive elements and not re-building existing functionality with generic elements like <div> and <span>.

Ensure, choosing the proper elements, depending on purpose (e.g. links, using <a href=""> to link to resources, and <button> to perform actions).

This way, the need for added JavaScript (e.g. on click events / event handlers) and ARIA methodologies is reduced to a minimum, which will ensure clean and simple code and backwards compatibility, will future-proof functionality, and will avoid issues with keyboard navigation or other assistive technology (see also 4.1.2 Name, Role, Value).

Priority: Serious Low Page: iPhone Vergleich Observation Permalink
Observation Details

Selecting a device, already selected in another selection input will swap those devices.

  1. Select device A in selection 1

  2. Select device B in selection 2

  3. Select device B in selection 1

  4. Selection 2 will be changed to device A

This change of context happens without announcement. Neither in advance nor after the selection. The unexpected change might confuse users. Especially when compared devices are similar, the change might not even be noticed at all.

Remediation Notes

Ensure, no unexpected change of context occurs. This could be done by disabling already selected devices in or remove them from other selection inputs.

Priority: Moderate Low Page: iPhone Vergleich 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.

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

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: iPhone Vergleich Observation Permalink
Observation Details

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 vergleichen: Alle Modelle im Überblick
  h2 Finden Sie das iPhone, das zu Ihnen passt
  h2 iPhones im Überblick
    h3 DEVICE NAME
      h4 Kapazität
      h4 Farben
      <!-- OTHER CATEGORIES -->
    h3 <!-- OTHER DEVICES -->
  h2 iPhones vergleichen: Älteres Modell oder High End-Smartphone?
    h3 Die iPhone 13-Serie – einfach großartig
    h3 Das iPhone 14: leistungsstark und kompakt
    h3 Die iPhone 15 - Serie: innovative Technik und elegantes Design
    h3 Das iPhone 16: Die nächste Generation von Innovation und Stil
    h3 Die iPad Pro-Modelle – wahre Allrounder für Intensiv-Nutzer und Kreativ-Schaffende
  h2 Häufig gestellte Fragen zum Thema „iPad vergleichen“
    h3 <!-- FAQ ITEMS -->

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

h1 iPhone vergleichen: Alle Modelle im Überblick
  h2 Finden Sie das iPhone, das zu Ihnen passt
  h2 iPhones im Überblick
  h2 iPhones vergleichen: Älteres Modell oder High End-Smartphone?
  h2 Die iPhone 13-Serie – einfach großartig
  h2 Das iPhone 14: leistungsstark und kompakt
  h2 Die iPhone 15 - Serie: innovative Technik und elegantes Design
  h2 Das iPhone 16: Die nächste Generation von Innovation und Stil
  h2 Die iPad Pro-Modelle – wahre Allrounder für Intensiv-Nutzer und Kreativ-Schaffende
  h2 Häufig gestellte Fragen zum Thema „iPad vergleichen“
    h3 Wo liegen die Vorteile der Performance von Apple iPads im Vergleich zu Modellen anderer Hersteller?
    h3 Was ist Wi-Fi und Cellular beim iPad?
    h3 Vergleich verschiedener Generationen: Wann kam welches iPad, iPad Mini, iPad Air und iPad Pro-Modell auf den Markt?
    h3 Wie kann ich den Apple Pencil am iPad aufladen?
    h3 Wie lange gibt es Updates für die iPads?

Observations:

  • As heading presented text content in device comparison table is not marked up as headings; this becomes a non-issue, when the table is using semantic HTML table elements but is a failure of 1.3.1 Info and Relationships while they are visually represented as headings

  • Heading level 2 "iPhones vergleichen: Älteres Modell oder High End-Smartphone?" is followed by headings, visually distinguishable but using the same hierarchy level

Remediation Notes

Ensure, visually presented heading structure matches programmatically determinable heading structure by only using HTML heading elements for heading content and using HTML heading elements for all heading content.

Side note: This criterion does not specifically look at proper heading content (i.e. wordings, usefulness of headings). See 2.4.6 Headings and Labels for this.

Priority: Serious Low Page: iPhone Vergleich Observation Permalink
Observation Details

Footnotes below FAQ are programmatically part of the last heading of the FAQ. So all footnotes are grouped as

  1. iPhone vergleichen: Alle Modelle im Überblick

    1. Häufig gestellte Fragen zum Thema "iPhone vergleichen"

      1. Welche iPhone-Modelle sind am beliebtesten?

        1. FOOTNOTES

Remediation Notes

Ensure, all content is accurately grouped by structuring headings. While an easy remediation step could be to add a footnotes heading level 2 it should be evaluated, whether more user-friendly approaches to footnotes are applicable. While this is not part of the current success criterion, footnote numbers in the content without linking to the actual footnote content does make it harder to access said content.

Priority: Serious Low Page: iPhone Vergleich Observation Permalink
Observation Details

Device selection input elements do not use visible input labels, as they use a visually-hidden CSS class. Input elements must have visible labels present at all times.

Remediation Notes

Ensure all input elements use visible labels.

Priority: Moderate Low Page: iPhone Vergleich Observation Permalink
Observation Details

Device selection input elements use the same label and as such cannot be easily operated by assistive technology.

Remediation Notes

Ensure, interactive elements have unique accessible names, as these are used to operate by assistive technology.

Priority: Critical Low Page: iPhone Vergleich Observation Permalink
Observation Details

FAQ section cannot be operated (expand / collapse) by assistive technology as the interactive elements are custom built and do not use correct semantic HTML. The FAQ accordion uses an HTML description list <dl>. Example code:

<dt class="accordion__term" data-accordion="term" tabindex="0">
  <h3 class="accordion__title">...</h3>
</dt>
<dd
  class="accordion__description accordion__description--hidden"
  data-open-class="accordion__description--open"
  data-hidden-class="accordion__description--hidden"
  data-accordion="description"
>
  <div class="accordion__content">
    <p class="paragraph">...</p>
  </div>
</dd>

Observations about the example code:

  • Description lists consist of terms and descriptions. An FAQ question item can not be considered a term.

  • Setting tabindex="0" to allow keyboard focus of non-interactive element is bad practice and should be avoided

  • data-* attributes in description try to build accordion functionality

  • <div class="accordion__content"> is an unnecessary hierarchy level

  • A CSS paragraph class <p class="paragraph"> should not ever be needed

Remediation Notes

Ensure, using correct semantic HTML elements for all interactive elements. In case of accordions, these could be <detail> and <summary> constructs or ones with <button> as the accordion item "header".

For custom building an accessible accordion component, please refer to BFIT-Bund Handreichung "Accessible design of user interface elements – Accordion".