25 issues found on Aktionen

Page was edited after initial audit. Some issue observations may refer to non-existing content. As the observed issues and the noted details still are relevant to future edits, they will remain in the issue list.

Text elements use px values for font-size, making it impossible to resize text to 200%.

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

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.

Opening a footnote dialog window can obscure underlying focused elements (partially AND completely). Since the footnote dialog window cannot be closed via ESC in that situation, the underlying element cannot be made visible without removing the keyboard focus from it.

Text "UNLIMITED" and "Galaxy S25 Ultra Galaxy AI" are built-in to image instead of being text content.

E.g. "Jetzt entdecken" Link in the "UNLIMITED" tile or "Mehr erfahren" links at the page bottom.

Landmarks often are used to navigate the rough page structure. Using multiple (or nested) main landmarks can cause problems in finding the actual main content.

Section "Smartphone Highlights" uses aria-labelledby with a non-existing element ID smarphone-highlights-heading.

<section 
  id="smartphone-highlights" 
  class="SmartphoneHighlightsSmartphoneHighlights_3U6z0" 
  aria-labelledby="smarphone-highlights-heading"
>

Visually, we find a heading structure in the upper page area as follows:

1 UNLIMITED
  2 Die neuen Samsung Galaxy Highlights

In code, we find the following heading structure:

1 Aktuelle Angebote & Aktionen
  2 Die neuen Samsung Galaxy Highlights

Content that is visually displayed as the main heading is no heading at all, and the main heading is significantly less visually prominent than the heading level 2.

Heading structure is as follows:

1 Aktuelle Angebote & Aktionen
  2 Die neuen Samsung Galaxy Highlights
  2 YoungAngebot
    3 MeinMagenta App
    3 Magenta Moments
    3 Handy­versicherung
  2 Entdecken Sie unsere Telekom-Aktionen

Nesting <h3> headings under "YoungAngebot" heading does not appropriately introduce the following contents.

The shown image has "UNLIMITED" as its accessible name and text alternative. The following significant parts of the image are missing in the text alternative:

• Infinity symbol, symbol for "unlimited"

• Smartphones / devices

• "Galaxy S25 Ultra - Galaxy AI" wording

As the image is meant to be a Samsung Galaxy S25 Ultra offer teaser, the given text alternative "UNLIMITED" does not serve an equivalent purpose.

Assistive technology will announce "UNLIMITED" without any further context, possibly rendering the contents of the image completely inaccessible to blind or otherwise visually impaired screen reader users.

Visual hierarchy of stage area presented as

1. 30 Jahre

2. Wir feiern mit tollen Angeboten und Aktionen

3. Nur im Juni

Visual order is presented in code markup as

1. Nur im Juni

2. 30 Jahre Telekom

3. Wir feiern mit tollen Angeboten und Aktionen

Visual hierarchy is more important for understanding than order in code markup. The order is used e.g. for announcements by assistive technology

Anchor links in "Seiten-Sektionen Navigation" navigation use <button> instead of semantic link element.

The navigation code markup is structured as follows:

<nav aria-label="Seiten-Sektionen Navigation">
  <section aria-roledescription="carousel">
    <div>
      <div>
        <div>
          <div role="group" aria-roledescription=slide" aria-label="Slide X von 4"> <!-- nav item -->
            <div>
              <button 
                type="button" 
                title="Springe zur Sektion ..." 
                aria-label="Springe zur Sektion ..."
              >
                <span aria-hidden="true">
                  <img alt="..." />
                  <img alt="..." />
                  <!-- more images -->
                <span>
                  <span> <!-- visible label -->
                  <span>
                    <span aria-hidden="true">
                      <svg role="img" focusable="false"> <!-- caret icon -->
                  <span> <!-- duplicating visible label -->
...

Observations:

• Navigation structure

  • Navigation label includes "Navigation"; each navigation is announced by assistive technology as "navigation" already, adding same wording to a navigation's label will duplicate announcement as "Seiten-Sektionen Navigation, navigation"

  • Section element used in uniquely identified navigation landmark without any sibling elements

  • Multiple levels of <div> elements

  • Navigation does not use semantic HTML list element to list navigation items

  • Navigation items are links but use HTML button element; button does not set correct focus, so clicking (by keyboard or assistive technology) will scroll the page but the focus remains on the triggering element

• ARIA

  • aria-roledescription

    • does not add functionality

    • "carousel" and "slide" is not in main page language

  • Role "group" used for single interface object (as opposed to intended use to "identify a set of user interface objects", see MDN ARIA group role)

  • "Slide" labels "Slide X von 4" do not convey valuable information

• Button

  • Attributes

    • <button type="button"> is redundant

    • uses title attribute

    • labeled by aria-label

    • title duplicated aria-label

  • Images

    • Hidden from assistive technology by use of aria-hidden="true"

  • Visible label

    • Includes aria-hidden="true" <span> element which then includes an SVG with role="img"

    • Duplicated by visually hidden text

    • Not at all used, because it is overwritten by aria-label on the button element

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.

Navigation links using button elements. Clicking navigation links will result in scrolling page to section but keeping focus on triggering element (button).

Interactive element can be operated by mouse but not by keyboard. The issue may occur when:

• Semantic HTML elements are mis-used (e.g. <a> used as a button, or <button> used as a link)

Given the visual main heading "30 Jahre Telekom.Wir feiern mit tollen Angeboten und Aktionen" and the main heading in code markup "Aktuelle Angebote & Aktuelles", headings

• "Feiern Sie mit: 30 Jahre Telekom mit exklusiven Jubiläumsaktionen"

• "Entdecken Sie unsere Telekom-Aktionen"

do not accurately describe content purpose and duplicating existing section content. Both headings would describe the whole page content and as such would be better suited as main heading.

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 30 Jahre (Telekom). Wir feiern mit tollen Angeboten und Aktionen
  h2 Unsere Top Deals
    h3 iPhone 16 128 GB
    h3 MagentaTV Smart für 0 €
    h3 240 € Wechselbonus
    h3 Kids Watch für 1 €
  h2 Unsere Smartphone-Highlights von Apple
    h3 Apple iPhone 16 128 GB
    h3 Apple iPhone 15 128 GB
    h3 Apple iPhone 16 Pro 128 GB
    h3 Apple iPhone 15 Pro Max 256 GB
  h2 Weitere Top Smartphones im Angebot
    ...
  h2 Unsere Mobilfunk-Deals zum Jubiläum
    ...
  h2 Unsere TV & Internet-Geburtstags-Angebote
    ...
  h2 Zubehör-Highlights von Apple
    ...
  h2 Unsere Magenta Moments
    h3 Exklusive Geschenke, Angebote und Gewinnspiele für unsere Kunden
    ...
  h2 Feiern Sie mit: 30 Jahre Telekom mit exklusiven Jubiläumsaktionen
  h2 Entdecken Sie unsere Telekom-Aktionen

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

h1 Aktuelle Angebote & Aktionen
  h2 Unsere Top Deals
  h2 Unsere Smartphone-Highlights von Apple
  h2 Weitere Top Smartphones im Angebot
  h2 Unsere Mobilfunk-Deals zum Jubiläum
  h2 Unsere TV & Internet-Geburtstags-Angebote
  h2 Zubehör-Highlights von Apple
  h2 Unsere Magenta Moments
  h2 Feiern Sie mit: 30 Jahre Telekom mit exklusiven Jubiläumsaktionen
  h2 Entdecken Sie unsere Telekom-Aktionen

Observations for heading structure:

• Visual main heading not used as heading at all

• SEO headings

  • "Feiern Sie mit" repeats content (offers) from other sections

  • "Entdecken Sie unsere Telekom-Aktionen" introduces content that introduces the whole page

• No headings are used for actual offers; as navigation by heading structure is used most by users of assistive technology, the individual offers will be more difficult to reach for certain user groups

What is arguably list content, is not using semantic list elements. See

• Deal / offer sections

When navigating list content, the use of semantic list elements will greatly increase user experience for users of assistive technology. The current structure does not allow, getting an overview of deals, number of offers, etc. By using semantic list elements, it is possible for users of assistive technology to navigate to a section, directly know the count of deals / offers (that sighted users can work out by visible cards and pagination buttons), and to navigate each of those deals individually.

The navigation and pagination buttons for offer carousels are focused after the carousel content, rendering them a lot less useful to users of keyboard navigation and assistive technology. While the focus order "content → navigation" is not per se a failure of this criterion, it arguably defies the navigation's purpose, to access it after the content.

See e.g.

The focus order in the carousel should be appropriate to the work task.

BFIT-Bund Handreichung "Accessible design of user interface elements – Carousel"

or, while not being the same use-case still can be applied here:

The rotation control button is the first element in the screen reader reading order.

ARIA Authoring Practices Guide (APG) "Auto-Rotating Image Carousel Example with Buttons for Slide Control"

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

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.

Carousel pagination buttons do not meet minimum color contrast ratio (3:1):

• Pagination dots (grey): 1.6:1

(Navigation arrow disabled has 2.4:1 ratio, which is not a failure of this criterion if the button is disabled to all users properly)

Carousel pagination buttons rely on color difference to differentiate button states. Color contrast ratio between selected and unselected button is 2.9:1, thus not meeting minimum requirement of 3:1.

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:

• Images of text: "iphone 16" in "Top Deals" section uses image of text. Text "Entwickelt für Apple Intelligence. Jetzt auf Deutsch verfügbar." does not meet minimum color contrast ratio