14 issues found on Shop

Page titled "Willkommen im neuen Telekom Onlineshop | Telekom" but main heading is "Mobilfunk-Tarife" and page content also only mentions tariffs.

The page title is usually the first information, users of assistive technology will get when visiting a website. Ensuring the page title accurately describes the contents of the page and only the page, is the easiest way to include users of assistive technology in the website's user experience.

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

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.

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.

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:

• "Telekom Netz" in footnote dialog window "Bestes & größtes Mobilfunknetz Deutschlands!"

  • No underline

  • Color contrast ratio to surrounding text is 2.8:1

Text content gets truncated on small viewport with no possibility to reach the truncated content in section intro text "Unsere Smartphone-Tarife". CSS for text content looks as follows:

.cards-cta-headline, .cards-cta-text {
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
}

Setting display value of HTML heading and paragraph element to something other than default block, may result in overflow issues.

Page uses landmarks. Accessible landmarks (including <article> elements) are:

• Main, using <main>

• Breadcrumb (Navigation), using <nav>

• Region "Unsere Smartphone-Tarife", using <section aria-labelledby="...">

• Article "Holt euch jetzt UNLIMITED*", using <article aria-labelledby="...">

• Article "MagentaMobil Young", using <article aria-labelledby="...">

• Article "Prepaid-Tarife", using <article>

• Article "Datentarife", using <article>

• Article "Watch- & Tracker-Tarife", using <article>

Observations:

• While section "Unsere Smartphone-Tarife" uses a labeled section which changes its accessible role to "region", section "Weitere Mobilfunk-Tarife" is not labeled, therefore has role "generic" and is not added to the landmark list

• Article elements have non-generic role "article" and as such are included in the landmark list on macOS VoiceOver screen reader rotor, even when not explicitly labeled

Breadcrumb navigation landmark uses <nav aria-label="Breadcrumb">. As page language is set to lang="de", German screen reader voice is trying to read "Breadcrumb", which –for users not familiar with the wording– can be an issue.

• Line break element 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".

The page uses HTML list element in section "Unsere Smartphone-Tarife" to list the cards.

• class="cards-cta-card-group"

On the other hand, a list is not used in section "Weitere Mobilfunk-Tarife" which follows the same card structure.

Text content in certain containers may overflow the container's boundaries, when text spacings are changed, making some text harder, other text impossible to perceive. Found on page:

• Card component

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

Decorative images with text alternative present:

• Card icons in section "Weitere Mobilfunk-Tarife"

Side note: icons use PNG images for graphics that can be displayed vectorized.

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:

• "Unser Telekom NextMagenta Unlimited Image", using <div role="img" aria-label="...">

• "Young Smartphone-Tarife Image", using <div role="img" aria-label="...">

Observations:

• "Image" is part of text alternative; "Image" will be announced by assistive technology by default and should not be part of the text alternative

• "Image" is part of text alternative; accessible text is not in main page language

• Generic <div> element used instead of semantic Image element

• Image contents are not described in text alternative