20 issues found on Apple Watch Familienkonfiguration

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

See used icons in screenshots.

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

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:

• "MagentaEins" in "Unser Tipp für Mobilfunkkunden"

• "Zusatzkarte" in

  • "Weitere Angebote für Ihre Apple Watch"

  • FAQ item "Was sind die Vorteile der Apple Watch für Kinder?"

• "Smart Connect" in FAQ item "Welcher Telekom Tarif eignet sich für die Apple Watch für Kinder?"

Hovering interactive element adds visual indicator that does solely rely on color to be differentiated from default state and color contrast ratio of default and hover states does not meet minimum required 3:1 color contrast ratio.

• "Zum Angebot" link in "Die Apple Watch ist für alle da. Auch wenn Sie noch kein iPhone haben."

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:

• Link "Zusatzkarte" in FAQ item "Was sind die Vorteile der Apple Watch für Kinder?"

• Link "Smart Connect" in FAQ item "Welcher Telekom Tarif eignet sich für die Apple Watch für Kinder?"

Setting the viewport width to 320px allows for horizontal scrolling. As no actual content is overflowing the viewport, this is not considered a failure of 1.4.10 Reflow. It should however still be investigated and fixed.

Text content and images 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

• Buttons

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

• Teasers

• Card components

This is not considered a failure, just a side note:

Page title "Apple Watch für Kinder| Telekom" is missing a space before pipe character. Ideally, to be consistent, the second part of the page title is automatically generated, reducing proneness to errors.

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.

• Context of "Jetzt als Zweitkarte buchen"

  • preceding heading, level 2: "Unser Tipp für Mobilfunkkunden"

  • preceding heading, level 1: "Apple Watch für Kinder"

Context implies "Jetzt Apple Watch für Kinder als Zweitkarte buchen"

The purpose of a link must not solely rely on visually perceived aspects like layout, proximity, placement. The purpose of a link should be understandable from the link text itself or its programmatic context, ensuring it's accessible to assistive technologies and a wider range of users.

Relying solely on visual cues to convey a link's purpose makes it inaccessible to:

• Users of assistive technology like screen readers.

• Users with cognitive disabilities who might not interpret visual layouts correctly.

• Users with customized displays (e.g. unexpected viewport sizes, or turned off styles).

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

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)

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 Die Apple Watch ist für alle da. Auch wenn Sie noch kein iPhone haben.
  h2 Vorteile für Ihre Kids
  h2 Vorteile für die Erwachsenen
  h2 Ihre Vorteile mit Smart Connect M
  h2 Jetzt Apple Watch SE mit Smart Connect M bestellen
  h2 Unser Tipp für Mobilfunkkunden
  h2 Weitere Angebote für Ihre Apple Watch
  h2 Häufig gestellte Fragen zur Apple Watch für Kinder
    h3 Was sind die Vorteile der Apple Watch für Kinder?
    h3 Gibt es einen Unterschied zwischen ...
    h3 Welcher Telekom Tarif eignet sich für die Apple Watch für Kinder?

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

h1 Apple Watch für Kinder
  h2 Immer in Verbindung mit der Apple Watch und Smart Connect M
    h3 Vorteile für Ihre Kids
  h2 Sorgenfreier dank der Apple Watch für Kinder
    h3 Vorteile für die Erwachsenen
  h2 Passend für Apple Watch Nutzer
    h3 Ihre Vorteile mit Smart Connect M
  h2 Jetzt Apple Watch SE mit Smart Connect M bestellen
  h2 Unser Tipp für Mobilfunkkunden
  h2 Die Apple Watch für Kinder – auch für alle
    h3 Weitere Angebote für Ihre Apple Watch
  h2 Häufig gestellte Fragen zur Apple Watch für Kinder

Observations for heading structure:

• Visual main heading not <h1>; not even any heading at all

• Heading eyebrows use separate heading elements

• FAQ items do not use headings

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

<dl> element used for non-list content in FAQ accordion.

These mis-matches happen with improper use of semantic HTML or lack thereof. Content, visually presented in a certain way, communicating certain purpose or functionality, uses mis-matched HTML elements.

This occurs in two "directions". Visually presented as X, using element Y, and using element X, while content is non-X content. The former includes:

• Links, using HTML elements other than <a href="">

• Buttons, using HTML elements other than <button>

• Input elements, not using appropriate semantic HTML elements for e.g. selects or text inputs with type attributes

• Headings, using HTML elements other than <h1> - <h6>

• Lists, not using <ul>, <ol>, <dl>

• ...

The latter includes, using semantic HTML elements for content that does not fit the semantically conveyed role of that element, includes:

• Lists for non-list content

• Headings for non-heading content

• ...

Improper use of semantic HTML leads to numerous issues for many users, also affecting other success criteria at the same time, including those, ensuring keyboard navigation and accessible use of assistive technology.

The heading structure should work as an outline of the complete page content, with the main heading describing the page as a whole, and subsequent headings describe the content until another heading of same heading level is reached. This means, a heading level 2 must describe purpose of all content, including sub-heading levels and their content, until the next heading level 2 is reached.

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

h1 Apple Watch für Kinder
  h2 Immer in Verbindung mit der Apple Watch und Smart Connect M
    h3 Vorteile für Ihre Kids
  h2 Sorgenfreier dank der Apple Watch für Kinder
    h3 Vorteile für die Erwachsenen
  h2 Passend für Apple Watch Nutzer
    h3 Ihre Vorteile mit Smart Connect M
  h2 Jetzt Apple Watch SE mit Smart Connect M bestellen
  h2 Unser Tipp für Mobilfunkkunden
  h2 Die Apple Watch für Kinder – auch für alle
    h3 Weitere Angebote für Ihre Apple Watch
  h2 Häufig gestellte Fragen zur Apple Watch für Kinder

To determine the accuracy of a heading's wording, a heading can be looked at in hierarchy up to the main heading. E.g. the first heading level 3, put in hierarchy context, is as follows:

h1 Apple Watch für Kinder

h2 Immer in Verbindung mit der Apple Watch und Smart Connect M

h3 Vorteile für Ihre Kids

p Eine neue Apple Watch oder ggf. auch das Vorgängermodell von Mama oder Papa kann jetzt ganz einfach und unkompliziert von Kindern genutzt werden. Die Eltern nach der Schule anrufen, die Großeltern über die gute Note per Nachricht informieren oder endlich ein eigenes Memoji an Freunde versenden – das alles und noch vieles mehr – ist mit der Apple Watch für Kinder jetzt möglich. Außerdem kann man mit den überarbeiteten Aktivitätsringen mit der Watch Bewegungsminuten spielend tracken, damit Bewegung noch mehr Spaß macht.

Observations, shown at the example heading above:

• Heading hierarchy implies purpose "Vorteile für Kids, die mit der Apple Watch und Smart Connect M immer in Verbindung sind"

  • While not specifically for children, the content shows "Vorteile", so the <h3> is more or less accurately describing content purpose

  • The <h2> however does not add to this purpose at all

  • Also, usually, a heading element, followed by another heading element directly, without any content between, is a good indication of unnecessary heading hierarchy

To demonstrate this, it often is useful to look at the page outline one hierarchy level at a time, evaluating if headings level 2 accurately split the page into useful sections.

h1 Apple Watch für Kinder
  h2 Immer in Verbindung mit der Apple Watch und Smart Connect M
  h2 Sorgenfreier dank der Apple Watch für Kinder
  h2 Passend für Apple Watch Nutzer
  h2 Jetzt Apple Watch SE mit Smart Connect M bestellen
  h2 Unser Tipp für Mobilfunkkunden
  h2 Die Apple Watch für Kinder – auch für alle
  h2 Häufig gestellte Fragen zur Apple Watch für Kinder

Observations for heading structure in general:

• "Immer in Verbindung mit der Apple Watch und Smart Connect M"

  • Expected content: Apple Watch tariff Smart Connect M

  • Actual content: Generic text content about Apple Watch "Vorteile"

  • → not accurate

• "Sorgenfreier dank der Apple Watch für Kinder"

  • Expected content: Security features, privacy features, parenting features, ...

  • Actual content: "in Verbindung bleiben", app and contact management as administrator, location access

  • → accurate

• "Passend für Apple Watch Nutzer"

  • Expected content: ?

  • Actual content: "Vorteile" of Smart Connect M tariff

  • → factually accurate, but wording does not hint on any specific content at all

• "Jetzt Apple Watch SE mit Smart Connect M bestellen"

  • Expected content: Watch + tariff offer details and possibility to buy

  • → accurate

• "Unser Tipp für Mobilfunkkunden"

  • Expected content: Current customer offer for Apple Watch

  • Actual content: Offer for tariff as "Zweitkarte"

  • → arguably not accurate

• "Die Apple Watch für Kinder – auch für alle"

  • Expected content: ?

  • Actual content: Apple Watch features also useful for the elderly; MultiSIM offer

  • → not accurate; wording does not hint on actual content

• "Häufig gestellte Fragen zur Apple Watch für Kinder"

  • Expected content: FAQ about Apple Watch für Kinder

  • Actual content: "Vorteile der Apple Watch für Kinder", Difference between "Apple Watch Familienkonfiguration" and "Apple Watch für Kinder", Tariff for Apple Watch für Kinder

  • Observations:

    • "Vorteile" duplicates page content

    • "Unterschied Familienkonfiguration": Wording "Familienkonfiguration" was not used before (except in URL path); If "Familienkonfiguration" and "Apple Watch für Kinder" is not the same, the URL path, the page title, and the page's main heading do not match

    • "Tarif" duplicates page content

  • → factually accurate, but not adding any information that is not already present on page

These observations can be done for each subsequent heading level as well.

"Zum Angebot" link does not use <a href=""> but omits href attribute. Clicking the link scrolls the page to the desired location but does not set focus correctly. Using assistive technology, clicking the link will keep the focus on the triggering element.

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.

Footnote button in section "Jetzt Apple Watch SE mit Smart Connect M bestellen" is marked up as follows:

<span 
  data-url="/unterwegs/ajax?ssb_block=dynamic-mapping&amp;toGet=footnotes-popup&amp;productId=tariff:16309" 
  class="..." 
  data-tealium-rel="content" 
  id="legal-notes-18794751934">
  ::before
</span>

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.

Link "Apple Watch mit MultiSIM" links to PDF document FLY_01_O23091_WBM_Apple_Liporello_RZ.indd. This is not indicated at the link or in the link's context (surrounding content).

While not a strict failure of success criterion 2.4.4 Link Purpose, it is considered best practice to indicate such unexpected behavior. Using visual and text content in expected ways, ensures good user experiences, not only for users of assistive technology but for all users. In this realm, the differences of links <a href="..."> and buttons <button> usually are indicated visually. Clicking a link, a user expects moving to a new resource. Clicking a button, a user expects to (usually) stay on the resource and performing an action, like opening a dialog window, adding a product to a cart, expanding/collapsing accordion items, etc.

Clicking a visual button "Apple Watch mit MultiSIM" that is used as a link already is unexpected behavior given "button vs. link". Linking to a PDF document then is further unexpected behavior that ideally should be indicated prior to the user's action.