Beim Erstellen eines Formulars können Sie dielabelWaren Sie schon einmal verwirrt, wie Sie mit Gruppen umgehen sollen? Insbesondere, wie Sie die gesamte Gruppe beschriften undforManchmal habe ich Schwierigkeiten damit, mit Attributen umzugehen.
Dieses Mal werden wir die Kennzeichnung dieser Gruppen organisieren und spezifische Methoden vorstellen.
Gängige Anzeigemethoden und Probleme
Zum ersten ArtikelforPunkt
Für Gruppen von Optionsfeldern oder Kontrollkästchen,<label>vonforAuf diese Weise kann ein Attribut auf das erste Element verweisen.
Beispielsweise der folgende Code:
Optisch sieht es gut aus, aber die Beschriftung „Lieblingsfrucht“ wird vom Screenreader nicht richtig angezeigt.Es wird nur mit dem ersten Optionsfeld verknüpft.Daher wird die gesamte Gruppe nicht richtig erkannt.
forNicht angeben
Durch diesen Ansatz ist insbesondere für Benutzer, die Bildschirmleseprogramme verwenden, unklar, auf welches Element sich die Beschriftung bezieht.Welche Optionen mit den Beschriftungen verbunden sind, ist unklar.Es wird so.
Das sind gute Verbesserungsideen
Gruppieren nach Rollenattribut und Bezeichnung mit aria-labelledby
Optionsfelder und Kontrollkästchenrole="radiogroup"oderrole="group"und verknüpfen Sie das Element mit dem Label, dessen ID durch aria-labelledby angegeben wird. Dadurch wird für Screenreader deutlich, dass das Label „Lieblingsfrucht“ für die gesamte Gruppe gilt.
Optionsfeld
<div class="form-group">
<span id="fruit-group">好きな果物</span>
<div>
<div role="radiogroup" aria-labelledby="fruit-group">
<label><input type="radio" name="fruit" value="apple>りんご</label>
<label><input type="radio" name="fruit" value="orange>みかん</label>
Kontrollkästchen
<div class="form-group">
<span id="fruit-group">Fruchtgruppe</span>
<div>
<div role="group" aria-labelledby="fruit-group">
<label><input type="checkbox" name="fruit" value="apple>りんご</label>
<label><input type="checkbox" name="fruit" value="orange>みかん</label>
<fieldset>Und<legend>Anwendung
Eine andere Möglichkeit besteht darin,<fieldset>Und<legend>Dieser Ansatz basiert auf der HTML-Semantik und stellt sicher, dass die gesamte Gruppe ordnungsgemäß erkannt wird, ohne dass spezielle Attribute oder Rollen erforderlich sind.
Im folgenden Beispiel erstellen wir eine Gruppe von Optionsfeldern.<fieldset>und als Etikett<legend>Ich verwende.
※ Hinweis! : Es kann vorkommen, dass Sie Beschriftung und Eingabe nebeneinander anordnen möchten. Verwenden Sie in solchen Fällen „fieldset“.display: contents;Dies wird jedoch nicht empfohlen, da einige Browser die Legende aus dem Barrierefreiheitsbaum entfernen. Es ist nicht gut, das Layout zwangsweise an CSS auszurichten und dadurch die Barrierefreiheit zu verlieren.
Zusammenfassung
Die Beschriftung von Gruppen von Optionsfeldern oder Kontrollkästchen kann wie folgt organisiert werden:
Verwenden des Rollenattributs und aria-labelledby
- Flexible Anpassung bei Bedarf möglich
- Setzen Sie die Gruppenbezeichnung explizit in Kombination mit role="group"
<fieldset>Und<legend>Anwendung
- Ein Standardansatz basierend auf Semantik
- Ermöglicht robustere und zugänglichere Implementierungen
- Bei einigen Layouts gibt es Probleme mit der Barrierefreiheit
Je nach Design und Anforderungen können Sie durch die Wahl einer der beiden Methoden eine angemessene Barrierefreiheit erreichen.
<fieldset>Und<legend>ist semantischer, aber im Fall eines Anfrageformulars können beispielsweise das Rollenattribut und aria-labelledby aufgrund der allgemeinen Layoutstruktur einfacher zu verwenden sein.
Die Barrierefreiheit im Internet liegt noch in der Zukunft!
Er wechselte vom DTP in die Welt des Webs und war im Handumdrehen ein „Meister der Technik“, der sich auch mit Markup, Front-End, Regie und Barrierefreiheit auskannte. Seit der Gründung von Liberogic ist er in vielen Bereichen aktiv und ist heute ein lebendes Wörterbuch innerhalb des Unternehmens. In letzter Zeit beschäftigt er sich intensiv mit der Erforschung von Möglichkeiten zur Effizienzsteigerung durch die umfassende Nutzung von Eingabeaufforderungen und fragt sich: „Können wir uns bei der Barrierefreiheit stärker auf KI verlassen?“ Sowohl seine Technologie als auch sein Denken entwickeln sich ständig weiter.
Futa
Markup-Ingenieur / Front-End-Ingenieur / Web-Zugänglichkeits-Ingenieur / Web-Direktor