Important Notice: This website shows interim results and does not represent a complete accessibility audit. The content is not final, is under heavy development, and is not legally binding. The website and all its content is for internal use only; unauthorized use or distribution may result in legal consequences.

Documentation of accessibility observations for Deutsche Telekom – Mobilfunk & OneShop

20 issues found on Travel Mobil Optionen

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

Issues List

Non-text Content 1.1.1 (A)
Image is decorative but has text alternative
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)
Visual presentation of heading structure 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)
Text Buttons 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
Contrast (Minimum) 1.4.3 (AA)
Hovered text button does not have enough color contrast
Resize text 1.4.4 (AA)
Text content needs two-dimensional scrolling when text is enlarged
Reflow 1.4.10 (AA)
Text content needs two-dimensional scrolling on smaller viewports
Text Spacing 1.4.12 (AA)
Text content overflows containers with user changed text spacing
Keyboard 2.1.1 (A)
Interactive element, operable by mouse, not accessible by keyboard
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)
No accurate main heading is used
Focus Not Obscured (Minimum) 2.4.11 (AA)
Elements in collapsed accordion are focused; focus is not visible
Name, Role, Value 4.1.2 (A)
Interactive element does not use correct semantic HTML
Name, Role, Value 4.1.2 (A)
Interactive element uses non-semantic HTML
Priority: Minor Low Page: Travel Mobil Optionen 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:

  • Frau und Mann genießen die Vorteile der Travel Mobil Optionen am Strand

  • Zwei junge Frauen am Strand freuen sich über die Travel Mobil Optionen

  • Junge Frau genießt die Vorteile der Travel Mobil Optionen

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 Mobil Option" 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 "happy people, traveling". 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

    • "Mann und Frau stehen am Strand und schauen lächelnd auf ein Handy"

    • "Zwei junge Frauen schauen lächelnd in die Kamera. Sie stehen an einem Strand"

    • "Junge Frau mit Sonnenbrille sonnt sich am Strand und schaut auf ein Handy"

Priority: Moderate Low Page: Travel Mobil Optionen 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

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 Mobil Optionen 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 Mobil Optionen Observation Permalink
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>

Priority: Serious Low Page: Travel Mobil Optionen Observation Permalink
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.

Priority: Serious Low Page: Travel Mobil Optionen Observation Permalink
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.

Priority: Serious Low Page: Travel Mobil Optionen Observation Permalink
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:

  • Magenta buttons

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

Priority: Serious Low Page: Travel Mobil Optionen Observation Permalink
Accompanying Files
Observation Details

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

Remediation Notes

Priority: Serious Low Page: Travel Mobil Optionen Observation Permalink
Accompanying Files
Observation Details

Text content in dialog window "Länderliste" 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.

Priority: Serious Low Page: Travel Mobil Optionen Observation Permalink
Accompanying Files
Observation Details

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

Remediation Notes

Ensure, all content properly reflows with text enlarged to 200%.

Priority: Serious High Page: Travel Mobil Optionen Observation Permalink
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.

Priority: Moderate Low Page: Travel Mobil Optionen Observation Permalink
Remediation Notes

Ensure all focused elements can be visually identified as focused

Priority: Serious Medium Page: Travel Mobil Optionen Observation Permalink
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).

Priority: Serious High Page: Travel Mobil Optionen 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..."

  • 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 Mobil Optionen Observation Permalink
Accompanying Files
Observation Details

Buttons use <a href="#"> or missing href attribute completely, instead of semantic button element.

  • Dialog windows "Länderliste..."

  • Dialog windows "Zum Wunschtermin buchen"

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.

Priority: Critical Medium Page: Travel Mobil Optionen Observation Permalink
Observation Details

  • Tariff carousel pagination buttons use <span>

  • "Zum Wunschtermin buchen" dialog window buttons use <a>, omitting href attribute

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

Priority: Serious Low Page: Travel Mobil Optionen Observation Permalink
Accompanying Files
Observation Details

Hovering text buttons "Länderliste" dialog windows will change text color to rgb(0, 130, 178), lowering color contrast ratio to background to fall slightly below required minimum.

Priority: Critical Low Page: Travel Mobil Optionen Observation Permalink
Observation Details

  • "Zum Wunschtermin buchen" buttons use non-semantic HTML and as such are not focusable and operable by keyboard

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)

Remediation Notes

Ensure, using native, semantic HTML elements for interactive elements and not re-building existing functionality with generic elements like <div> and <span>.

Ensure, choosing the proper elements, depending on purpose (e.g. links, using <a href=""> to link to resources, and <button> to perform actions).

This way, the need for added JavaScript (e.g. on click events / event handlers) and ARIA methodologies is reduced to a minimum, which will ensure clean and simple code and backwards compatibility, will future-proof functionality, and will avoid issues with keyboard navigation or other assistive technology (see also 4.1.2 Name, Role, Value).

Priority: Serious Low Page: Travel Mobil Optionen Observation Permalink
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:

  h2 Travel Mobil Optionen - Basispakete
    h3 Travel Mobil Basic
    h3 Travel Mobil Basic World
  h2 Travel Mobil Optionen - Komfortpakete
    h3 Travel Mobil
    h3 Travel Mobil World
  h2 Ihre Vorteile
    h3 Sorglos und sicher reisen
    h3 Bequeme Vorbereitung
    h3 Bestmögliche Netzabdeckung
    h3 Günstig und einfach in Kontakt bleiben
  h2 Buchung
    h3 So einfach buchen Sie unsere Travel Mobil Optionen
      h4 Wunschtermin über die kostenlose Hotline buchen
      h4 Sofortbuchung über Kundencenter & MeinMagenta-App
      h4 Sofortbuchung per SMS
  h2 Alle Preisinformationen für Ihr Reiseland
  h2 Häufig gestellte Fragen zu den Travel Mobil Optionen
    h3 <!-- FAQ ITEMS -->

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

h1 Travel Mobil Optionen - Basispakete
  h2 Travel Mobil Basic
  h2 Travel Mobil Basic World
  h2 Travel Mobil Optionen - Komfortpakete
  h2 Travel Mobil
  h2 Travel Mobil World
  h2 Ihre Vorteile
    h3 Sorglos und sicher reisen
    h3 Bequeme Vorbereitung
    h3 Bestmögliche Netzabdeckung
    h3 Günstig und einfach in Kontakt bleiben
  h2 Buchung
    h3 So einfach buchen Sie unsere Travel Mobil Optionen
      h4 Wunschtermin über die kostenlose Hotline buchen
      h4 Sofortbuchung über Kundencenter & MeinMagenta-App
      h4 Sofortbuchung per SMS
  h2 Alle Preisinformationen für Ihr Reiseland
  h2 Häufig gestellte Fragen zu den Travel Mobil Optionen
    h3 <!-- FAQ ITEMS -->

Observations for heading structure:

  • No heading exists to describe the whole page (main heading) – see 2.4.6 Headings and Labels

  • No heading is visually presented as main heading; if taking first heading as main heading, there would either be one more hierarchy level to every following heading or there would be multiple main headings

  • Heading "Buchung" has single sub-heading; sub-heading "So einfach buchen Sie..." does not add useful structure

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.

Priority: Serious Low Page: Travel Mobil Optionen Observation Permalink
Observation Details

Sub-Heading "Travel Mobil Optionen - Basispakete" uses main heading <h1> while not accurately describing whole page content / purpose.

This leads to more issues further down the heading hierarchy. Given the programmatically determinable heading structure:

h1 Travel Mobil Optionen - Basispakete
  h2 Travel Mobil Basic
  h2 Travel Mobil Basic World
  h2 Travel Mobil Optionen - Komfortpakete
  h2 Travel Mobil
  h2 Travel Mobil World
  h2 Ihre Vorteile
    h3 Sorglos und sicher reisen
    h3 Bequeme Vorbereitung
    h3 Bestmögliche Netzabdeckung
    h3 Günstig und einfach in Kontakt bleiben
  h2 Buchung
    h3 So einfach buchen Sie unsere Travel Mobil Optionen
      h4 Wunschtermin über die kostenlose Hotline buchen
      h4 Sofortbuchung über Kundencenter & MeinMagenta-App
      h4 Sofortbuchung per SMS
  h2 Alle Preisinformationen für Ihr Reiseland
  h2 Häufig gestellte Fragen zu den Travel Mobil Optionen
    h3 <!-- FAQ ITEMS -->

All tariff options are using <h2> headings, logically making "Travel Mobil" and "Travel Mobil World" Komfortpakete also sub headings of "Basispakete". Looking at heading hierarchy for Komforpaket "Tarvel Mobil World", we get this:

  1. Travel Mobil Optionen - Basispakete

    1. Travel Mobil World

While intended structure would be more like this:

  1. Travel Mobil Optionen

    1. Komfortpakete

      1. Travel Mobil World

Same goes for all other content. Headings "Vorteile" and "Buchung" logically are placed as content for "Basispakete" only, and looking at the heading structure / outline, there is no way to access information about "Komfortpakete" at all.

Remediation Notes

Ensure, a main heading <h1> is used to describe the whole page content / purpose.

Ensure, for all content, heading hierarchy accurately describes purpose or content.