Page URL
https://www.telekom.de/unterwegs/tarife-und-optionen/roaming/travel-surf

Issues List

Non-text Content 1.1.1 (A)
Image text alternative does not serve equivalent purpose
Non-text Content 1.1.1 (A)
Image is decorative but is accessible to assistive technology
Non-text Content 1.1.1 (A)
Image text alternative does not serve equivalent purpose
Info and Relationships 1.3.1 (A)
Visual presentation of elements does not match code markup
Info and Relationships 1.3.1 (A)
Improper use of semantic HTML list elements
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
Use of Color 1.4.1 (A)
Text Buttons are indicated by color only
Use of Color 1.4.1 (A)
Interactive element's focus state indicated by color only
Content on Hover or Focus 1.4.13 (AA)
Tooltips not dismissible
Focus Order 2.4.3 (A)
User-activated dynamic content not in correct focus order
Labels or Instructions 3.3.2 (A)
No or no accurate visible label present
Name, Role, Value 4.1.2 (A)
Interactive element uses non-semantic HTML
Unrelated to Success Criteria / Best Practice
Simple content hidden in dialog window
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:

  • Frau macht Foto in New York und surft mit Travel & Surf mobil im Internet

Images' text alternative include "SEO content" instead of accurately describing image content or purpose.

Note: This is not a strict failure of the success criterion 1.1.1 Non-text Content and as such is marked Priority 4 – Minor. It may be argued, connecting the image description to the "Travel & Surf" is the purpose of the images. Rather than trying these argumentation, it is better practice to only include actually visible content of the image when using image description, as the more likely intended purpose of the image is to generally show "people, traveling / tourist activity". As an observation Priority 4 – Minor, please see remediation notes as best practice recommendation.

Remediation Notes
  • Ensure purpose equivalent text alternatives are present for every non-decorative image.

  • Ensure, no "extra" information is added to an image alt attribute that is not part of the image; this means more accurate description of the images could be

    • "Frau macht mit dem Handy ein Foto von der New York Skyline"

Priority: Critical Low Page: Travel Surf Observation Permalink
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 are Step-by-Step guide images for "Buchen Sie Travel & Surf Pässe"

Remediation Notes
  • Ensure purpose equivalent text alternatives are present for every non-decorative image.

  • Text alternative may be presented as text content instead of alt attribute; ensure, all informative content is then available in nearby text content and use a null alt attribute alt="" to declare image decorative to assistive technology

Priority: Moderate Low Page: Travel Surf Observation Permalink
Accompanying Files
Observation Details

Purely decorative images must not have an accessible text alternative present. They must be excluded from the accessibility tree.

Decorative images with text alternative present:

  • Icons "Ländergruppen"

Remediation Notes

Ensure, all purely decorative images are not accessible by assistive technology. Depending on the way, in image is embedded, the following methods can be used to remove it from the accessibility tree:

  • HTML image element: Set a null alt attribute as follows: <img alt="" />; do not use ARIA to hide the HTML image element

  • HTML SVG element: Remove the SVGs <title> element or keep it empty and use ARIA to explicitly hide the element to ensure highest compatibility across browsers and assistive technology: <svg aria-hidden="true">

Priority: Moderate Low Page: Travel Surf Observation Permalink
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

Priority: Critical Significant Page: Travel Surf Observation Permalink
Accompanying Files
Observation Details

Text content emphasized by use of CSS.

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> or CSS only

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 all body copy links.

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.

Observation Details

Text buttons solely rely on color to be differentiated from other, surrounding text content and color contrast ratio of text buttons text color to surrounding text color does not meet minimum required 3:1 color contrast ratio. Text buttons, relying on color only and with insufficient color contrast ratio to surrounding text content include "Länderliste" dialog window trigger buttons.

Remediation Notes

Ensure, links and text buttons 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.

Observation Details

Focusing interactive element adds visual focus indicator that does solely rely on color to be differentiated from default, un-focused state and color contrast ratio of default and focused states does not meet minimum required 3:1 color contrast ratio. Interactive elements' focus states, relying on color only and with insufficient color contrast ratio to default, un-focused state include:

  • Dropdown / Selection list "Reiseland"

  • Radio buttons

Remediation Notes

Ensure, focus states of interactive elements can be differentiated from default, un-focused states by at least one other visually perceivable factor. The issue may be remediated by ensuring high enough color contrast ratio of 3:1 for difference between states.

Preferably though, use focus outlines to indicate focus state of interactive elements, as it is browser default and known pattern to users.

Priority: Serious High Page: Travel Surf Observation Permalink
Observation Details

When dynamically added content can be activated by the user, correct focus order must be ensured. This includes:

  • Opening a dialog window

    • "Länderliste..."

    • ! Footnote "Pässe jetzt schon im Inland reservieren unter pass.telekom.de!" (does not use global footnote)

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

Ländergruppe Dialog windows do not set focus on triggering element after being closed; use semantic dialog elements instead.

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.

Priority: Critical Low Page: Travel Surf Observation Permalink
Accompanying Files
Observation Details

The radio button fieldset at the top of the page does not properly use input label.

  • "MagentaMobil - Tarif Zeitraum" has no visible label

  • Side note: "Wählen Sie Ihr Reiseland aus" is HTML heading, used as label for input element; input element itself has no programmatically determinable label

Remediation Notes

Ensure, all form elements use visually presented labels that match the accessible name of the input. The label must be visible at all times.

Side note:

In the given form, due to wordings, terminology, and explicit question of specific dates, the small form might lessen user experience. A better approach to ask a "A/B" question is to word like this:

Wählen Sie, ob Sie einen aktuellen Tarif oder einen älteren Tarif haben

You might include hints by using aria-describedby and you want to re-word options as well, if necessary. A full example could look like this:

<div>
  <fieldset aria-describedby="tariff-hint">
    <legend>
      Wählen Sie, ob Sie einen aktuellen Tarif oder einen älteren Tarif haben
    </legend>
    <div id="tariff-hint">
      Aktuelle Tarife wurden sind MagentaMobil-Tarife, die nach dem DD.MM.YYYY abgeschlossen wurden und MagentaMobil Young Tarife, die nach dem DD.MM.YYYY abgeschlossen wurden.
    </div>

    <div>
      <div>
        <input id="tariff" name="tariff" type="radio" value="recent">
        <label for="tariff">
          Ich habe einen aktuellen Tarif
        </label>
      </div>
      <div>
        <input id="tariff-2" name="tariff" type="radio" value="old">
        <label for="tariff-2">
          Ich habe einen älteren Tarif
        </label>
      </div>
    </div>
  </fieldset>
</div>

For the "Reiseland" selection / dropdown, use semantic HTML input elements as well (see 4.1.2 Name, Role, Value) and use accurate labeling:

<div>
  <label for="location">
    Reiseland auswählen
  </label>

  <div id="location-hint">
    Das Land, in das Sie reisen oder reisen werden
  </div>

  <select id="location" name="location" aria-describedby="location-hint">
    <option value="Auswählen" selected>Reiseland auswählen</option>
    <option value="afghanistan">Afghanistan</option>

    <!-- MORE COUNTRY OPTIONS -->
  </select>
</div>
Priority: Critical Medium Page: Travel Surf Observation Permalink
Accompanying Files
Observation Details
  • Selection input element uses generic HTML elements instead of <select> element


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.

Remediation Notes

Ensure using semantic HTML instead of generic elements. For a selection element, the following markup provides a starting point:

<div>
  <label for="location">
    Reiseland auswählen
  </label>

  <div id="location-hint">
    Das Land, in das Sie reisen oder reisen werden
  </div>

  <select id="location" name="location" aria-describedby="location-hint">
    <option value="Auswählen" selected>Reiseland auswählen</option>
    <option value="afghanistan">Afghanistan</option>

    <!-- MORE COUNTRY OPTIONS -->
  </select>
</div>

Using non-native, non-semantic HTML elements to build functionality, native, semantic HTML elements already provide should be a rare occasion. As the first rule of ARIA use describes, if there is a semantic HTML with needed or wanted functionality this should always be used instead of ARIA.

Ensure, semantic HTML elements are used for all interactive elements and components. Refer to BFIT-Bund Handreichung "Accessible design of user interface elements" for technical requirements for building interactive user interface components. Ensure to especially look at dropdown list / selection list.

Observation Details

Tooltips in radio buttons are not dismissible;

Side note: using interactive elements, like tooltips, inside other interactive elements, like radio buttons, increases difficulty to access all content. Nesting interactive elements like this should be avoided wherever possible.

Remediation Notes

As the tooltip only duplicates already existing text content, it should be completely removed. Additional explanations can be added to the input element via aria-describedby.

Accompanying Files
Observation Details

What is arguably list content, does not use semantic HTML list elements.

  • "Step by step guide" list in section "Buchen Sie Travel & Surf Pässe"

Remediation Notes

Use semantic list for all list content.

Priority: Best Practice Low Page: Travel Surf Observation Permalink
Accompanying Files
Observation Details

The footnote dialog window "Pässe jetzt schon im Inland reservieren unter pass.telekom.de!" only has the content "Nur mit dem Handy und ohne WLAN". Hiding this little content inside a dialog window lessens user experience and should be avoided. Hiding content in dialog windows should be done only for content that is not required to understand main content.

Remediation Notes

Instead of using a dialog window, the text content can be put into existing text content.