Label, Überschriften & Formulare

Label & Überschriften

Information- & Navigationsarchitektur Header & Footer Überschriften & Label

Webseiten haben einen Titel, der Thema oder Zweck beschreibt. (Level A)

WCAG 2.1

Überschriften & Label

Überschriften und Labels beschreiben ein Thema oder einen Zweck. (Stufe AA)

WCAG 2.1

Überschriften & Label

Abschnittsüberschriften werden genutzt, um den Inhalt zu gliedern. (Level AAA)

WCAG 2.1

Bilder & Slideshow Animation Buttons & Links Überschriften & Label Diagramme Allgemeines

Bei User Interface Elementen mit Beschriftungen, die Text oder Bilder von Text enthalten, enthält der Name den Text, der visuell dargestellt wird. (Level A)

WCAG 2.1

Überschriften & Label

Beschriftungen (Labels) oder Anweisungen: Wenn der Inhalt eine Eingabe durch den Benutzer verlangt werden Beschriftungen (Labels) oder Anweisungen bereitgestellt. (Level A)

WCAG 2.1

Buttons & Links Schhnittstellen-Elemente allgemein Überschriften & Label Formulare & Textblöcke Allgemeines

Name, Rolle, Wert: Für alle Bestandteile der Benutzerschnittstelle (einschließlich: Formularelemente, Links und durch Skripte generierte Komponenten) können Name und Rolle durch Software bestimmt werden; Zustände, Eigenschaften und Werte, die vom Benutzer festgelegt werden können, können durch Software festgelegt sein; und die Benachrichtigung über Änderungen an diesen Elementen steht den Benutzeragenten zur Verfügung, einschließlich assistierender Techniken. (Level A)

WCAG 2.1

Information- & Navigationsarchitektur Überschriften & Label Listen, Tabellen & Akkordeons

Inhalte sind durch Absätze und Überschriften logisch zu strukturieren. Aufzählungen mit mehr als drei Punkten sind durch Listen zu gliedern.

BITV 2.0

Überschriften & Label

Jedes Fenster sollte einen verständlichen Titel haben, den es nicht mit einem anderen zum gleichen Zeitpunkt von derselben Software angezeigten Fenster gemeinsam hat; dies gilt selbst dann, wenn mehrere Fenster unterschiedliche Ansichten desselben Benutzungsschnittstellen-Elementes zeigen.

ISO 9241-171

Überschriften & Label

Plattformsoftware, die Fenster verwaltet, sollte sicherstellen, dass alle zum gegebenen Zeitpunkt auf dem System befindlichen Fenster unterschiedliche Titel haben.

ISO 9241-171

Überschriften & Label

Geben Sie jedem Bildschirm einen eindeutigen Titel und stellen Sie Überschriften zur Verfügung, die Abschnitte in Ihrer Informationshierarchie identifizieren. Wenn Menschen auf einen Bildschirm kommen, ist der Titel die erste Information, die sie von einer assistiven Technologie erhalten. Um den Leuten die Struktur Ihrer Anwendung verständlich zu machen, erstellen Sie für jeden Bildschirm einen eindeutigen Titel, der den Inhalt oder Zweck der Anwendung prägnant beschreibt. In ähnlicher Weise benötigen die Benutzer genaue Abschnittsüberschriften, die ihnen helfen, eine mentale Karte der Informationshierarchie jedes Bildschirms zu erstellen.

Apple Inc.

Überschriften & Label

Elemente können unter Überschriften gruppiert werden, die vermitteln, was die Gruppierungen sind. Diese Gruppen organisieren Inhalte räumlich.

Google

Responsive & Gestaltungsraster Schrift & Text Überschriften & Label
Zwei iPhones mit unterschiedlichen Schriftgrößen und Schriftschnitten bei denen sich das Layout vom Mailprogramm auf die Veränderungen anpasst.

Verwenden Sie Dynamic Type und testen Sie, ob sich das Layout Ihrer Anwendung an alle Schriftgrößen für Barrierefreiheit anpasst. Mit Dynamic Type können Benutzer die für sie geeignete Schriftgröße auswählen.

Apple Inc.

Überschriften & Label
Linkes Bild zeigt ein Ui ohne Label bei einem Schalter und das rechte Bild zeigt dieses UI mit Label.

Links: Ohne An/Aus-Labels

Rechts: Mit An/Aus-Labels

Bevorzugen Sie den vom System bereitgestellten Schalter. Für einige Leute ist es jedoch durch das Hinzufügen von Labels einfacher zu erkennen, ob ein Schalter ein- oder ausgeschaltet ist.

Apple Inc.

Icons & Illustration Überschriften & Label
In dem Bild sind Icons zu sehen in einem UI. Sie tragen keinen Namen, sind jedoch versteckt gelabert, damit Screenreader die Funktion auslesen können.

Damit die Benutzer von Bildschirmleseprogrammen wissen, welche UI-Elemente angetippt werden können, ermöglichen Sie es Bildschirmleseprogrammen, die Namen von Komponenten laut vorzulesen. Das contentDescription-Attribut kann Komponenten (wie Schaltflächen, Icons und Registerkarten) hinzugefügt werden, die Icons ohne sichtbaren Text enthalten.

Links: 1. Beschriften Sie das Suchsymbol; 2. Beschriften Sie das Mikrofonsymbol

Rechts: 1. Beschriften Sie das Bearbeitungssymbol; 2. Beschriften Sie das Chat-Symbol

Google

Schhnittstellen-Elemente allgemein Überschriften & Label
Links ist die korrekte Verwendung einer Beschreibung zu sehen. Links im Bild eine fehlerhafte.

Links-Korrekt: Verwenden Sie kurze Beschreibungen.

Rechts-Falsch: Normalerweise sollte der Steuerungstyp nicht angegeben werden, das zusätzliche Label ist überflüssig.

Google

Überschriften & Label
Links ist wieder die korrekte Verwendung einer Beschreibung zu sehen. Links im Bild eine fehlerhafte.

Links-Korrekt: Verwenden Sie kurze Beschreibungen.

Rechts-Falsch: Vermeiden Sie, den aktuellen Zustand mit einzubeziehen, in diesem Fall, dass Wi-Fi "ausgewählt" ist.

Google

* Die angegebenen Preise sind Endpreise. Aufgrund der Kleinunternehmerregelung gemäß § 19 UStG erfolgt kein Ausweis von Umsatzsteuer.

Formulare & Textblöcke

Formulare & Textblöcke Tests und Captchas Suche & Filter

Der Zweck jedes Eingabefeldes, das Informationen über den Benutzer sammelt, wird programmatisch festgelegt. (Level AA)

WCAG 2.1

Schrift & Text Formulare & Textblöcke

Für die visuelle Präsentation von Textblöcken gibt es einen Mechanismus, um das Folgende zu erreichen (Level AAA):

  • Vorder- und Hintergrundfarben können vom Benutzer ausgewählt werden
  • Die Breite beträgt nicht mehr als 80 Zeichen oder Glyphen (40 wenn es sich um CJK handelt)
  • Text ist nicht im Blocksatz ausgerichtet (sowohl links- als auch rechtsbündig ausgerichtet)
  • Der Zeilenabstand (Durchschuss) ist mindestens 1,5-fach innerhalb von Paragraphen und der Paragraphenabstand ist mindestens 1,5-fach so groß wie der Zeilenabstand
  • Die Textgröße kann ohne assistierende Technik bis auf 200 Prozent skaliert werden und zwar so, dass der Leser nicht horizontal scrollen muss, um eine Textzeile in einem bildschirmfüllenden Fenster zu lesen

WCAG 2.1

Buttons & Links Schhnittstellen-Elemente allgemein Formulare & Textblöcke Listen, Tabellen & Akkordeons Suche & Filter

Wenn das Daraufbewegen und anschließende Entfernen vom Zeiger oder Tastaturfokussierung dazu führt, dass zusätzliche Inhalte sichtbar und dann versteckt werden, gilt Folgendes Level AA):

  • Entlassung: Es steht ein Mechanismus zur Verfügung, um den zusätzlichen Inhalt zu verwerfen, ohne den Mauszeiger oder den Tastaturfokus zu bewegen, es sei denn, der zusätzliche Inhalt vermittelt einen Eingabefehler oder verdeckt oder ersetzt andere Inhalte nicht
  • Hoverable: Wenn die Zeigerbewegung den zusätzlichen Inhalt auslösen kann, dann kann der Zeiger über den zusätzlichen Inhalt bewegt werden, ohne dass der zusätzliche Inhalt verschwindet
  • Persistent: Der zusätzliche Inhalt bleibt so lange sichtbar, bis der Schwebe- oder Fokusauslöser entfernt wird, der Benutzer ihn ablehnt oder seine Informationen nicht mehr gültig sind. Ausnahme: Die visuelle Darstellung der zusätzlichen Inhalte wird durch den User-Agent gesteuert und wird vom Autor nicht verändert.

WCAG 2.1

Formulare & Textblöcke Tests und Captchas

Wenn eine authentifizierte Sitzung abläuft, kann der Benutzer die Handlung nach der erneuten Authentifizierung ohne Datenverlust fortführen. (Level AAA)

WCAG 2.1

Formulare & Textblöcke Suche & Filter

Web-Inhalte schränken die Verwendung der auf einer Plattform verfügbaren Eingabemodalitäten nicht ein, es sei denn, die Einschränkung ist wesentlich, zur Gewährleistung der Sicherheit des Inhalts erforderlich oder zur Einhaltung von Benutzereinstellungen erforderlich. (Level AAA)

WCAG 2.1

Formulare & Textblöcke Fehlermeldungen, Hilfe & Hinweise

Fehlervermeidung (rechtliche, finanzielle, Daten): Für Webseiten, die eine für den Benutzer auftretende rechtliche Verpflichtung oder finanzielle Transaktion zur Folge haben, die Benutzer-gesteuerte Daten in Datenspeicherungssystemen ändern oder löschen oder die Testantworten des Benutzers abschicken, gilt mindestens eines der Folgenden (Level AA):

  • Reversibel: Versendete Daten sind reversibel
  • Geprüft: Vom Benutzer eingegebene Daten werden auf Eingabefehler überprüft und der Benutzer erhält die Gelegenheit, diese zu korrigieren
  • Bestätigt: Es gibt einen Mechanismus, um Informationen zu überprüfen, zu bestätigen und zu korrigieren, bevor sie endgültig abgesendet werden.

WCAG 2.1

Buttons & Links Schhnittstellen-Elemente allgemein Überschriften & Label Formulare & Textblöcke Allgemeines

Name, Rolle, Wert: Für alle Bestandteile der Benutzerschnittstelle (einschließlich: Formularelemente, Links und durch Skripte generierte Komponenten) können Name und Rolle durch Software bestimmt werden; Zustände, Eigenschaften und Werte, die vom Benutzer festgelegt werden können, können durch Software festgelegt sein; und die Benachrichtigung über Änderungen an diesen Elementen steht den Benutzeragenten zur Verfügung, einschließlich assistierender Techniken. (Level A)

WCAG 2.1

Schhnittstellen-Elemente allgemein Formulare & Textblöcke Tests und Captchas
Linker Teil des Bildes zeigt eine App mit 0einem richtigen Standard-Plattform-Dialog. Die rechte Seite zeigt einen falschen nicht standardisierten Dialog.

Links-Korrekt: Verwenden Sie native Elemente, wie z.B. den Standard-Plattform-Dialog.

Rechts-Falsch: Seien Sie vorsichtig bei der Verwendung von nicht standardisierten Elementen, wie z.B. einem nicht standardisierten Plattformdialog zur Durchführung einer Standard-Dialogaufgabe. Es erfordert zusätzliche Tests, um gut mit assistierender Technologie zu arbeiten.

Google

* Die angegebenen Preise sind Endpreise. Aufgrund der Kleinunternehmerregelung gemäß § 19 UStG erfolgt kein Ausweis von Umsatzsteuer.