Beschreibung:

Diese Anleitung handelt um die Input-Erweiterung von Kontaktformularen, Newsletter-Eintragungen oder sonstigen Formularen. Welche auch – meines Erachtens – zu den Seo-Onpage Faktoren gehört. Um Screenreadern und anderen Technologien das Erkennen von Eingabebereichen zu ermöglichen, müssen diese eindeutig und einzigartig getagged werden. Dazu gibt es für Besucher sichtbare und nicht-sichtbare Möglichkeiten, wichtig ist, dass jeder Tag nur einmalig genutzt ist. Erweitern Sie die Inputs Ihrer Formulare folgend: (Empfehlung ist die 2. Möglichkeit).

Sichtbare Anwendung:

1. Label Feld zuweisen – hierbei wird vor dem Input Feld nochmals ein Labelfeld hinzugefügt, welches folgend aussieht:

<label for="name">Name: </label>
<input type="text" name="name" id="name">
<button type="submit">senden</button>

Nicht sichtbare Anwendung:

2. Input Feld mit Aria-Label – hierbei wird ein Input Feld mit dem aria-label Tag erweitert:

<input type="text" name="name" aria-label="name">
<button type="submit">senden</button>

3. Label-Feld zuweisen mit Visually-Hidden – ähnlich wie bei der sichtbaren Label-Erweiterung, allerdings wird hierbei der Tag nicht sichtbar:

<label for="name" class="visuallyhidden">name: </label>
<input type="text" name="name" id="name">
<button type="submit">senden</button>

CSS zu Visually-Hidden – da Zuordnungen in der CSS wie display:none oder visually:hidden Probleme (bei der Suchmaschinen-Wertung und Screenreadern) verursachen können, muss dies in der CSS hinzugefügt werden:

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

Weitere Informationen unter: Form Elements Axe