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) Interactive element does not use correct semantic HTML

Priority: Critical Medium Page: Aktionen Observation Permalink
Observation Details

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.

Remediation Notes

Ensure proper functionality by using the correct semantic HTML elements. If used correctly, there is no need for added complexity via use of ARIA. Please refer to First Rule of ARIA Use. Please also refer to observation 1.3.1 Info and Relationships – "Semantic HTML" for general remarks about the use of semantic HTML.

A simplified navigation structure (side note: wordings are not taken into account) could be to

  • label navigation by existing text which provides explicit content for all users

  • use the semantic list element, removing necessity of labelling item count ("Slide X von 4")

  • use a single <a href="#XYZ"> element per navigation item, labelled by existing content and correctly linking and scrolling to wanted section

  • keep images visible for users of assistive technology and use purpose equivalent text alternatives to describe e.g. categories that can be found in the section; e.g. category "Mobilfunk" has "Smartphones" and "Smartwatches"

  • remove all duplicated content, like visually hidden text when visible label is the same, unnecessary hierarchy levels, adding element attributes to hidden elements, etc.

Example structure:

<nav aria-labelledby="nav-sections">
  <h2 id="nav-sections">Welche Angebote sind für Sie interessant?</h2>
  <p id="nav-anchor-intro" aria-hidden="true">Springe zu den Angeboten für</p>
  <ul>
    <li>
      <a 
        href="#section-mobilfunk" 
        id="nav-mobilfunk" 
        aria-labelledby="nav-anchor-intro nav-mobilfunk"
      >
        <span id="nav-mobilfunk-text">
          Mobilfunk <svg aria-hidden="true">...</svg>
        </span>
        <div id="nav-mobilfunk-img">
          <img alt="Smartphones" src="..." />
          <img alt="Smartwatches" src="..." />
        </div>
      </a>
    </li>

    <!-- more navigation items -->

  </ul>
</nav>