27 issues found on Vertragsverlängerung

The accessible name of product tiles is set within a <span> inside the <a> tag.

<a ...><span ...>Galaxy S25 Ultra</span></a>

The accessible name does not include the manufacturer's name but only the product's model name. While for a Samsung Galaxy S25 Ultra in the context of the Telekom website, the model name might be enough to identify the link's purpose, it will fall apart on devices like the Xiaomi 15 Ultra.

Generally, the assumption of a user's knowledge should not be made, making it hard even for devices like (Samsung) Galaxy S25 Ultra or (Google) Pixel 9a.

Dialog windows "So verlängern Sie Ihren Vertrag" and "So wechseln Sie Ihren Tarif" can be opened and closed via keyboard navigation. Closing the dialog window does not set the focus to the right element.

Closing a dialog window must reset the focus to the previously focused element that was used to open the dialog window.

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.

Content, including interactive elements, in hidden accordion areas are reachable via keyboard navigation.

Using TAB / SHIFT + TAB, links in collapsed accordion items can be reached. See the attached screenshot for a focus order visualization.

Links are only differentiated from normal body text (black, rgb(38, 38, 38)) by use of color (blue, rgb(0, 115, 159)).

In addition, the contrast ratio of link text color and body text color also is insufficient (2.8:1 < 3:1).

The contrast ratio of white text on (light) Magenta background barely hits 4.5:1 target. As the white is absolute white, the upper limit is fixed. If it can be ensured, that the background Magenta is the lightest the Magenta can be, there is no issue. If a lighter Magenta could be possibly be used, a failure might arise.

The "Frag Magenta" chat bubble, when popping up on its own, flows out of viewport at 320px viewport width. Horizontal scrolling is not possible, making parts of the popup unreachable.

Some text, when text spacing is changed, spills out of its parent containers, making some text hard, other text impossible to read. This includes:

• Stage

• Badges

• Footnotes

• Teaser

The page title is "Vertragsverlängerung für Mobilfunkkunden | Telekom". While no failure of the success criterion, improvements are possible:

• Page part "Vertragsverlängerung für Mobilfunkkunden" does not directly match the main page heading; if e.g. there is another "Vertragsverlängerung für ..." for something else, this should also be reflected in the main page heading

• The vertical bar "|" sometimes is announced by assistive technology as "vertical bar"; using other symbols, usually not announced, could improve the page title even more

Keyboard focus of Magenta button changes background color. Difference between default and focused state does not meet minimum contrast ratio (3:1). Instead, the difference is barely visible at 1.1:1.

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.

The product tiles are complicated card components with a lot of content. The surrounding link, using <a>, uses the product's model name as its accessible name. (e.g. "Galaxy A56" or "15 Ultra")

Assistive technology like voice control software uses the accessible name to control interactive elements. By stating the accessible name, I can activate the element. To activate the product tile link I must state the product's model name (e.g. "Galaxy A56" or "15 Ultra"). As there is no indication of this part of the tile's content being "the clickable link", a user of voice control software will not be able to navigate the product tiles.

The page uses lang="de-DE" on the <html> element. The specification of the country "DE" might not be necessary. While most assistive technology can fallback to the primary language tag "de" if a different secondary language tag is used on the user's system, removing the secondary tag might be an even more robust implementation.

Accordions (e.g. FAQ) are built with <div> and ARIA attributes. While the implementation meets the current success criterion, it introduces problems (or possible problems) in other success criteria. E.g. hidden links being focusable by keyboard, while being successfully hidden from screen readers. These discrepancies and problems can be avoided, using semantic HTML.

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

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

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.

Focussing a product tile by keyboard navigation does not visually indicate the tile being focused. This makes it incredibly difficult to navigate the page with a keyboard.

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:

• MagentaEins Vorteil

• Apple und Telekom im besten Netz

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

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

1 Vertrag verlängern
  2 Vertrag verlängern
  2 Tarif wechseln
  2 Top-Smartphones zum Spitzenpreis
    3 Samsung Galaxy S25 Ultra
    3 ...
  2 MagentaEINS-Vorteil
  2 Apple und Telekom im besten Netz
  2 Unser Dankeschön für Sie:
  2 Sie möchten eine persönliche Beratung?
    3 Telekom Shops in Ihrer Nähe
    3 Magenta Service Live
  2 Häufig gestellte Fragen rund um die Telekom Vertragsverlängerung
    3 Sie möchten Ihren Mobilfunktarif wechseln?
    3 ...

The programmatically determinable heading structure, using HTML heading elements is limited to the FAQ section.

Observations for heading structure:

• The main heading "Vertrag verlängern" is not using an <h1> element.

• The <h1> element instead is used on the FAQ section at the end of the page.

• Headings do not use semantic HTML elements (<h1>, <h2>, <h3>, ...). They are using more generic (<span>) or even wrong (<p>) HTML elements and add CSS classes to style them so they look like headings.

• "Vertrag verlängern" heading is duplicated

• "Vertrag verlängern" & "Tarif wechseln" are presented as a group of headings but do not have a parent heading to group them

• "MagentaEINS-Vorteil" & "Apple und Telekom im besten Netz" are presented as a group of headings but do not have a parent heading to group them

• The sections "Top-Smartphones zum Spitzenpreis", "MagentaEINS-Vorteil" & "Apple und Telekom im besten Netz", "Unser Dankeschön für Sie:" do not show their relevance to the page's topic and do not fit the general outline of the page as they function as a group but are not grouped

• ("Unser Dankeschön für Sie:" uses a colon ":"; best practice is to not use punctuation (except "!" and "?") in headings. If the use of punctuation is necessary, there probably is an issue with either styling or outline structure)

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:

• Smartphone images use device name as text alternative, not describing the actual contents, nor the purpose of the image

• Text alternative duplicates existing text content

The display of a product's color options is not using high enough contrast.

As the information conveyed is necessary to understand the content, the color contrast ratio must be at least 3:1. Some color options barely reach color contrast ratio of 1.1:1.

Please note: This observation describes one example product with example color option(s). This observation spans multiple products.

Footnote dialog window is not keyboard accessible.

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.

The items in the step by step "Vertrag verlängern – so funktioniert's" (and "Tarif wechseln – so funktioniert's") dialog window are announced by assistive technology in the order shown in the attached screenshot. The number icon items are announced separately after the other items.

The buttons to open "Vertrag verlängern" and "Tarif wechseln" guide dialog windows use <a href="#"> instead of HTML button elements. The announcement of "link" in assistive technology will imply, moving to a different resource, may it be a different page or document. All performed actions, like opening and closing dialog windows, must use HTML button elements.

Pagination buttons below product carousel use non-semantic elements instead of semantic HTML button elements. Role / functionality of buttons is not correctly conveyed to assistive technology.

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.

Interactive element –pagination button below product carousel– does not have high enough color contrast ratio to its background.