• Labels bei Form-Elementen

    Benennung:
    Form elements must have labels – Form Elemente müssen Labels besitzen

    Schwierigkeit / Umsetzung:

    Einfach

    User-Experience / Nutzen:

    Hoch

    Seo Faktor/ Boost:

    Ja – leichte Auswirkung

    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


    War dieser Artikel hilfreich?

    14 Likes

Schreibe ein Kommentar

Web-Guru 1.2 von Christopher Rohde
Im Web-Guru Online-Verzeichnis finden Sie Tutorials und Anleitungen für Webseiten-, Server- und Suchmaschinen- Optimierungen. Wir zeigen Ihnen die einfachsten und effektivsten Wege für Optimierungen und achten dabei auf Suchmaschinen-Richtlinien, WC3 und Lighthouse.