Anfrage

Topics

Barrierefreiheit im Web: Wie beschriftet man Gruppen von Optionsfeldern oder Kontrollkästchen richtig?

  • column

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



Lieblingsfrucht>






Apfel>

Mandarine>

Banane>

Kontrollkästchen

<div class="form-group">
  <span id="fruit-group">好きな果物</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>
      <label><input type="checkbox" name="fruit" value="banana">バナナ</label>
    </div>

<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.





Lieblingsfrucht>

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!

Verfasst von

Er wechselte von Desktop-Publishing in die Webwelt und entwickelte sich schnell zu einem wahren Meister seines Fachs mit umfassenden Kenntnissen in Markup, Frontend-Design, Webentwicklung und Barrierefreiheit. Seit der Gründung von Liberogic ist er in verschiedenen Bereichen aktiv und gilt im Unternehmen mittlerweile als wandelndes Lexikon. In letzter Zeit beschäftigt er sich intensiv mit Effizienzsteigerungen durch den Einsatz von Eingabeaufforderungen und fragt sich: „Können wir uns bei der Barrierefreiheit stärker auf KI verlassen?“ Seine Technologien und sein Denken entwickeln sich stetig weiter.

Futa

IAAP-zertifizierter Spezialist für Webzugänglichkeit (WAS) / Markup-Ingenieur / Frontend-Entwickler / Webdirektor

Artikel dieses Mitarbeiters ansehen

Wir sind stolz auf unsere zuverlässige Teamstruktur und unsere schnelle Reaktionsfähigkeit.

Bei Liberogic treiben unsere erfahrenen Mitarbeiter Projekte proaktiv voran, weshalb wir bei unseren Kunden hohes Ansehen genießen.
Wir stellen sicher, dass Projektmanager und -leiter ordnungsgemäß eingesetzt werden, um einen reibungslosen Ablauf des gesamten Projekts zu gewährleisten. Wir verhindern unnötige Kostensteigerungen durch vollständige Zusagen und weisen Ressourcen den richtigen Personen an den richtigen Stellen zu. Wir sind bekannt für unsere Schnelligkeit, mit der wir Arbeitsinhalte erfassen, Kostenvoranschläge erstellen und einreichen.

※Bitte beachten Sie, dass wir keine Vor-Ort-Arbeit im SES-Stil aktiv durchführen.

Wir unterstützen fast alle wichtigen Projektmanagement- und Chat-Tools, darunter Slack, Teams, Redmine, Backlog, Asana, Jira, Notion, Google Workspace, Zoom und Webex.

Haben Sie Probleme mit der Barrierefreiheit im Internet?

Für Anfragen zur Barrierefreiheit unserer Website klicken Sie bitte hier.

Fallstudie