Page URL
https://www.telekom.de/shop/tarife/smartphone-tarife

Issues List

Page Notes and General Remarks
Non-text Content 1.1.1 (A)
Image text alternative does not serve equivalent purpose
Non-text Content 1.1.1 (A)
Decorative "Anmelden" icon has no alt attribute
Non-text Content 1.1.1 (A)
"Pluskarte" image has no purpose equivalent text alternative
Non-text Content 1.1.1 (A)
Image text alternative does not serve equivalent purpose
Info and Relationships 1.3.1 (A)
"Ich bin unter 28 Jahre alt" toggle switch / link
Info and Relationships 1.3.1 (A)
Visual presentation of heading structure does not match code markup
Info and Relationships 1.3.1 (A)
Visual presentation of heading structure does not match code markup
Info and Relationships 1.3.1 (A)
Regions used to structure content, already structured by headings
Info and Relationships 1.3.1 (A)
Semantic HTML elements are used for styling or layout purposes
Use of Color 1.4.1 (A)
Links are indicated by color only
Contrast (Minimum) 1.4.3 (AA)
Legal link text not meeting minimum contrast
Contrast (Minimum) 1.4.3 (AA)
"Bonus" info (magenta) in "Tarif ändern" dialog window is not meeting minimum contrast
Resize text 1.4.4 (AA)
Resizing text leaves very limited space in tariff carousel
Resize text 1.4.4 (AA)
Tooltips in tariff chooser carousel not accessible when text is resized
Reflow 1.4.10 (AA)
Fixed bottom bar nearly removes all available space
Reflow 1.4.10 (AA)
Button text in fixed bar not reflowing
Reflow 1.4.10 (AA)
Tooltip not accessible on smaller viewports
Reflow 1.4.10 (AA)
Vertical space in tariff carousel on small viewport extremely limited
Text Spacing 1.4.12 (AA)
Text content overflows containers with user changed text spacing
Text Spacing 1.4.12 (AA)
Text overflows containers when changing text spacing
Content on Hover or Focus 1.4.13 (AA)
Tooltip not dismissible (/ hoverable)
Keyboard 2.1.1 (A)
Dialog window does not receive keyboard focus
No Keyboard Trap 2.1.2 (A)
Keyboard focus trapped in "Tarif ändern" dialog window
Bypass Blocks 2.4.1 (A)
Repeated blocks cannot be bypassed
Focus Order 2.4.3 (A)
User-activated dynamic content not in correct focus order
Focus Order 2.4.3 (A)
Non-interactive element is focusable
Headings and Labels 2.4.6 (AA)
Main heading "Wählen Sie Ihren Smartphone-Tarif" is not describing purpose of whole page
Focus Not Obscured (Minimum) 2.4.11 (AA)
Dialog windows obscure focus of underlying elements
Target Size (Minimum) 2.5.8 (AA)
Interactive element does not meet minimum target size
Accessible Authentication (Minimum) 3.3.8 (AA)
"Anmelden" / Authentication not tested
Name, Role, Value 4.1.2 (A)
Interactive element does not use correct semantic HTML
Priority: Critical Significant Page: Smartphone Tarife Observation Permalink
Observation Details

Page is

  • child page of "Tarife" and

  • closely connected to other Shop pages like "Alle Geräte".

All (or most) of issues in parent pages and sibling pages are also found on this page. Ensure, following global issues and page specific issues of parent pages and sibling pages closely. Remediation of this page is only done, when all parent pages, all sibling pages, and all global issues are remediated.


Please refer to global observation 1.3.1 Info and Relationships – "Semantic HTML" for general remarks about the use of semantic HTML.

Accompanying Files
Observation Details

The silhouette icon on the "Anmelden" button has no alt attribute. When the icon is considered decorative, as it arguably can be, the image must have a null alt attribute set to hide it from the accessibility tree.

Accompanying Files
Observation Details

The image uses "Pluskarte" as text alternative. The text content of the image alone is "Hauptkarte Unlimited = 1. PlusKarte Unlimited". The text beside it says "Durch Zubuchung mindestens einer PlusKarte für Erwachsene zum Hauptvertrag, erhalten ab dem Tarif MagentaMobil M alle Karten unbegrenztes Datenvolumen."

Those three (accessible alt attribute, image contents, description text) do not convey the same information, making the used text alternative for the image inequivalent to the image's purpose.

Remediation Notes

Ensure, using proper text alternatives for images. If the image contains text content, the text alternative should include all of its text content as well.

A text alternative does not need to be within the image's alt attribute. It can be conveyed by the text beside it, as long as it is purpose equivalent. So either, an equivalent alt attribute should be set, or a null alt attribute is used to mark image decorative in combination with changing the text besides it to convey all visible information from the image.

Accompanying Files
Observation Details

As this audit excludes the header area for testing, this test even has more vertical space available than the customer facing page.

Remediation Notes

Accompanying Files
Observation Details

Button text in "Weiter ohne Gerät" is not reflowing on small viewport.

Remediation Notes

Ensure all text content reflows correctly.

Accompanying Files
Accompanying Files
Observation Details

Link text contrast ratio to background is 3.9:1 which is below the minimum ratio of 4.5:1.

Side note: while no failure of WCAG, please check font sizes of text content, especially for important information like legal documents.

Remediation Notes

Accompanying Files
Observation Details

Remediation Notes

Ensure, no text content is child of a fixed sized container.

Priority: Best Practice Unknown Page: Smartphone Tarife Observation Permalink
Observation Details

This observation is set to priority 5 "Best Practice", so it is not considered a failure. As the full header section of the page is out of scope for this audit, the authentication process via "Anmelden" button cannot be tested in the scope of this audit. Thus, 3.3.8 Accessible Authentication (Minimum) is marked as "Not Evaluated".

Accompanying Files
Observation Details
  • Tooltips in tariff carousel are not dismissible.

  • Tooltips in tariff carousel are not (accessibly) hoverable. Hover is possible, when quickly and precisely moving the mouse cursor to the tooltip from the tooltip opening element. Moving "too slow", the tooltip is closed before reaching it.

Remediation Notes

Tooltips must be dismissible without removing focus from the element that opens the tooltip. Tooltips must be hoverable from the opening element.

Observation Details

Heading <h1> describes the tariff carousel but used as main heading, which should have the purpose of describing the whole page.

Remediation Notes

Evaluate heading structure / outline so that every heading correctly describes the purpose of its "descendants".

Accompanying Files
Observation Details

The toggle switch "Ich bin unter 28 Jahre alt" does not use semantic HTML elements for a toggle switch. The switch functions as a link. The markup does not reflect this.

  • Presented as toggle switch

  • Functions like a link

  • Marked up without any interactive elements

Code for the link is:

<span class="co-ab_outerWrapper co-ab_outerWrapper--desktop">
  <span class="co-ab_ageToggleWrapper">
    <div class="co-ab_ageToggle_textWrapper">
      Ich bin unter 28 Jahre alt
      <div>&nbsp;</div>
    </div>
    <span class="co-ab_ageToggle_switchWrapper">
      <span class="co-ab_ageToggle_switchStyle"></span>
    </span>
  </span>
</span>
Remediation Notes

Ensure, using proper semantic HTML elements. Please refer to observation 1.3.1 Info and Relationships – "Semantic HTML" for general remarks about the use of semantic HTML.

The link "Ich bin unter 28 Jahre alt" can be marked up like this:

<a href="...">Ich bin unter 28 Jahre alt</a>

Which makes it perfectly accessible, behave exactly like it should and still all styling can be done on it as intended.

You must not mismatch presentation, function, and markup. A link looks like a link, a toggle switch like a toggle switch.

Observation Details

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

Remediation Notes

Ensure, all interactive elements' target size is at least 24×24px.

While this does not necessarily mean, e.g. an icon itself must be 24×24px, the clickable area around it counts as the target size, if there is no overlapping interactive element in that area. Ideally, the element's visual boundaries adhere to the minimum target size of 24×24px itself.

Observation Details

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

Remediation Notes

When opened,

  • dialog windows must receive keyboard focus and

  • keyboard focus must be trapped inside the dialog window.

Ensuring placed and trapped keyboard focus to the opened dialog window will remediate this issue, as no interactive element outside of the opened dialog window should be focusable, thus cannot be focus obscured.

For more information about technical requirements of modal dialogs, refer to BFIT-Bund Handreichung "Accessible design of user interface elements – Modal Dialog". Also, consider/evaluate use of HTML dialog element <dialgo>. See HTML specifications – The dialog element and Can I Use – Dialog for browser support information.

Observation Details
  • Footnotes

  • Info icon dialog windows

  • Tarifdetails dialog window

  • PlusKarte dialog window


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.

Remediation Notes

Ensure, for all dynamically added content that can be activated by user,

  • focus cannot be set to focusable elements inside content, before content is being visually added (e.g. collapsed accordion items, or not yet opened dialog windows)

  • dynamic content should be placed directly below the triggering element in the DOM order

  • Opening e.g. a dialog window, will set the focus on the first focusable element inside the dialog window

  • Activating a "Load more" button must ensure, focus, after content is loaded, either

    • is set to the first focusable element of newly loaded content or

    • is set to the first preceding focusable element of newly loaded content.

Ensure, for all dynamically added and then removed content that can be activated by user,

  • keyboard focus

    • remains (e.g. collapsing/expanding accordion items) on the triggering element or

    • is set to (e.g. opening and closing a dialog window) the triggering element again.

Observation Details

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.

Remediation Notes

Opening a dialog window by keyboard navigation must set the focus to the dialog window's content. Opening a dialog window must trap keyboard focus inside the dialog window, so underlying content cannot be accessed while dialog window is opened. Closing the dialog window, focus must be set to the triggering element again.

Ideally, the first focusable element in a dialog window can be used to close the dialog window, so opening and closing of a dialog window can be done without the need of navigating through other focusable elements. Although simple dialog windows, e.g. asking for confirmation, and providing "Accept" and "Cancel" buttons, might not have an explicit "Close" button and may set focus to the dialog window's "main purpose action" instead.

Accompanying Files
Observation Details

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:

  • MagentaMobil Young

  • Speedbox-Tarife

Image's text alternative duplicates visible text content.

Remediation Notes

Ensure purpose equivalent text alternatives are present for every non-decorative image. Depending on the purpose, the text alternative may be describing the contents of an image or the functionality it serves (e.g. as a link to a specific page).

Accompanying Files
Observation Details

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.

Functional images like images used as links, must have a text alternative that equivalently describes the purpose of the link.

Functional Images with non-equivalent text alternative:

  • "Testsieger Siegel" images

Remediation Notes

Ensure purpose equivalent text alternatives are present for every non-decorative image. Depending on the purpose, the text alternative may be describing the contents of an image or the functionality it serves (e.g. as a link to a specific page).

Function of the image is linking to detailed information about the test and Telekom's standing in it. Ensure, reflecting the link target (e.g. test results on tester homepage vs. internal information on "Auszeichnungen" page).

Accompanying Files
Observation Details

Landmarks like named sections / regions should only be used rarely and for content that is not otherwise structured already. When a proper heading structure is in place, grouping the same content into a region as well does not provide any benefits navigating page structure.

As regions and headings both are announced by assistive technology, it can make navigating a page sequentially less pleasant to access, as it takes multiple clicks to move between items and content announcements are duplicated.

Remediation Notes

Ensure, using a proper heading structure to structure page content. Doing so, there is no need for manually adding additional landmarks to the page to further structure the content within the main landmark.

Observation Details

The visually presented heading structure of the page does not match the use of semantic HTML heading elements. The visually presented structure is as follows:

h1 Noch nie war wechseln so attraktiv
  h2 Wählen Sie Ihren Smartphone-Tarif
    h3 20 GB Datenvolumen
    h3 30 GB Datenvolumen
    h3 50 GB Datenvolumen
    h3 100 GB Datenvolumen
    h3 Unbegrenzt

  h2 Jetzt zum Testsieger wechseln
  h2 In unseren Handytarifen inklusive
    h3 Telefon- und SMS-Flat
    h3 Größtes 5G-Netz
    h3 HotSpot-Flatrate
    h3 EU-Roaming
  h2 Gute Gründe jetzt einzusteigen
    h3 Unbegrenztes Datenvolumen
    h3 MagentaEINS
    h3 Vorteile in der MeinMagenta App
    h3 Optional mit Wunschgerät
    h3 Rufnummernmitnahme
  h2 Weitere Tarife der Telekom entdecken
    h3 MagentaMobil Young
    h3 Speedbox-Tarife
  h2 Häufig gestellte Fragen zu den Handytarifen
    h3 ...

  <!-- sidebar -->
  h2 Vorteile im Überblick
    h3 Unbegrenztes Datenvolumen
    h3 MagentaEINS Vorteil

The programmatically determinable heading structure, using HTML heading elements is as follows:

h1 Wählen Sie Ihren Smartphone-Tarif
  h2 Change number of Karten für Erwachsene. Values between 1 and 6 are valid. 
  h2 Jetzt zum Testsieger wechseln
  h2 In unseren Handytarifen inklusive
    h3 Telefon- und SMS-Flat
    h3 Größtes 5G-Netz *
    h3 HotSpot-Flatrate
    h3 EU-Roaming
  h2 Gute Gründe jetzt einzusteigen
    h3 Gute Gründe jetzt einzusteigen 
    h3 Unbegrenztes Datenvolumen
    h3 MagentaEINS
    h3 Vorteile in der MeinMagenta App
    h3 Optional mit Wunschgerät
    h3 Rufnummernmitnahme
  h2 Weitere Tarife der Telekom entdecken
    h3 MagentaMobil Young
    h3 Speedbox-Tarife
  h2 Häufig gestellte Fragen zu den Handytarifen
    h3 Vorteile im Überblick
      h4 Unbegrenztes Datenvolumen
      h4 MagentaEINS Vorteil

Observations for heading structure:

  • Visual main heading in main stage "Noch nie war wechseln so attraktiv" is not using main heading <h1> element or any other HTML heading element for that matter

  • Arguably most important content of Smartphone-Tarife page –the tariff cards– do not use heading elements

  • Hidden headings found

    • Change number of Karten für Erwachsene. Values between 1 and 6 are valid.

    • Gute Gründe jetzt einzusteigen (<h3>), duplicating preceding <h2>

  • Sections "In unseren Handytarifen inklusive" and "Gute Gründe jetzt einzusteigen" use subsequent headings for shot form content that might better be defined as list content

  • Sections "Jetzt zum Testsieger wechseln", "In unseren Handytarifen inklusive", "Gute Gründe jetzt einzusteigen" could be grouped as "Vorteile" to more broadly structure page content

  • Sidebar content is not grouped via <h2> heading and as such might be seen as content of "Häufig gestellte Fragen zu den Handytarifen"

Remediation Notes

Ensure, visually presented heading structure matches programmatically determinable heading structure by only using HTML heading elements for heading content and using HTML heading elements for all heading content.

Side note: This criterion does not specifically look at proper heading content (i.e. wordings, usefulness of headings). See 2.4.6 Headings and Labels for this.

Accompanying Files
Observation Details

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

FAQ section:

  • Empty paragraph after section heading

  • Improper use of line breaks in FAQ item "Worauf sollte ich bei meinem neuen Handytarif achten?"

  • Table content in FAQ item "Was verbraucht am meisten Datenvolumen?" displayed by use of non breaking spaces: <li><strong>Serienstreaming</strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ... 1 Stunde</li>

"Tarifdetails" / "Jetzt zur Telekom wechseln" dialog windows:

  • Extensive use of line break elements

  • Use of <strong> elements for heading content

  • Info icon dialog window

    • Use of line breaks

    • Use of <b> to emphasize text content

    • Use of emphasis for heading content

Remediation Notes

Ensure proper use of semantic HTML.

  • Semantic elements must not solely be used for styling or layout purposes

  • All styling and layout changes must use CSS

  • Limit use of line breaks to intended purposes, e.g. in poetry or code snippets

Accompanying Files
Observation Details

"PlusKarte" dialog window uses headings:

    h3 Jetzt mit der PlusKarte unbegrenztes Datenvolumen sichern:
        h5 Die PlusKarte ist eine zusätzliche Karte zu einem aktuellen MagentaMobil Vertrag mit eigener Rufnummer und eigenem Datenvolumen in derselben Höhe wie das der Hauptkarte.   So einfach geht’s: MagentaMobil Hauptkarte aussuchen MagentaMobil M oder L auswählen PlusKarte für 19,95 € hinzufügen Entweder direkt hier, indem Sie oben mehr als eine Karte auswählen, oder im Warenkorb Unbegrenzt surfen Mit ausgewählten Karten deutschlandweit unbegrenztes Datenvolumen nutzen. Im Nachgang können noch weitere PlusKarten+, PlusKarten Kids und Teens sowie PlusKarten Data dazugebucht werden, die ebenfalls vom unbegrenzten Datenvolumen profitieren.

Observations:

  • Skipped heading level

  • Heading extremely long

  • Heading includes whole body copy

Remediation Notes

Ensure, visually presented heading structure matches programmatically determinable heading structure by only using HTML heading elements for heading content and using HTML heading elements for all heading content.

Side note: This criterion does not specifically look at proper heading content (i.e. wordings, usefulness of headings). See 2.4.6 Headings and Labels for this.

Observation Details

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:

  • link "Preisliste, Leistungsbeschreibung und AGB" in tariff cards

  • link "Telekom Netz" in 5G Netz dialog window

  • links in "Tarifdetails" dialog windows

Remediation Notes

Ensure, links can be differentiated from surrounding text content by at least one other visually perceivable factor. Preferably use underline to indicate link text as it is browser default and known pattern to users.

Accompanying Files
Observation Details

On base viewport size of 320×256px and page zoom of 100%,

  • the available vertical space, as soon as tariff carousel is displayed, is just 75px.

  • tool tips content cannot be reached

Remediation Notes

Accompanying Files
Observation Details

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. This often includes:

  • Stage areas

  • Badges

  • Manually outlined elements like buttons (e.g. footnote icon buttons)

  • Teasers

  • Card components

Remediation Notes

Container elements must not use fixed dimensions, if they contain text content, to allow proper reflow without obscuring / overlapping content. Changing text spacings to values

  • Line height (line spacing) to at least 1.5 times the font size;

  • Spacing following paragraphs to at least 2 times the font size;

  • Letter spacing (tracking) to at least 0.12 times the font size;

  • Word spacing to at least 0.16 times the font size.

must be possible and must not lead to any loss of content or functionality.

Accompanying Files
Observation Details

Magenta text on magenta background has contrast ratio of 4.3:1 which does not meet color contrast ratio minimum of 4.5:1 for text content.

Remediation Notes

Ensure all text content meets minimum color contrast requirements.

Accompanying Files
Observation Details

On base viewport size of 1024×768px and page zoom of 200%, the available:

  • vertical space in the tariff carousel, is 400px.

  • horizontal space, due to page zoom, is limited and cuts of hover tooltips

All content must be presented without loss of information or functionality.

Remediation Notes

The contents of the tooltip must stay accessible on smaller viewports. Ensure to display the contents within the boundaries of the viewport.

Priority: Serious Significant Page: Smartphone Tarife Observation Permalink
Accompanying Files
Observation Details

In tariff carousel, keyboard focus is trapped after selecting tariff. Following these steps:

  1. Press TAB until tariff carousel is focused

  2. Press ARROW LEFT / RIGHT to focus tariff

  3. Press ENTER to select focused tariff

  4. Pressing TAB now will rotate within tariff card

Remediation Notes

Ensure proper functionality of keyboard navigation for all interactive elements. Especially non-native, complex components must adhere to all technical requirements for presentation, operation, keyboard navigation, assistive technology navigation. For technical requirements, refer to BFIT-Bund Handreichung "Accessible design of user interface elements" for the chosen interactive elements. Please note, all interactive elements must meet these requirements. If native, semantic HTML elements are used unchanged, these requirements are met by default. Changing default presentation or functionality, or using non-native elements, will always add drastically more difficulty and maintenance requirements.

That said, use of proper semantic HTML elements without the need of ARIA enrichments is always the preferred method. For the given component, functionality can be defined as "radio button group", as the user can choose one item from a list of items. The group is presented as a carousel, which has no (fully accessible) way of being built without use of JavaScript and/or ARIA enrichments. If presentation as carousel is not mandatory, simple, responsive reflow of the radio button content would suffice.

Observation Details

Shop Pages are repeating certain content blocks. Depending on shop page:

  • Breadcrumb navigation

  • Optional product highlights

  • Product group navigation

  • Main heading and description

  • Filtering and sorting mechanisms

  • Product list

  • Side bar with payment information and offer details

  • SEO content/landing page content, including FAQ section

  • Direkteinstiege

Those parts are not correctly identifiable by common mechanisms like landmarks (only main landmark used) or heading structure (only main heading and headings in optional landing page/SEO content). Reaching certain parts of the page is made very difficult for users of keyboard or other assistive technology like screen readers.

Remediation Notes

Ensure use of proper structure of of the page and easy identification of repeated content blocks by using a combination of landmarks, and HTML headings. An example structure for the shop pages containing product lists, could be as followed:

  1. HTML header

    1. The current header element is not part of this audit, thus its current contents are not listed in here.

    2. Breadcrumb navigation as HTML <nav> element, labeled to differentiate from main menu, and including an ordered list <ol>

    3. Option product highlights identified by <h2> heading

    4. Device group navigation, using <nav> navigation element, labeled to differentiate from other menus

  2. <main> landmark

    1. <h1> main heading and description text content

    2. <section> for filtering and sorting

      1. evaluate use of ARIA role search

      2. add <h2> heading with id attribute and

      3. label the section by using aria-labelledby="" with the heading ID

    3. <section> for product list as your main content

      1. add <h2> heading with id attribute and

      2. label the section by using aria-labelledby="" with the heading ID

      3. The actual device list should use <ul>

      4. Each product card should be <article> including <h3> with product name

      5. No further nesting of landmarks should be needed inside this section as the structure is well defined by the article elements and their nested heading

    4. <section> for sidebar content; ideally labeled by a visible heading <h2> that describes all sidebar content; sections inside sidebar should not use <section> but only <h3> for structure

    5. <section> for landing page, SEO content and FAQ; sections inside should not use <section> but only <h2> and <h3> for structure

  3. HTML footer

Additionally, the use of skip links should be evaluated. Skip links are not only meant to be the first links on a page, but can also be used before certain repeated content blocks. For example, at the start of the main landmark, there could be a skip link that skips the product list and brings the user to the sidebar content or the FAQ section. Skip links can also be used at the end of a section or landmark to go back to its beginning. For example, at the end of the product list, which can be quite long, there could be a skip link to reach the start of the product list again.


Using proper structure of HTML headings usually makes "custom landmarks" (by sections) a redundant mechanism to navigate on a page, so they should not be used on everything. Only use landmarks for broad page structure.

The same goes for skip links. If a proper heading structure and optional landmarks already exist, there usually is no need for additional skip links.


Please (also) refer to observation 1.3.1 Info and Relationships – "Semantic HTML" for general remarks about the use of semantic HTML.

Observation Details

Button "Preisübersicht anzeigen" in sidebar uses <a tabindex="0"> 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.

Remediation Notes

Ensure, only semantic button elements are used for button functionality. <a><button>

Please refer to observation 1.3.1 Info and Relationships – "Semantic HTML" for general remarks about the use of semantic HTML.

Accompanying Files
Observation Details

Text content "Anmelden" in button "Anmelden" uses <text-replacer tabindex="0"> making text content focusable, while surrounding button already can be focused and interacted with. The button markup looks as follows:

<button class="...">
  <span class="...">
    <span class="...">
      <div class="...">
        <div class="...">
          <img class="..." 
               src="....svg" 
               data-img="...">
          <div class="...">
            <svg width="..." height="..." viewBox="..." fill="none" xmlns="...">...</svg>
          </div>
        </div>
      </div>
      <span>
        <text-replacer data-id="..." 
                       style="..." 
                       tabindex="0">
          <span style="...">Anmelden</span>
        </text-replacer>
      </span>
    </span>
  </span>
</button>

Nesting focusable elements like this will make assistive technology focus all elements in sequence, adding duplication without added information.

Remediation Notes

Ensure proper use of semantic HTML elements. If using ARIA attributes or manually setting tabindex attribute, it usually is a good indicator to look for existing, native, semantic HTML elements that fit the needs. In case of the "Anmelden" button, this structure markup will suffice:

<button>
  <svg aria-hidden="true">...</svg>
  <span>Anmelden</span>
</button>