Important Notice: This website shows interim results and does not represent a complete accessibility audit. The content is not final, is under heavy development, and is not legally binding. The website and all its content is for internal use only; unauthorized use or distribution may result in legal consequences.

Documentation of accessibility observations for Deutsche Telekom – Mobilfunk & OneShop

4.1.2 Name, Role, Value (A) Inconsistent use of landmarks, grouping HTML elements, ARIA attributes

Priority: Moderate Low Page: Shop Observation Permalink
Accompanying Files
Observation Details

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

Remediation Notes

Landmarks should typically be used for broad page navigation that cannot be done by heading structure. Usually, a good heading structure will be enough to ensure good user experience with on-page navigation.

When using an HTML section element but not adding an accessible name, the grouping should instead be done by using a generic <div> element, as an unlabeled <section> does not add any accessible information.

When using landmarks, ensure consistent use of HTML elements and ARIA attributes. When using labeled landmarks, ensure, labelling all section and article elements to create an identifiable, consistent page structure like this:

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

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

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

  • Region "Weitere Mobilfunk-Tarife", using <section aria-labelledby="...">

    • Article "Prepaid-Tarife", using <article aria-labelledby="...">

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

    • Article "Watch- & Tracker-Tarife", using <article aria-labelledby="...">