21 issues found on Magenta Tarife Young

Text content within stage spills over when text spacing is adjusted (increased).

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.

The complete heading structure is hidden inside a collapsible, not at all representing the visually displayed outline.

Not a single heading is using semantic HTML heading elements and all semantic HTML heading elements are used on non-heading text.

Keep in mind, this "trick" might have worked in SEO years ago, but will de-rank the page in search engines. Accessibility will always be good for SEO.

The link text "hier" does not convey the link's purpose on its own. The context (surrounding paragraph) does not convey the purpose either.

The streaming service logos are using "Telekom Young ..." text alternative. The images themselves however are simply service logos, having nothing to do with "Telekom Young".

The product images of the smartphones use "Produktbild des ..." with the product's heading as their text alternative. While this may suffice for some images, it fails for others. The text alternative must serve an equivalent purpose to the image itself.

Multiple line break elements found.

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

Button "Mehr anzeigen" in SEO content uses <a href="#"> instead of semantic 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.

The title attribute can be used to provide additional information to the already existing accessible name of an interactive element like a link. It should not be used for the same or less information. If the attribute does not provide additional information, it should not be used.

Some assistive technology do not announce the title at all, so providing relevant information only through the title attribute should always be prevented. If assistive technology announces the title attribute, it will do so after announcing the accessible name of the element, usually resulting in duplicate announcement of the same information.

For more information about using the title attribute to provide additional information, refer to W3C Technique H33: Supplementing link text with the title attribute.

Title attribute with same content as existing accessible name found on links:

• "Gerät hinzufügen" in tariff cards

• "Tarif ohne Gerät" in tariff cards

• "Weiter zum XYZ" in product cards

Title attribute with different content but same information as existing accessible name found on links:

• "Weiter zu XYZ" in "Weitere Young Vorteile" section

The switch "Mit Young-Streaming-Vorteil" can be operated by keyboard and assistive technology. Operating the switch by assistive technology has the following issues:

• Off state is announced as "invalid data off" (using attribute aria-invalid="true")

• Changes made to the following content are not announced; the user will not know of the changes

The HTML abbreviation element is used inconsistently. E.g. used on "mtl." but not on "zzgl." in the same paragraph.

<p class="...">
  zzgl. <abbr title="monatlich">mtl.</abbr> Kosten der Streaming-Option
</p>

It also isn't used at all for other paragraphs:

<p class="Stage_Stage__subtitle30jahre__ZAtNI CopyText__copy-text___78uN4">
  ... 
  inkl. 100 GB für nur 34,95 € mtl.
  ...
</p>

The tariff cards in section "Young-Smartphone-Tarife" are labeled "Slide X von 4", providing no information about the card's contents. The content itself then starts with "S", "40", "GB", "+ 20 GB mit Young-Streaming-Vorteil".

The actual tariff name is not stated in the section at all.

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

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 decorative text content:

• Young Tarif | Streaming-Vorteil | Young Tarif | Streaming-Vorteil | Young Tarif | Streaming-Vorteil | Young Tarif | Streaming-Vorteil |

Is announced to assistive technology as

• Young Tarif vertical bar Streaming-Vorteil vertical bar Young Tarif vertical bar Streaming-Vorteil vertical bar Young Tarif vertical bar Streaming-Vorteil vertical bar Young Tarif vertical bar Streaming-Vorteil vertical bar

Disabled navigation arrow buttons in "Young Smartphone Angebote" product carousel does not use HTML attribute disabled but only aria-disabled="true". While this results in correct "dimmed" announcement to assistive technology, keyboard navigation still allows focusing the button without providing information about its disabled state.

Carousel navigation buttons have labels:

• Zurück (if disabled)

• Gehe zurück auf Slide X von 6

• Gehe vor auf Slide X von 6

Carousel pagination buttons have labels:

• Zeige Slide X von 6

Observations:

• Definition of "slide" is vague when showing product cards

• Carousel shows X slides at a time, moving "by slide" is not ideal

• Pagination says "X von 6" but on largest viewport only showing 3 pagination buttons

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

• Navigation arrows: 2:1

• Pagination dots (grey): 1.5:1

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

The ordered list in dialog window "So einfach bekommst Du den Vorteil" uses "custom list markers" with CSS content: counter(magenta-counter).

List items in semantic HTML lists are automatically numbered and the count is announced by assistive technology by default. Adding a separate count as accessible content via CSS content results in duplication of count announcement.