Page URL
https://www.telekom.de/unterwegs/tarife-und-optionen/roaming/telefonieren-sms-ins-ausland

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 has text alternative
Info and Relationships 1.3.1 (A)
Visual presentation of elements does not match code markup
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)
Interactive element's focus state indicated by color only
Use of Color 1.4.1 (A)
Interactive element's active state indicated by color only
Reflow 1.4.10 (AA)
Text content needs two-dimensional scrolling on smaller viewports
Non-text Contrast 1.4.11 (AA)
Pagination dot does not have enough color contrast
Text Spacing 1.4.12 (AA)
Text content overflows containers with user changed text spacing
Focus Order 2.4.3 (A)
Visually hidden elements in focus order are not shown on focus
Focus Order 2.4.3 (A)
User-activated dynamic content not in correct focus order
Headings and Labels 2.4.6 (AA)
Main page function has no heading
Focus Not Obscured (Minimum) 2.4.11 (AA)
Elements in collapsed accordion are focused; focus is not visible
Labels or Instructions 3.3.2 (A)
No or no accurate visible label present
Name, Role, Value 4.1.2 (A)
Interactive element does not use correct semantic HTML
Name, Role, Value 4.1.2 (A)
Form selection changes displayed content; changes are not announced to assistive technology
Name, Role, Value 4.1.2 (A)
Interactive element uses non-semantic HTML
Accompanying Files
Observation Details

Text content in dialog window "Länder der EU" does not properly reflow and needs two-dimensional scrolling to access all content.

Remediation Notes

Ensure, all content properly reflows on all viewports of at least ≥ 320 px viewport width.

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

Elements that are visually hidden, including but not limited to

  • skip links

  • interactive elements in dialog windows

  • interactive elements in collapsed accordion items

should not receive keyboard focus.

Remediation Notes

Ensure, visually hidden elements cannot receive keyboard focus.

Especially elements in collapsed accordion items, non-active tabs, and un-opened dialog windows should not receive keyboard focus.

If they can receive keyboard focus, the elements must be made clearly visible on receiving keyboard focus. This is a common method to hide skip links and un-hide them on keyboard focus, using e.g. a CSS class visually-hidden with selector .visually-hidden:not(:focus):not(:active).

Remediation Notes

Ensure all focused elements can be visually identified as focused

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 and all links in FAQ items.

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

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:

  • Buttons (magenta and outline buttons)

  • Input elements (radio buttons)

  • Accordion items

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.

Accompanying Files
Observation Details
  • Carousel pagination dots do not meet 3:1 contrast ratio between active (magenta) and inactive (gray) interactive elements.

Remediation Notes

Accompanying Files
Observation Details

Carousel Pagination Dot does not have high enough color contrast ratio to its background.

Remediation Notes

Ideally the contrast ratio from button to background will meet color contrast ratio 3:1.

Another option is to outline the button and let the outline meet the color contrast ratio requirements instead. On light background colors, the button can simply take a outline: 1px solid black to meet required minimum contrast ratio. The ratio is then calculated from this outline to the background color instead of the muted gray button itself.

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

Text content emphasized by use of <b> or <i> elements.

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>

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änder der EU", "1", "2", "Ländergruppe EU", ...

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

Accompanying Files
Observation Details

The radio button fieldsets at the top of the page do not properly use input labels.

  • "Sie sind Mobilfunk" is no proper German; while this alone is not part of this success criterion, it should be ensured to use proper language to describe input elements

  • "MagentaMobil - Tarif Zeitraum" has no visible 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 Vertragskunde oder Prepaidkunde sind

The same foes for the second fieldset. Here, the user can be guided to make it easy to choose the right option:

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:

<form>
<div>
  <fieldset>
    <legend>
      Wählen Sie, ob Sie Vertragskunde oder Prepaidkunde sind
    </legend>
    <div>
      <div>
        <input id="kunde" name="kunde" type="radio" value="vertrag">
        <label for="kunde">
          Ich bin Vertragskunde
        </label>
      </div>
      <div>
        <input id="kunde-2" name="kunde" type="radio" value="prepaid">
        <label for="kunde-2">
          Ich bin Prepaidkunde
        </label>
      </div>
    </div>
  </fieldset>
</div>

<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 nach dem DD.MM.YYYY abgeschlossen
    </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>
</form>
Observation Details

Main page function of form and display of tariff options has no separate heading and as such is grouped solely under main heading "Günstig ins Ausland telefonieren". As this is not a failure of this success criterion, the observation is marked Priority 5 – Best Practice. Consider evaluation of text content structure / outline. Heading structure is the most used navigation method for users of assistive technology on a given page. Heading structure might be used to guess existing page content. This might be done by checking the main outline first, getting main heading and structure of page by level 2 headings, which would result in the following list:

  • Günstig ins Ausland telefonieren

    • Alle Preisinformationen für Ihr Zielland

    • Häufig gestellte Fragen zum Telefonieren und SMS-Versenden ins Ausland

The user might navigate to "Alle Preisinformationen" first, skipping the intended main purpose content of the page. By giving the user explicit content structure, grouping all relevant content under at least a level 2 heading, keeping the base content below main heading level for introductory / descriptive content only, the user is more likely to (more easily or at all) find the important content.

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:

  • Main image "Alle Infos zu Roaming"

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

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:

  • Tariff option card icons

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

Observation Details

Buttons use <a href="#"> instead of semantic button element.

  • Dialog windows "Ländergruppe"


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 href=""><button>

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

Observation Details
  • Tariff carousel pagination buttons use <span>

  • FAQ item buttons use div role="button" instead of button 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

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.

Observation Details

Changing radio selection in form will change the displayed tariff option cards. The content change is not announced to assistive technology.

Remediation Notes

The changes in content must be properly announced to assistive technology (e.g. by use of ARIA live regions) or explained prior to changes being applied.

The easiest option would be a description at the beginning of the form.

<p>Wählen Sie ihren Tarif aus, damit Ihnen alle passenden Tarifoptionen angezeigt werden können. Die Optionen werden automatisch in der nachstehenden Liste angezeigt.</p>

<!-- FORM CONTENT -->