31 issues found on Mobilfunk Netzausbau

While further page content is 5G specific, the interactive map includes Mobilfunk, Festnetz, and Hotspots. Adding more content is not a failure of the success criterion, so the criterion still is marked as passed. There could be however a more fitting title for the page.

Opening a footnote dialog window can obscure underlying focused elements (partially AND completely).

Since the dialog window cannot be closed via ESC in that situation, the underlying element cannot be made visible without removing the keyboard focus from it.

Operating the interactive map, the default on page load is an activated accordion item "Mobilfunknetz" in which are three checkboxes (2G, 4G, 5G). It looks like it functions as a "Multiple Selection List". For reference, see BFIT-Bund Handreichung "Accessible design of user interface elements – Multiple Selection List".

When selecting and activating another accordion item, the map's context changes to that item's content, meaning when "Festnetz" item is activated, the Mobilfunknetz content is removed from the map. As the "dropdown" / accordion item itself should not have functionality to change content, but the interactive elements in it should, activating the "dropdown" evokes an unexpected context change. On a page about 5G Mobilfunknetz / Netzausbau, moving to a "Festnetz" map is considered unexpected behaviour.

The interactive map is not accessible on small viewport of 320px viewport width. The contents do not reflow responsively, so certain functionality cannot be reached.

The interactive map is not accessible on when page zoom is set to 200 %. The contents do not reflow responsively, so certain functionality cannot be reached.

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

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.

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

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

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

Autocompletion in address input is turned off and overwritten by aria-autocomplete="both". Input purpose cannot be identified programmatically this way. Input marked up as follows:

<input
  data-coin-che6yj=""
  data-v-36713002=""
  class=""
  placeholder="Adresse oder Koordinate"
  maxlength="200"
  title="Suche nach Adressen und Koordinaten"
  aria-expanded="false"
  aria-labelledby="autocomplete-list"
  aria-autocomplete="both"
  aria-controls="autocomplete-list"
  autocomplete="off"
  role="combobox"
  data-qa="input-autocomplete_value"
/>

The aria-autocomplete attribute is not a valid replacement to the HTML autocomplete attribute, as accessibility support is basically non-existent for most operating system and screen reader combinations. See Accessibility Support – aria-autocomplete attribute for further information about accessibility support.

Links are only differentiated from normal body text (black, #383838) by use of color (blue, #00739f). In addition, the contrast ratio of link text color and body text color also is insufficient (2.2:1 < 3:1).

Links can be found, e.g. as

• "Handyverträgen" in section "Wissenswertes rund um den Netzausbau"

• "5G-Netz" in section "Bleiben Sie auf dem neuesten Stand"

• various links in FAQ section "Welches Smartphone ist 5G-fähig?"

• Additionally, not quite fitting this success criterion but an accessibility issue anyway is the link "Deutschen Funkturm" in section "Helfen Sie dabei unser 5G-Netz noch größer zu machen!". This link does not even use any color difference (contrast ratio 1:1). The link is not visually identifiable at all. (see attached screenshot)

Focusing an FAQ item via keyboard changes its background color. The color difference alone is not enough to visually indicate a focus state. The color difference must meet a 3:1 contrast ratio. Currently it is barely visible at 1.2:1

Main heading "Telekom Mobilfunk-Netzausbau" is set on background image. Text content set on background, no matter if color, gradient, or image, must meet minimum contrast ratio at all times. Ideally this is checked by taking the text color (rgb(255, 255, 255)) and measuring against similar color in the image (rgb(230, 223, 229)). This results in a contrast ratio of 1.3:1, far below the minimum of 3:1 for large text (and 4.5:1 for normal text).

Options in map layers rely on color alone to be identified. Doing so, while not meeting contrast ratio minimum (3:1) is an accessibility issue.

Options in map layers rely on color alone to be identified. Doing so, while not meeting contrast ratio minimum (3:1) is an accessibility issue.

When opening a footnote dialog window, the keyboard focus is not set to said dialog window. This leads to multiple issues:

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

• The dialog window can not be closed with the 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.

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

When opening the "Info" dialog window in the interactive map, the keyboard focus is not trapped in said dialog window. This leads to these observations:

• The non-interactive contents of the dialog window are not accessible via keyboard (scrolling should be available with ARROW keys).

• Keyboard navigation out of the dialog window is possible. This can be the desired way and on its own is no failure of this criterion, as moving out of the dialog window while open, will move the focus out of the map completely, thus not interfering with other content.

The purpose for "Mehr erfahren" link in section "Helfen Sie dabei unser 5G-Netz noch größer zu machen!" is not easily programmatically determinable. The link on its own uses accessible name "Mehr erfahren", it has no directly surrounding text (paragraph), and the parent heading does not identify the link's purpose correctly.

Purpose can be determined by reading the full section from heading to link. This however cannot be declared "context".

HTML markup for links in "Tarife" carousel (showing one as an example):

<a
  href="/unterwegs/handyvertrag"
  id=""
  title=""
  class="..."
  target="_self"
  data-tealium-rel="..."
  onclick=""
>
  <div class="...">
    <div class="...">
      <div class="...">
        <img
          src="/resources/images/594932/telekom-smartphone-tarife.jpg"
          alt="Icon Smartphone"
          title=""
          class="..."
          height="255"
          width="451"
          loading="lazy"
          style="height: 100.517%;"
          id="e_594932"
          usemap=""
        />
      </div>
    </div>
    <h3 class="...">Handyverträge</h3>
    <p class="...">Telefonieren und surfen mit Ihrem Smartphone.</p>
  </div>
</a>

The HTML link element <a> takes its accessible name from its contents. In this case, the contents are:

• Image (alt="Icon Smartphone")

• Heading "Handyverträge"

• Paragraph "Telefonieren und surfen mit Ihrem Smartphone."

Making the accessible name of the link "Icon Smartphone Handyverträge Telefonieren und surfen mit Ihrem Smartphone."

Heading structure found in code, observations marked with "!" at beginning of line:

   h1 Telekom Mobilfunk-Netzausbau
      h2 Wissenswertes rund um den Netzausbau
!     h2 Helfen Sie dabei unser 5G-Netz noch größer zu machen!
         h3 Handyverträge
         h3 Datentarife
         h3 Festnetz Tarife
         h3 Hotspot
      h2 Warum Mobilfunk von der Telekom? Ganz einfach!
!        h3 Größes und bestes 5G-Netz*
         h3 Ausgezeichneter Service
         h3 Nachhaltig betriebenes Netz
!     h2 Bleiben Sie auf dem neuesten Stand
      h2 Häufig gestellte Fragen zur 5G Netzabdeckung
         h3 Wer baut das 5G-Netz in Deutschland aus?
         h3 Wie geht es mit der 5G Netzabdeckung voran?
         h3 Welches Smartphone ist 5G-fähig?
         h3 Wie wird das 5G-Netz ausgebaut?

• Heading level 2 "Helfen Sie dabei unser 5G-Netz noch größer zu machen!" does not accurately describe topic/purpose of the grouped children heading levels

• Heading level 3 "Größes und bestes 5G-Netz*" has typo

• Heading level 2 "Bleiben Sie auf dem neuesten Stand" does not accurately describe topic/purpose of the section's content

Heading structure / outline is the most used mechanism to navigate a website for users of assistive technology.

• Map on mobile uses two-finger zooming, not displaying the zoom buttons from desktop view and not allowing zooming by single pointer, e.g. double tap, tap and hold, etc.

• Map on mobile uses "swiping" for scrolling the map. No single pointer mechanism is available, e.g. arrow buttons

Map on mobile uses "swiping" for scrolling the map. No single pointer mechanism is available, e.g. arrow buttons

Error message is displayed but

• input field is not reflecting error state

• error message is not programmatically connected to input

The map's address input

• has no visible label

• uses a placeholder as "label", which disappears when entering text

Additionally, while not a failure of this success criterion, the required input format is only displayed as an error message to the user after unsuccessful input.

• The page uses HTML list elements for non-list content. See class="container-grid--list". E.g. stage section with main heading.

• On the other hand, what is arguably list content in the "Tarife" carousel (Handyverträge, Datentarife, ...), is not using semantic list elements.

• Also, while the section "Warum Mobilfunk von der Telekom? Ganz einfach!" again uses a list element for non-list content, the actual lists inside the section (checkmark lists) are built with HTML paragraphs.

FAQ "Häufig gestellte Fragen zur 5G Netzabdeckung" uses <ul role="tablist">.

Observations:

• The whole list is one focusable element; TAB can navigate to it, but the next TAB will already leave the FAQ and navigate to the next focusable element; expected behavior is to use TAB to navigate to each individual FAQ item

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.

• Main heading "Telekom Mobilfunk-Netzausbau" uses <h1><strong></strong></h1>

• Heading "Warum Mobilfunk von der Telekom? Ganz einfach!" uses <h2><strong></strong></h2>

As the whole visible text content is wrapped in emphasis, the emphasis itself becomes useless. For the heading level 2, additionally the actual emphasis

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

• There are numerous instances of these failures. See attached screenshots for line breaks, non-breaking spaces, empty semantic elements, etc.

Footnote trigger (star icon) does not meet minimum target size.

Interactive elements must have a target size of at least 24×24px. Minimum target size is required also for single icon buttons, stand-alone interactive icons and links. When target size is smaller, it will make it difficult for people to reliably interact with the elements. This includes people with motor disabilities, people using devices like styluses, people in moving vehicles, and mobile users altogether. Especially considering its use inside other interactive elements (e.g. footnote in badge) or multiple small interactive elements next to each other (e.g. social icons in a list).