Page URL
https://www.telekom.de/smarte-produkte/iot/senioren-smartwatch

Issues List

Non-text Content 1.1.1 (A)
Images do not have purpose equivalent text alternative
Non-text Content 1.1.1 (A)
Informative images (checkmark / cross) in table do not have purpose equivalent text alternative
Non-text Content 1.1.1 (A)
Images do not have purpose equivalent text alternative
Non-text Content 1.1.1 (A)
Decorative icons have non-null alt attribute set
Non-text Content 1.1.1 (A)
Decorative icons have non-null alt attribute set
Non-text Content 1.1.1 (A)
App store / Play store icons used as functional images do not have purpose equivalent text alternative
Captions (Prerecorded) 1.2.2 (A)
Video "TCL Connect App herunterladen" does not provide captions
Captions (Prerecorded) 1.2.2 (A)
Video "Safety Watch TCL MT43AX" does not provide captions
Captions (Prerecorded) 1.2.2 (A)
Video "Telekom Live Experience für die Safety Watch" does not provide captions
Audio Description or Media Alternative (Prerecorded) 1.2.3 (A)
Video "Safety Watch TCL MT43AX" does not provide audio description
Audio Description or Media Alternative (Prerecorded) 1.2.3 (A)
Video "Telekom Live Experience für die Safety Watch" does not provide audio description
Info and Relationships 1.3.1 (A)
Visual presentation of heading structure does not match code markup
Info and Relationships 1.3.1 (A)
Data table does not use table element
Info and Relationships 1.3.1 (A)
Visual presentation of elements does not match code markup
Info and Relationships 1.3.1 (A)
Content displayed as heading is not using semantic HTML heading element
Info and Relationships 1.3.1 (A)
Improper use of semantic HTML list elements
Info and Relationships 1.3.1 (A)
List content not using HTML list element
Info and Relationships 1.3.1 (A)
Semantic HTML elements are used for styling or layout purposes
Info and Relationships 1.3.1 (A)
Ordered list used for non-ordered list content
Meaningful Sequence 1.3.2 (A)
Visually presented order not matching DOM order
Use of Color 1.4.1 (A)
Links in body copy are indicated by color only
Contrast (Minimum) 1.4.3 (AA)
Text in badge does not have enough contrast
Non-text Contrast 1.4.11 (AA)
"Play" buttons for video pop-ups do not have strong enough color contrast
Text Spacing 1.4.12 (AA)
Changing text spacing lets parts of text spill out of their containers
Keyboard 2.1.1 (A)
FAQ not accessible via keyboard
Keyboard 2.1.1 (A)
Interactive elements are not focusable by keyboard
Keyboard 2.1.1 (A)
Video player controls in dialog windows cannot be operated by keyboard
Keyboard 2.1.1 (A)
Dialog window does not receive keyboard focus
Headings and Labels 2.4.6 (AA)
Heading "So einfach geht's" does not accurately describe content topic / purpose
Headings and Labels 2.4.6 (AA)
Heading "Safety Watch TCL MT43AX" does not accurately describe content topic / purpose
Focus Visible 2.4.7 (AA)
Focus state of FAQ items not visible, as FAQ uses non-interactive <dl> element
Focus Not Obscured (Minimum) 2.4.11 (AA)
Activated dialog window (footnotes) obscure element focus
Target Size (Minimum) 2.5.8 (AA)
Interactive element does not meet minimum target size
Name, Role, Value 4.1.2 (A)
Interactive element does not use correct semantic HTML
Name, Role, Value 4.1.2 (A)
Collapsible button does not use button element
Name, Role, Value 4.1.2 (A)
FAQ not screen reader accessible
Name, Role, Value 4.1.2 (A)
Tabular data not using semantic table element
Unrelated to Success Criteria / Best Practice
Images are not loaded on smaller viewports
Accompanying Files
Observation Details

Certain images are not loaded on viewports below 1296px. Reproducible by setting browser viewport to ≤1295px and reloading the page. This behavior exists on multiple pages and as such is marked a global observation. The following example code is taken from the first missing image on page "IoT-Verteilerseite" in section "Die Kids Watch für die Sicherheit Ihres Kindes":

<div class="teaser__mainvisual teaser__mainvisual--left">
  <img
    class="lazy teaser__mainvisual-image"
    src="data:image/svg+xml;utf8,<svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;&quot; height=&quot;&quot; viewBox=&quot;0 0 1 1&quot;></svg>"
    data-src="https://www.telekom.de/resources/images/1226050/telekom-iot-doorpage-teaser-kidswatch-fruehling.webp"
    alt="Die Kids Watch für die Sicherheit Ihres Kindes"
    title="Die Kids Watch für die Sicherheit Ihres Kindes"
  >
  <noscript>
    <img
      class="teaser__mainvisual-image"
      src="https://www.telekom.de/resources/images/1226050/telekom-iot-doorpage-teaser-kidswatch-fruehling.webp"
      alt="Die Kids Watch für die Sicherheit Ihres Kindes"
      title="Die Kids Watch für die Sicherheit Ihres Kindes"
    />
  </noscript>
</div>

Observations about code markup:

  • Image's src attribute not used to provide image source

  • src attribute includes invalid character(s) (e.g. <)

  • title attribute used and duplicate of alt attribute

  • Unnecessary <noscript> used for image element that should not need javascript to be displayed

  • Image tag missing / before closing >

  • CSS class lazy used instead of image's built-in loading="lazy"

The reason for images not being loaded can be any combination of issues. See remediation notes for one recommendation to fix the issue by using clean, semantic HTML code.

Remediation Notes

Ensure all images are either loaded on page load or correctly lazy loaded later on.

  • Use the image's src attribute for the image source

  • Do not use title attribute on HTML image element

  • Ensure valid HTML code by running a validator tool like W3C NuHtml Validator

  • Keep code consistent (e.g. image with / without trailing / at the end of the tag)

Simplify above-mentioned example code:

<div class="teaser__mainvisual teaser__mainvisual--left">
  <img
    class="teaser__mainvisual-image"
    src="https://www.telekom.de/resources/images/1226050/telekom-iot-doorpage-teaser-kidswatch-fruehling.webp"
    alt="Die Kids Watch für die Sicherheit Ihres Kindes"
    loading="lazy"
  />
</div>
Observation Details

FAQ section cannot be operated (expand / collapse) by keyboard navigation as the interactive elements are custom built and do not use correct semantic HTML. The FAQ accordion uses an HTML description list <dl>. Example code:

<dt class="accordion__term" data-accordion="term" tabindex="0">
  <h3 class="accordion__title">...</h3>
</dt>
<dd
  class="accordion__description accordion__description--hidden"
  data-open-class="accordion__description--open"
  data-hidden-class="accordion__description--hidden"
  data-accordion="description"
>
  <div class="accordion__content">
    <p class="paragraph">...</p>
  </div>
</dd>

Observations about the example code:

  • Description lists consist of terms and descriptions. An FAQ question item can not be considered a term.

  • Setting tabindex="0" to allow keyboard focus of non-interactive element is bad practice and should be avoided

  • data-* attributes in description try to build accordion functionality

  • <div class="accordion__content"> is an unnecessary hierarchy level

  • A CSS paragraph class <p class="paragraph"> should not ever be needed

Remediation Notes

Ensure, using correct semantic HTML elements for all interactive elements. In case of accordions, these could be <detail> and <summary> constructs or ones with <button> as the accordion item "header".

Keyboard navigation is a must.

For custom building an accessible accordion component, please refer to BFIT-Bund Handreichung "Accessible design of user interface elements – Accordion".

Observation Details

FAQ uses non-interactive description list <dl> to build accordion functionality. Using tabindex="0" allows (keyboard) focus of non-interactive <dt> element. Needed accessibility functionality however is not provided. Besides focus, an accordion item must accurately announce its state (collapsed / expanded) and its own interactivity (so the user knows it is operable), and a few more.

Side note: Failure of keyboard accessibility is noted in observation "FAQ not accessible via keyboard" (2.1.1 Keyboard).

Remediation Notes

Building an accordion component from generic HTML elements or using semantic HTML elements with different functionality results in inaccessible user experiences, as a long list of requirements must be met. A few important ones:

  • For the area labeling, the button role must be communicated

  • The parent / child relationships of the elements within the accordion must be communicated

  • The status of the area labels must be communicated

  • The buttons with the area labels must have a concise and expressive Accessible Name

  • It must be possible to access, operate and exit the buttons with the area labels with assistive technology

  • Updates concerning the Accessible Name, value or status of the area labels must be communicated

  • The size and position of the area labels and areas must be communicated

Please see BFIT-Bund Handreichung "Accessible design of user interface elements – Accordion" for full details about necessary steps to build an accordion component, including presentation, operation, programming. Generally, for non-native complex components, functionally closest existing elements should be used (buttons, details/summary, ...).

For remediation recommendation, please also refer to observation "FAQ not accessible via keyboard" (2.1.1 Keyboard).

Observation Details

Image does not have purpose equivalent text alternative. Image shows two specific colors, text alternative generically communicates "in zwei Farben".

Remediation Notes

Ensure, using accurate image descriptions for informative images. Add color names to text alternative.

Accompanying Files
Observation Details

Decorative icons must not have an accessible text alternative set. The decorative icons in question use non-null alt attributes. "List icons" use "Funktion X" as text alternative.

Side note: Besides non-null alt attribute on decorative image, the used text alternative reads "Funktion X" while the actual content does not provide information about any functionality.

Remediation Notes

Ensure, all decorative icons use null alt attributes. Remove the accessible name from decorative images by setting alt="".

Accompanying Files
Observation Details

Store icons are used as functional images for store links. Being functional images, the image's purpose is to describe the function of the link rather than the contents of the image itself.

The icons use text alternatives:

  • App Store

  • Google Play Store

Remediation Notes

Ensure, functional images are using a text alternative that describes the function, rather than the image content. Use

  • "Für Apple iPhone die App XYZ im App Store herunterladen" and

  • "Für Android Handys die App XYZ bei Google Play herunterladen"

Accompanying Files
Observation Details

Decorative icons must not have an accessible text alternative set. The decorative icons in question use non-null alt attributes.

Remediation Notes

Ensure, all decorative icons use null alt attributes. Remove the accessible name from decorative images by setting alt="".

Accompanying Files
Observation Details

Images used in sections do not have purpose equivalent text alternatives. Images duplicate section headings or similar wordings as text alternative.

Remediation Notes

Ensure, using accurate image descriptions for informative images.

Accompanying Files
Observation Details

The video "TCL Connect App herunterladen" (duplicated as video "So einfach geht's") has informative content in audio track but does not provide captions.

Remediation Notes

Spoken word in video's audio must be transcribed and provided as captions for the video. Ideally, captions include speaker information and all informative content, provided in the video's audio, including informative sounds.

Alternatively to captions, a full text transcript can be provided, if this transcript is either in the immediate context of the video or linked to from a link in the immediate context.

Accompanying Files
Observation Details

List content uses generic container elements and numbered icon graphics to simulate list.

Remediation Notes

For all list content, ensure using semantic HTML list elements.

Side note: the list heading does not accurately describe the list's purpose; see 2.4.6 Headings and Labels

Observation Details

Visually presented and logical order is

  1. main heading "Gemeinsam sicher fühlen – Die Telefonuhr mit SOS-Funktion" followed by

  2. the question "Was ist die Safety Watch?".

Text content order in DOM and accessibility tree however is reversed.

Side note: Visual main heading also does not use semantic HTML heading; see observation for 1.3.1 Info and Relationships.

Remediation Notes

Visually presented order should follow the order in code markup. Ensure, the (presented) main heading is placed before the question section in code markup.

Observation Details

Links are only differentiated from normal body text by use of color.

The contrast ratio of link text color and FAQ body text color is not sufficient (2.6:1 < 3:1) as it uses a different body text color (rgb(56, 56, 56)). Links can be found in FAQ items.

Remediation Notes

Ensure, all links do not rely on color alone to be differentiated from (surrounding) body text. Ideally, differences do not rely on color contrast, even when meeting 3:1 color contrast ratio.

Preferably use underline to indicate text links as it is the default –thus user friendly– method.

Accompanying Files
Observation Details

Badge text "Nicht nur für Telekom Kunden" does not have high. enough contrast ratio (2.2:1) against blue badge background.

Remediation Notes

Accompanying Files
Observation Details

The play buttons in video pop-up thumbnails are used as interactive elements to start the video playback. Their colors do not have high enough color contrast ratio against the colored background. A color contrast minimum of 3:1 must be met for all interactive elements, including buttons. The contrast ratio should be met for the whole interactive element as well.

Remediation Notes

Ensure high enough color contrast of all interactive elements. In case of the video play buttons, the possible remediation could be to make the button non-transparent and add a different color outer outline. The so-called "oreo-outline" ensures visibility on both light and dark backgrounds:

outline: 1px solid white;
box-shadow: 0 0 0 3px black;
background-color: white;

To make this work, the play button must be created, using an SVG icon inside the button. You can see an example for this in the video players on audit sample page "Kids Watch".

Accompanying Files
Observation Details

Some text, when text spacing is changed, spills out of its parent containers, making some text hard, other text impossible to read. This includes "shapes", the collapsible element in the stage section and the "Nicht nur für Telekom Kunden" badge.

Remediation Notes

Containers of any type (e.g. badges, teasers, stages) must not use fixed dimensions, if they contain text content.

Accompanying Files
Observation Details

A variety of interactive elements are not focusable by keyboard navigation. This includes the collapsible in main heading section and the link list of different watch functions. The collapsible uses a generic HTML element:

<div class="..." data-subline-addition="expander"></div>

The links in the watch functions link list do not have the obligatory href attribute for HTML link element:

<a data-scroll-trigger="telefonfunktion" data-tealium-rel="..." class="...">
  Telefonfunktion
</a>
Remediation Notes

Ensure, using correct semantic HTML elements for functionality that can be built using native HTML. Use proper HTML links by adding href attributes with target element's ID:

<a href="#telefonfunktion">Telefonfunktion</a>

Consider use of HTML navigation element, as the list functions as on-page navigation to scroll to different sections.

For a collapsible element, ensure using the native details and summary elements:

<details>
  <summary>Eine Safety Watch ist eine Smartwatch, die ...</summary>
  <p>...</p>
</details>
Observation Details

The video player in dialog windows cannot be operated by keyboard. The dialog window can be opened and closed by keyboard but the video player controls are not accessible via keyboard navigation.

Keyboard focus is trapped (also see 2.1.2 No Keyboard Trap) on close button.

Remediation Notes

Ensure keyboard accessibility of all interactive elements.

Accompanying Files
Observation Details

The video "Safety Watch TCL MT43AX" has informative content in audio track but does not provide captions.

Remediation Notes

Spoken word in video's audio must be transcribed and provided as captions for the video. Ideally, captions include speaker information and all informative content, provided in the video's audio, including informative sounds.

Alternatively to captions, a full text transcript can be provided, if this transcript is either in the immediate context of the video or linked to from a link in the immediate context.

Accompanying Files
Observation Details

The video "Safety Watch TCL MT43AX" has visually provided content that is not accessible in a non-visual format.

Remediation Notes

All visually conveyed information must be accessible in a non-visual format. This can be an alternative audio track or a full-text alternative version. This includes scenery, speaker information, etc.

Accompanying Files
Observation Details

Tabular data is displayed with generic container elements. Navigation by row and or column is not possible.

Remediation Notes

Ensure providing proper semantic HTML markup for tabular data, using the HTML <table> element.

Please (also) refer to BFIT-Bund Handreichung "Accessible design of user interface elements – Table" and observation 1.3.1 Info and Relationships – "Semantic HTML" for general remarks about the use of semantic HTML.

Remediation Notes

Ensure visible focus state on all focusable elements. To remediate, consider using semantic HTML elements details & summary as opposed to non-interactive description list element.

Observation Details

Opening a footnote dialog window can obscure underlying focused elements (partially AND completely).

Since the dialog window cannot be closed via ESC in that situation, the underlying element cannot be made visible without removing the keyboard focus from it.

Remediation Notes

Dialog windows must be made accessible. They must trap the keyboard focus when opened and must not allow scrolling of the page and focusing of underlying interactive elements. This will remediate the obscuring of focused elements.

Accompanying Files
Observation Details

Stage section "Gemeinsam sicher fühlen – Die Telefonuhr mit SOS-Funktion" & "Was ist die Safety Watch?" is visually presented as headings but not using HTML heading elements.

Remediation Notes

Ensure, providing proper semantic markup for headings. All headings must use HTML heading elements, all non-headings must not.

Accompanying Files
Observation Details

The heading "So einfach geht's" does not provide any information about the following content. Heading hierarchy into account, the content should be about:

"Die Telefonuhr mit SOS-Funktion für Senioren" → "So einfach geht's"

The actual content however describes a step-by-step guide to activate the Safety Watch.

Remediation Notes

Ensure, using headings that accurately describe the following content. Introducing a step-by-step guide to activate the Safety Watch, a proper heading could be "So aktivieren Sie Ihre Safety Watch"

Accompanying Files
Observation Details

The heading "Safety Watch TCL MT43AX" does not provide any information about the following content. Heading hierarchy into account, the content should be about:

"Die Telefonuhr mit SOS-Funktion für Senioren" → "Safety Watch TCL MT43AX"

The actual content however is a user story video.

Remediation Notes

Ensure, using headings that accurately describe the following content. Introducing a video about a user of the safety watch, a proper heading could be "Wie die Uhr ihr Leben gerettet hat – Eine Nutzerin erzählt".

Accompanying Files
Observation Details

The checkmark and cross icons in data table "Safety Watch & Doro Watch im Vergleich" have no accessible text alternative set. As the icon's purpose is crucial to understanding the content, text alternatives must be present and accessible.

Remediation Notes

Side note: Before remediating text alternative, ensure to refer to observations for success criterion 1.3.1 Info and Relationships and create a proper data table by using semantic HTML table structure.

Ensure, the icons use purpose equivalent text alternatives. Text alternative wording is dependent on the table header column wording as well. Possible text alternatives could be "Ja" for checkmark icon and "Nein" for cross icon. Ensure, wording matches the wording of table header column.

Accompanying Files
Observation Details

The video "Telekom Live Experience für die Safety Watch" has informative content in audio track but does not provide captions.

Remediation Notes

Spoken word in video's audio must be transcribed and provided as captions for the video. Ideally, captions include speaker information and all informative content, provided in the video's audio, including informative sounds.

Alternatively to captions, a full text transcript can be provided, if this transcript is either in the immediate context of the video or linked to from a link in the immediate context.

Accompanying Files
Observation Details

The video "Telekom Live Experience für die Safety Watch" has visually provided content that is not accessible in a non-visual format.

Remediation Notes

All visually conveyed information must be accessible in a non-visual format. This can be an alternative audio track or a full-text alternative version. This includes scenery, speaker information, etc.

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

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

Description list used for accordion (FAQ)

Remediation Notes

Ensure, definition lists are only used for defining terms (<dt>). Refer to BFIT-Bund Handreichung "Accessible design of user interface elements – Accordion" for technical requirements of accessibly implementing an accordion component.

Priority: Best Practice Low Page: Senioren Smartwatch Observation Permalink
Accompanying Files
Observation Details

Ordered lists are used for list content where the order is of importance. This can be step-to-step guides or breadcrumb navigation item lists. Arguably, in list content "Informationen zur Safety Watch zum Drucken:", the order is of no importance.

Priority: Critical Significant Page: Senioren Smartwatch Observation Permalink
Accompanying Files
Observation Details

HTML element <b> is used for text emphasis in badge text content.

Remediation Notes

Ensure proper use of semantic HTML.

  • Elements with needed or wanted functionality use the native HTML element, fitting said functionality

    • Emphasis of text content uses <strong> and <em> instead of <b> and <i>

Alternatively, CSS can be used to style the text content.

Accompanying Files
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 Gemeinsam sicher fühlen – Die Telefonuhr mit SOS-Funktion
  h2 Was ist die Safety Watch?
    h3 Informationen zur Safety Watch zum Drucken
h1 Die Telefonuhr mit SOS-Funktion für Senioren
  h2 Telekom Live Experience für die Safety Watch
  h2 Einfach in Kontakt bleiben – Smartwatch mit Telefonfunktion
  h2 Notfallknopf – SOS-Uhr mit Notfallknopf
  h2 Schnelle Hilfe im Notfall – Smartwatch mit automatischer Sturzerkennung
  h2 Alles unter Kontrolle – Pulsmesser
  h2 Fit im Alltag – Schrittzähler
  h2 Sicherheit auf einen Blick – GPS-Tracking und sichere Bereiche festlegen
  h2 Johanniter – Professionelle Hilfe auf Knopfdruck – Mobiler Hausnotruf mit JohanniterCall
  h2 2 Farben nach Ihrem Geschmack
  h2 Technische Daten
  h2 Kostenlose App – TCL Connect App herunterladen
  h2 So einfach geht's
    h3 Hinweis
    h3 Nicht nur für Telekom Kunden
  h2 Safety Watch TCL MT43AX
    h3 Safety Watch & Doro Watch im Vergleich
    h3 Fragen & Antworten zur Safety Watch
      h4 <!-- FAQ item headings -->

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

h1 Die Telefonuhr mit SOS-Funktion für Senioren
  h2 Telekom Live Experience für die Safety Watch 
  h2 Smartwatch mit Telefonfunktion 
  h2 SOS-Uhr mit Notfallknopf 
  h2 Smartwatch mit automatischer Sturzerkennung 
  h2 Pulsmesser 
  h2 Schrittzähler 
  h2 GPS-Tracking und sichere Bereiche festlegen 
  h2 Mobiler Hausnotruf mit JohanniterCall 
  h2 2 Farben nach Ihrem Geschmack
  h2 Technische Daten
    h3 Wasserdicht
    h3 Akkulaufzeit
    h3 SOS-Taste
    h3 Funktioniert in
    h3 Speicher
    h3 Geeignet für
    h3 Gewicht
    h3 Abmessungen (mm)
  h2 TCL Connect App herunterladen 
  h2 So einfach geht's
  h2 Safety Watch TCL MT43AX
  h2 SAFETY WATCH & DORO WATCH IM VERGLEICH
  h2 Fragen & Antworten zur Safety Watch
    h3 <!-- FAQ item headings -->

Observations:

  • Main heading duplicated by "Gemeinsam sicher fühlen" and "Die Telefonuhr mit SOS-Funktion für Senioren"

  • Heading content "Gemeinsam sicher fühlen" and "Was ist die Safety Watch?" does not use HTML heading element

  • Heading content "Informationen zur Safety Watch zum Drucken", "Hinweis", "Nicht nur für Telekom Kunden" uses generic emphasis (<strong>) instead of heading element

  • "Technische Daten" uses heading elements level 3 for what arguably is simple list content

  • Eyebrows of <h2> headings are not included in heading element, thus logically ordering it under preceding headings

  • Heading "Safety Watch TCL MT43AX" visually presented as higher level heading as the following "SAFETY WATCH & DORO WATCH IM VERGLEICH" and "Fragen & Antworten zur Safety Watch" but uses same heading level (see attached screenshot)

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.

Ensure, not using emphasis elements, like <strong> to display 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

Data table "Safety Watch & Doro Watch im Vergleich" does not use semantic HTML table structure, making it inaccessible to assistive technology.

The current structure has the order of

  1. Column 2 (Safety Watch)

  2. Column 3 (Doro Watch)

  3. Column 1 (Row headings)

Remediation Notes

Ensure proper use of semantic HTML table structure, including proper heading labels for columns and rows.

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

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

Anchor links use <li data-scroll-trigger="scrollTarget"> instead of semantic link element with <a href="#scrollTarget">.


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, using semantic link elements for all link content.

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

The button teaser__subline-expander does not use semantic button element. Instead it uses <div data-subline-addition="expander">.

Remediation Notes

Ensure, using proper semantic HTML button elements for button content.

Alternatively, in this instance, consider using the native <details><summary> structure.