Adresskomponente

Verwendung

Die Komponente ermöglicht die Eingabe vollständiger Adressen. Optional können auch durch bereits vorhandene Daten vorbelegte Felder entweder als rein darstellend und nicht editierbar dargestellt werden, oder als Felder, deren vorbelegte Daten übernommen oder ggf. geändert werden können.

Optionale Felder wie Adresszusätze, Ortsteile etc. können in einem initial geschlossenen Akkordeon dargestellt werden.

Adresse

Straße

Hausnummer

Postleitzahl

Ort

Land

Zusätzliche Adresseingaben (optional)

Ortsteil

Adresszusatz

<div class="row">
  <div class="col-12 col-lg-8">
    <h4>Adresse</h4>
  </div>
</div>
<div class="row">
  <div class="col-12 col-lg-8">
    <div class="row gx-6">
      <div class="col-sm-8">
        <label for="input-text-strasse-1" class="form-label">Straße</label>
        <input type="text" name="input-text-strasse-1" class="form-control" id="input-text-strasse-1">
      </div>
      <div class="col-sm-4 mt-8 mt-sm-0">
        <label for="input-text-hausnummer-1" class="form-label">Hausnummer</label>
        <input type="text" name="input-text-hausnummer-1" class="form-control" id="input-text-hausnummer-1">
      </div>
    </div>
  </div>
  <div class="col-12 col-lg-4 mt-5 mt-lg-0">
    <aside>
      <button class="anchor btn-link" type="button" data-desy-tooltip-help data-bs-toggle="tooltip" data-bs-title="Hallo. Ich bin ein kleiner Tooltiptext…" data-bs-trigger="manual" data-bs-placement="top">
        <span class="ds-icon-info-circle" aria-hidden="true"></span>
        <span class="anchor__text">Dies ist ein Beispiel für die Marginalspalte</span>
      </button>
    </aside>
  </div>
</div>
<div class="row mt-8">
  <div class="col-12 col-lg-8">
    <div class="row gx-6">
      <div class="col-sm-4">
        <label for="input-text-plz-1" class="form-label">Postleitzahl</label>
        <input type="text" name="input-text-plz-1" class="form-control" id="input-text-plz-1">
      </div>
      <div class="col-sm-8 mt-8 mt-sm-0">
        <label for="input-text-ort-1" class="form-label">Ort</label>
        <input type="text" name="input-text-ort-1" class="form-control" id="input-text-ort-1">
      </div>
    </div>
  </div>
</div>
<div class="row mt-8">
  <div class="col-12 col-lg-8">
    <div class="row">
      <div class="col">
        <label for="select-land-1" class="form-label">Land</label>
        <div class="ds-select">
          <select class="form-select" id="select-land-1">
            <option selected value="land-1">Land 1</option>
            <option value="land-2">Land 2</option>
            <option value="land-3">Land 3</option>
          </select>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="row mt-8">
  <div class="col-12 col-lg-8">
    <div class="row">
      <div class="col">
        <div class="ds-accordion">
          <button class="anchor btn-link collapsed w-100" type="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="akkordeon-adresskomponente-1" data-bs-target="#akkordeon-adresskomponente-1">
            <span class="anchor__text">Zusätzliche Adresseingaben (optional)</span>
            <span class="ds-icon-fold-up" aria-hidden="true"></span>
          </button>
          <div class="collapse" id="akkordeon-adresskomponente-1">
            <div class="mt-8">
              <label for="input-text-ortsteil-optional-1" class="form-label">Ortsteil</label>
              <input type="text" name="input-text-ortsteil-optional-1" class="form-control" id="input-text-ortsteil-optional-1">
            </div>
            <div class="mt-8">
              <label for="input-text-adresszusatz-optional-1" class="form-label">Adresszusatz</label>
              <input type="text" name="input-text-adresszusatz-optional-1" class="form-control" id="input-text-adresszusatz-optional-1">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Land

PLZ

Ort

Straße

Hausnummer

Zusätzliche Adresseingaben (optional)

Ortsteil

Adresszusatz

<div class="row mt-8">
  <div class="col-12 col-lg-8">
    <label for="select-poseidon-land-2" class="form-label">Land</label>
    <div class="ds-select">
      <select class="form-select" id="select-poseidon-land-2">
        <option selected value="land-1">Land 1</option>
        <option value="land-2">Land 2</option>
        <option value="land-3">Land 3</option>
      </select>
    </div>
  </div>
</div>
<div class="row mt-8">
  <div class="col-12 col-lg-8">
    <label for="input-text-poseidon-plz-2" class="form-label">PLZ</label>
    <input type="text" name="input-text-poseidon-plz-2" class="form-control" id="input-text-poseidon-plz-2" disabled>
  </div>
</div>
<div class="row mt-8">
  <div class="col-12 col-lg-8">
    <label for="input-text-poseidon-ort-2" class="form-label">Ort</label>
    <input type="text" name="input-text-poseidon-ort-2" class="form-control" id="input-text-poseidon-ort-2" disabled>
  </div>
</div>
<div class="row mt-8">
  <div class="col-12 col-lg-8">
    <label for="input-text-poseidon-strasse-2" class="form-label">Straße</label>
    <input type="text" name="input-text-poseidon-strasse-2" class="form-control" id="input-text-poseidon-strasse-2" disabled>
  </div>
</div>
<div class="row mt-8">
  <div class="col-12 col-lg-8">
    <label for="input-text-poseidon-hausnummer-2" class="form-label">Hausnummer</label>
    <input type="text" name="input-text-poseidon-hausnummer-2" class="form-control" id="input-text-poseidon-hausnummer-2" disabled>
  </div>
</div>
<div class="row mt-8">
  <div class="col-12 col-lg-8">
    <div class="row">
      <div class="col">
        <div class="ds-accordion">
          <button class="anchor btn-link collapsed w-100" type="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="akkordeon-poseidon-2" data-bs-target="#akkordeon-poseidon-2">
            <span class="anchor__text">Zusätzliche Adresseingaben (optional)</span>
            <span class="ds-icon-fold-up" aria-hidden="true"></span>
          </button>
          <div class="collapse" id="akkordeon-poseidon-2">
            <div class="mt-8">
              <label for="input-text-poseidon-ortsteil-optional-2" class="form-label">Ortsteil</label>
              <input type="text" name="input-text-poseidon-ortsteil-optional-2" class="form-control" id="input-text-poseidon-ortsteil-optional-2">
            </div>
            <div class="mt-8">
              <label for="input-text-poseidon-adresszusatz-optional-2" class="form-label">Adresszusatz</label>
              <input type="text" name="input-text-poseidon-adresszusatz-optional-2" class="form-control" id="input-text-poseidon-adresszusatz-optional-2">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Land

PLZ

Ort

Ortsteil

Straße

Hausnummer

Adresszusatz

<div class="row mt-8">
  <div class="col-12 col-lg-8">
    <label for="select-poseidon-land-3" class="form-label">Land</label>
    <div class="ds-select">
      <select class="form-select" id="select-poseidon-land-3">
        <option selected value="land-1">Land 1</option>
        <option value="land-2">Land 2</option>
        <option value="land-3">Land 3</option>
      </select>
    </div>
  </div>
</div>
<div class="row mt-8">
  <div class="col-12 col-lg-8">
    <label for="input-text-poseidon-plz-3" class="form-label">PLZ</label>
    <input type="text" name="input-text-poseidon-plz-3" class="form-control" id="input-text-poseidon-plz-3" disabled>
  </div>
</div>
<div class="row mt-8">
  <div class="col-12 col-lg-8">
    <label for="input-text-poseidon-ort-3" class="form-label">Ort</label>
    <input type="text" name="input-text-poseidon-ort-3" class="form-control" id="input-text-poseidon-ort-3" disabled>
  </div>
</div>
<div class="row mt-8">
  <div class="col-12 col-lg-8">
    <label for="input-text-poseidon-ortsteil-3" class="form-label">Ortsteil</label>
    <input type="text" name="input-text-poseidon-ortsteil-3" class="form-control" id="input-text-poseidon-ortsteil-3" disabled>
  </div>
</div>
<div class="row mt-8">
  <div class="col-12 col-lg-8">
    <label for="input-text-poseidon-strasse-3" class="form-label">Straße</label>
    <input type="text" name="input-text-poseidon-strasse-3" class="form-control" id="input-text-poseidon-strasse-3" disabled>
  </div>
</div>
<div class="row mt-8">
  <div class="col-12 col-lg-8">
    <label for="input-text-poseidon-hausnummer-3" class="form-label">Hausnummer</label>
    <input type="text" name="input-text-poseidon-hausnummer-3" class="form-control" id="input-text-poseidon-hausnummer-3" disabled>
  </div>
</div>
<div class="row mt-8">
  <div class="col-12 col-lg-8">
    <label for="input-text-poseidon-adresszusatz-3" class="form-label">Adresszusatz</label>
    <input type="text" name="input-text-poseidon-adresszusatz-3" class="form-control" id="input-text-poseidon-adresszusatz-3">
  </div>
</div>

Barrierefreiheit

Das zugeordnete Label eines Text-Inputs oder Select bildet den sogenannten „Accessible Name“ und wird von Screenreadern zusammen mit der Rolle des Elements vorgelesen.

Relevante BITV-Anforderungen

Weitere Attribute

disabled: Inaktive Elemente sind visuell deutlich als solche gekennzeichnet, z. B. wenn sie in der Applikationslogik aufgrund fehlender vorhergehender Auswahlen noch nicht aktiv sein können. Erwartetes Verhalten in gängigen Hilfsmitteln ist, dass diese nicht Bestandteil der Tab-Reihenfolge sind, aber mit den gängigen Vorlese-Methoden erkundet werden können.
readonly: Readonly-Felder sind in der Tab-Reihenfolge enthalten und haben eine eigenständige Gestaltung, die ihren Zustand eindeutig kommuniziert, aber auch von aktiven oder inaktiven Feldern unterscheidbar macht.
autofocus: Von der Verwendung dieses Attributs zur automatischen Fokussierung von Formularelementen durch den Browser wird in den meisten Anwendungsfällen abgeraten. Begründete Ausnahmen kann es in Fällen geben, wenn eine Maske mit hoher Wahrscheinlichkeit genau diesen einen Zweck verfolgt, wie dies zum Beispiel bei einer Such-Seite der Fall sein kann.
accesskey: Das accesskey-Attribut darf in öffentlich zugänglichen Anwendungen nicht verwendet werden, da es signifikante Probleme in der Barrierefreiheit hervorruft. Weitere Informationen dazu finden Sie bei MDN accesskey.
tabindex: Das tabindex-Attribut darf nicht mit positiven Werten verwendet werden, sondern nur zum Fokusmanagement oder zur Herstellung der Tastaturbedienbarkeit von nicht auf Standardelementen basierten Widgets (tabindex="0" oder tabindex="-1"). Weitere Informationen dazu finden Sie bei MDN tabindex.

Testhinweise & Akzeptanzkriterien

Beschreibung: Ein Label beschreibt den Eingabezweck.
Eine Kennzeichnung als Pflichtfeld muss fachlich festgelegt werden.
Name: Das Attribut for="$IDREF" ist am Label vergeben und zeigt auf das korrekte Formularelement mit der entsprechenden ID.
Zustände: Default, Fokussiert, Inaktiv (disabled).
Fokus: Erhält einen deutlich sichtbaren Fokus bei Tastaturbedienung bzw. Swipe auf Touch-UIs.
Aktion: Standard-Tasten zur Texteingabe der jeweiligen Plattform.
Darstellung: Der Schriftgrad kann Browser- oder Systemseitig um bis zu 200 % vergrößert werden, ohne dass Informationen verloren gehen. Bis zu 400 % müssen Inhalte so umbrechen, dass sie ohne horizontales Scrollen verfügbar sind.

Adresseingabe

Rolle: Wird in den Screenreadern JAWS, NVDA und VoiceOver als „Eingabefeld“ identifiziert. Inputs mit disabled-Attribut werden in JAWS und NVDA als „Eingabefeld nicht verfügbar“, in VoiceOver als „Eingabefeld grau dargestellt“ ausgegeben.
Tastatur- & Maus-Bedienung:: Gemeinsam mit dem zugeordneten Label, fokussiert wird immer das Formularelement, nicht das Label. Das dem Label zugeordnete Formularelement reagiert grundsätzlich nur auf die Standard-Tasten bzw. -Tastenkombinationen der jeweiligen Betriebssysteme.
Sprachbedienung:: Der Sprachbefehl mit dem sichtbaren Label-Text fokussiert das zugeordnete Formularelement.

Länderauswahl

Tastatur- & Maus-Bedienung:: Gemeinsam mit dem zugeordneten Formular-Element, fokussiert wird immer das Control, nicht das Label. Das dem Label zugeordnete Formularelement reagiert grundsätzlich nur auf die Standard-Tasten bzw. -Tastenkombinationen der jeweiligen Betriebssysteme. Bei fokussierten select werden die Optionen per Leertaste geöffnet, Pfeiltasten ↑ und ↓ bewegen durch diese, Leertaste oder Enter übernehmen den per Pfeiltasten ausgewählten Wert und schließen das select-Element; esc schließt die Optionen ohne einen Wert zu übernehmen.

Adresskomponente

Verwendung

Design

Ab dem Breakpoint XS (≥ 0px)

Ab dem Breakpoint SM (≥ 576px)

Ab dem Breakpoint MD (≥ 768px)

Ab dem Breakpoint LG (≥ 992px)

Ab dem Breakpoint XL (≥ 1200px)

Adresse

Barrierefreiheit

Relevante BITV-Anforderungen

Weitere Attribute

Testhinweise & Akzeptanzkriterien

Adresseingabe

Länderauswahl