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

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

Testhinweise & Akzeptanzkriterien

Adresseingabe

Länderauswahl