18 issues found on Telefonieren SMS Ins Ausland

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

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.

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

Ensure all focused elements can be visually identified as focused

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.

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.

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.

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

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>

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.

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>

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

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

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.

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.

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