21 issues found on Sonim XP100

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

Text content must meet minimum color contrast ratio of 4.5:1 to its background. Large text (>24px) content must meet minimum color contrast ratio of 3:1 to its background. The following text content does not meet the required minimum contrast ratios:

• Interactive elements (links, buttons) on hover and focus

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

• vertical space on the page after "Preisübersicht" is sticky < 400px

• vertical space in the tariff carousel < 400px. ("Tarif ändern" dialog window)

• horizontal space, due to page zoom, is limited and cuts of hover tooltips ("Tarif ändern" dialog window)

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

On base viewport size of 320×256px and page zoom of 100%, the available vertical space of the page, after the "Preisübersicht" is fixed to the bottom, is just 8px, making the page completely unusable.

• Tooltips in tariff carousel ("Tarif ändern" dialog window) are not dismissible.

• Tooltips in tariff carousel ("Tarif ändern" dialog window) 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.

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

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.

No functionality must rely on dragging movements alone. A single pointer gesture must be made available as an alternative. The animated image 360° view is only accessible by dragging movement.

Interactive element can be operated by mouse but not by keyboard. The issue may occur when:

• Non-semantic HTML elements (e.g. <div>, <span>) are used for interactive purposes (e.g. links, buttons, inputs), instead of semantic HTML elements (e.g. <a href="">, <button>). This often also leads to other issues, concerning 4.1.2 Name, Role, Value.

• Semantic elements are used but required attributes are missing (e.g. <a>, missing href attribute)

• Semantic HTML elements are mis-used (e.g. <a> used as a button, or <button> used as a link)

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:

• Wissenswertes zum Sonim XP100

• Unkomplizierte Kommunikation – immer und überall

• Ein Akku, der durchhält

The HTML image element must always use have alt attribute present. Either

• null alt attribute for purely decorative or

• non-null alt attribute for informative/functional images.

Image elements missing alt attribute:

• Netzteil

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

• >20 occurrences of <br> found in code markup (including multiples in various dialog windows)

What is arguably list content, is not using semantic list elements. See

• Checklist in "Tarif- und Gerätepreis"

• "Spezifikationen" accordion item

These mis-matches happen with improper use of semantic HTML or lack thereof. Content, visually presented in a certain way, communicating certain purpose or functionality, uses mis-matched HTML elements.

This occurs in two "directions". Visually presented as X, using element Y, and using element X, while content is non-X content. The former includes:

• Emphasis via <b>

• Links, using HTML elements other than <a href="">

• Buttons, using HTML elements other than <button>

• Input elements, not using appropriate semantic HTML elements for e.g. selects or text inputs with type attributes

• Headings, using HTML elements other than <h1> - <h6>

• Lists, not using <ul>, <ol>, <dl>

• ...

The latter includes, using semantic HTML elements for content that does not fit the semantically conveyed role of that element, includes:

• Lists for non-list content

• Headings for non-heading content

• ...

Improper use of semantic HTML leads to numerous issues for many users, also affecting other success criteria at the same time, including those, ensuring keyboard navigation and accessible use of assistive technology.

A landmark with role "complementary" should not be nested inside another landmark

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 Sonim XP100
  h2 Farbe
  h2 Speichergröße
    h3 Gesamtpreis des Geräts
    h3 Geld sparen mit dem Handyankauf
  h2 Tarif- und Gerätepreis
  h2 Produktinformationen
    h3 Netzteil
    h3 Herstellerangaben
      h4 Kontaktdaten
      h4 Produktsicherheit
  h2 Spezifikationen
    h3 Hardware und Schnittstellen
    h3 Farben
    h3 Speichergrößen
    h3 Marke
    h3 Betriebssystem
  h2 Sonim XP100 Highlights auf einen Blick
    h3 Wissenswertes zum Sonim XP100
    h3 Unkomplizierte Kommunikation – immer und überall
    h3 Ein Akku, der durchhält
    h3 Praktisches Design für den Alltag
    h3 Einfache, vielseitige Bedienung
    h3 Maximale Netzkompatibilität für zuverlässige Verbindungen
  h2 Lieferumfang
  h2 Vorteile im Überblick
    h3 Handyankauf
    h3 MagentaEINS Vorteil

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

h1 Sonim XP100
  h2 <!-- EMPTY -->
    h3 Spezifikationen
  h2 Spezifikationen
  h2 Sonim XP100 Highlights auf einen Blick
    h3 Vorteile im Überblick
      h4 Handyankauf
      h4 MagentaEINS Vorteil

Observations for heading structure:

• Heading content not using heading elements

• Empty heading level 2 found

• Nested heading level 3 inside empty heading level 2

• Duplicated heading "Spezifikationen" found

• Hierarchy is not logical (see 2.4.6 Headings and Labels)

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 body copy links and links in various dialog windows.

Fixed bottom bar in "Tarif ändern" dialog window obscures element focus

Device rotation animation starts automatically but has no mechanism to pause, stop, hide that is made clear to the user.

Elements include multiple buttons that do not use semantic button elements, including:

• "Farbe" button

• "Speichergröße" button

• Close button in "Handyankauf" dialog window

All interactive elements that do not use native, 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 non-semantic 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.

Buttons using link elements and vice versa, Link elements without text. Link elements without href attribute, with empty href attribute or using href attribute not for link target.

Including:

• "Preisübersicht anzeigen"

• "Tarif ändern"

• "Tarif entfernen"

• "Zurück" in "Handyankauf" dialog window

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.