18 issues found on Prepaid Tarife

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.

Pagination buttons of carousel use "previous button" and "next button" as button labels, making those the accessible name as well.

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

E.g. the heading "Mehr Datenvolumen, gleicher Preis" starts with a font size of 43px (Viewport 1024×768px, Zoom 100%) and even gets smaller on larger viewports.

Headings in carousel use <h3> heading level, grouping them under heading "Rufnummer vom Wettbewerber mitnehmen und 10 € Wechselbonus sichern.*".

Headings "MagentaMobil Prepaid Tarife" (<h1>) and "Rufnummer vom Wettbewerber mitnehmen und 10 € Wechselbonus sichern.*" (<h2>) are not visually identifiable as headings.

Instead, non-heading text content (<p>) is used as the actual visual heading.

Beware, heading structure / outline of a page is very much the most used method for screen reader users to navigate web pages. See WebAIM Web Accessibility Survey, making a good outline the absolute basis of delivering an accessible web page.

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

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 accordion button uses <div role="button">.

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

Decorative icons must use null alt attributes.

The text alternative of the section images duplicate the section's heading's text content.

The on-page navigation carousel

• uses headings. Those are the same headings as the actual sections on the page. Duplicating headings will inevitably create accessibility issues.

• is nested under "Rufnummer vom Wettbewerber mitnehmen und 10 € Wechselbonus sichern.*" heading

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:

• 5G Netz Dialog window, link "Telekom Netz"

• Empty HTML paragraph element in FAQ section after FAQ heading.

• Side note: No paragraph element used in FAQ item "ie kann ich mir die Freiminuten meines Prepaid-Tarifs anzeigen lassen?" Also, missing "W" in FAQ item heading

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

On-page navigation links use relative href attributes, including current page's path: href="/tarife/prepaid-tarife#prepaid-karte" instead of only using on-page anchor href="#prepaid-karte".

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:

• check mark list icons

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