Praxisleitfaden Braille und zugängliche Namen

Braille-Beschriftungen mit Text abgleichen

Ergänzen Sie fehlende Namen und prüfen Sie die Braille-Ausgabe im Kontext.

aria-braille-equivalentWCAG 4.1.2

Sehen Sie, was sich durch die Korrektur ändert.

Beispiel im Prüfbericht
Manueller Prüfhinweis · Manuell prüfen · WCAG 4.1.2Braille-Text ohne zugänglichen Namen

Prüfhinweis verstehen

Nur die Braille-Beschriftung ist vorhanden

Schematische Einordnung des Befunds
Manueller Prüfkandidat

Scanner-Signal

button[aria-braillelabel="Karte"] hat keinen zugänglichen Namen.

Technische Einordnung

Regel
aria-braille-equivalent
Referenz
WCAG 4.1.2

Die leere Schaltfläche im Importfach besitzt aria-braillelabel="Karte". Ein gewöhnlicher zugänglicher Name fehlt. Axe meldet diese Fundstelle als unvollständig geprüft; die fachliche Bewertung bleibt manuell.

Bedeutung im Nutzungskontext

Wer die Schaltfläche über Sprachausgabe oder ihre sichtbare Beschriftung identifizieren möchte, erhält hier keine Bezeichnung. Eine besondere Braille-Beschriftung allein deckt diese Zugänge nicht ab.

Vorher am ausgewählten Element
Sichtbarer Text: leer
Zugänglicher Name: leer
aria-braillelabel: Karte
Prüfstatus: manuelle Prüfung erforderlich

Braille-Vergleich einplanen

Planen Sie die Prüfung von normaler Beschriftung, Braille-Ausgabe und tatsächlicher Funktion gemeinsam.

Rechenbeispiel · Braille-Textgegenstücke

Ihre Annahmen für die manuelle Prüfung

Ganze Zahl von 1 bis 10.000.

Ganze Zahl von 1 bis 120.

6 Seiten × 10 Minuten pro Seite60 Minuten1 Std. 0 Min. manuelle Prüfzeit unter diesen Annahmen.
  • Annahme: eine relevante Schaltfläche je Seite.
  • Annahme: zehn Minuten für Sprach- und Braille-Vergleich je Seite; Geräte eingerichtet.
  • Korrektur und weitere Bedienwege sind nicht enthalten.

Das ist keine gemessene Prüfzeit und kein Vergleich mit der Scanner-Geschwindigkeit. Inhaltliche Beurteilungen bleiben manuelle Arbeit.

Welche Textentsprechung fehlt?

Unterscheiden Sie den Namen eines Elements von einer besonderen Beschreibung seiner Rolle.

Umsetzungen im Vergleich
FallWann trifft er zu?Passende Umsetzung
Braille-Name ohne normalen NamenEin Element hat aria-braillelabel, aber keinen zugänglichen Namen. Ergänzen Sie eine passende Beschriftung am selben Element, vorzugsweise sichtbaren Text. Im Beispiel lautet sie „Karte“.
Braille-Rolle ohne Rollenbeschreibungaria-brailleroledescription steht ohne entsprechende aria-roledescription am Element. Prüfen Sie den Bedarf der besonderen Rollenbeschreibung und ergänzen Sie gegebenenfalls ihr verständliches Textgegenstück.
Keine besondere Braille-Ausgabe nötigDie reguläre Beschriftung vermittelt bereits die benötigte Information. Prüfen Sie, ob Sie das zusätzliche Braille-Attribut entfernen können. Der zugängliche Name muss unabhängig davon erhalten bleiben.

Fundstelle betrachten

Die namenlose Schaltfläche im Importfach

Der Ausschnitt enthält die vollständige Quellenablage mit Überschrift, Beschreibung und benachbarten Einträgen.

Der BefundBraille-Text ohne zugänglichen Namen

In der oberen Reihe steht zwischen Routenskizze und leerem Nachbareintrag eine unbeschriftete Schaltfläche. Ihr HTML enthält „Karte“ ausschließlich als Braille-Text. Die anderen unvollständigen Elemente gehören nicht zur gezeigten Korrektur.

Beispiel im Prüfbericht Manuell nachprüfen
Manueller Prüfhinweis · Manuell prüfen · WCAG 4.1.2Braille-Text ohne zugänglichen Namen

Textgegenstück ergänzen

Den Namen als sichtbaren Text bereitstellen

Die bestehende Schaltfläche erhält den Text „Karte“. Bei diesem nativen button liefert der Inhalt zugleich den zugänglichen Namen. Der vorhandene Braille-Text bleibt für den anschließenden manuellen Vergleich erhalten.

  1. Fundstelle zuordnen

    Ordnen Sie den Vorher-Code dem betroffenen Element Ihrer Website zu.

  2. Änderung umsetzen

    In der Komponente Bearbeiten Sie die Beschriftung der tatsächlichen Schaltfläche. Text an einem unverbundenen Eltern- oder Nachbarelement benennt sie nicht automatisch.

    KorrekturvergleichHTML der Schaltfläche

    Vorher

    <button class="kinte-source-card"
      aria-braillelabel="Karte"></button>

    Nachher

    <button class="kinte-source-card"
      aria-braillelabel="Karte">Karte</button>

    Markierte Zeilen wurden geändert

  3. Änderung nachprüfen

    Prüfen Sie das geänderte Element im Nutzungskontext manuell. Der Code allein bestätigt das Ergebnis nicht.

In der Anwendung umsetzen

Name und Funktion gemeinsam prüfen

Ein vorhandener Name hilft erst, wenn er die tatsächliche Aufgabe verständlich bezeichnet.

  1. 1

    Ermitteln Sie die reale Aktion der Schaltfläche. Die Kalibrierseite belegt hier eine Beschriftung, keine funktionierende Kartenaktion.

  2. 2

    Prüfen Sie im Accessibility-Baum, welcher Name berechnet wird. Ein vorhandenes aria-label kann sichtbaren Text übersteuern.

  3. 3

    Halten Sie Übersetzungen und dynamische Beschriftungen zusammen: Änderungen am normalen Namen dürfen die Braille-Fassung nicht inhaltlich veralten lassen.

  4. 4

    Beurteilen Sie eine verkürzte Braille-Fassung im Nutzungskontext. Gleiche Bedeutung verlangt nicht zwingend identische Zeichenfolgen.

Fehlkorrekturen vermeiden

Was eine reine Attributkorrektur übersieht

Nur aria-braillelabel ändern

Ein anderer Braille-Text gibt der weiterhin leeren Schaltfläche noch keinen gewöhnlichen zugänglichen Namen.

Ein beliebiges aria-label einsetzen

Ein technisch vorhandener Name kann die falsche Funktion nennen. Prüfen Sie die Handlung und den sichtbaren Kontext.

Jedes Element zusätzlich beschriften

Eine gesonderte Braille-Fassung braucht einen konkreten Nutzen. Prüfen Sie zuerst, ob die reguläre Ausgabe bereits ausreicht.

Den Re-Test als Abschluss behandeln

Die automatische Strukturprüfung bestätigt weder eine verständliche Braille-Ausgabe noch die Bedienbarkeit der Schaltfläche.

Name ergänzt, manuelle Prüfung bleibt offen

Nach der Änderung erkennt Axe am selben Element einen zugänglichen Text. Das Beispiel bleibt als Korrekturbeispiel mit erforderlicher manueller Prüfung gekennzeichnet.

Im Beispiel dokumentiert

Korrekturbeispiel · Manuell nachprüfen

Der sichtbare Text Karte benennt jetzt die Schaltfläche; aria-braillelabel bleibt Karte.

Was Sie zusätzlich beurteilen müssen

Die Aufnahme zeigt eine korrigierte Beschriftung. Eine manuelle Prüfung mit Braillezeile wurde hier nicht durchgeführt; sie belegt keine vollständige Erfüllung von WCAG 4.1.2.

Struktur automatisch, Bedeutung manuell prüfen

Prüfauftrag für Ihre Umsetzung

  • Kontrollieren Sie auf der veröffentlichten Seite den sichtbaren Text und den berechneten Namen der Schaltfläche.
  • Fokussieren Sie sie mit Screenreader und Braillezeile. Vergleichen Sie Sprachausgabe und Braille-Ausgabe mit ihrer tatsächlichen Funktion.
  • Prüfen Sie, ob „Karte“ im konkreten Ablauf eindeutig ist und ob die besondere Braille-Beschriftung gebraucht wird.
Beispiel im Prüfbericht Manuell nachprüfen
Korrekturbeispiel · Manuell nachprüfenZugänglicher Name ergänztVergleichen Sie manuell die Sprach- und Braille-Ausgabe mit der tatsächlichen Funktion der Schaltfläche.
Nachher am selben Element
Sichtbarer Text: Karte
Zugänglicher Name: Karte
aria-braillelabel: Karte
Redaktioneller Status: Korrekturbeispiel
Braille-Ausgabe und tatsächliche Funktion: manuell zu prüfen

Prüfgrenzen kennen

Struktur automatisch, Bedeutung manuell prüfen

Der Scanner lokalisiert fehlende Textgegenstücke. Für die tatsächliche Ausgabe braucht es eine Prüfung mit Hilfsmitteln.

Automatisch prüfbar

  • Braille-Attribute ohne erforderliches Textgegenstück erkennen
  • Die betroffene Schaltfläche mit Selektor und Seitenkontext zuordnen
  • Nach der Änderung dieselbe Regel am selben Element erneut ausführen

Im Kontext zu entscheiden

  • Die Bedeutung von normaler und Braille-Beschriftung vergleichen
  • Ausgabe und Bedienung mit Screenreader und Braillezeile prüfen
  • Entscheiden, ob eine eigene Braille-Fassung nötig und verständlich ist

Werbung

Kostenloser Website-Barrierefreiheits-Check

Website auf Barrierefreiheit prüfen.

Technische WCAG-Warnsignale erkennen. Kritische Stellen zuerst prüfen.

Der Website-Check ist bereit.

Werbung

Ein letzter Schritt

Prüfen, bevor Sie gehen.

Finden Sie automatisch erkennbare Barrieren auf Ihrer eigenen Website.

Website prüfen

Kostenlos starten · keine Installation

Automatisches Screening. Tastaturbedienung und Screenreader bleiben manuelle Prüfung.