14 issues found on Travel Surf

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

• 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

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

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

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.

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

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.

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.

Use semantic list for all list content.

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