label-in-name
Beschriftung im Namen: Der zugängliche Name enthält den sichtbaren Text
Prüft, dass bei einem Bedienelement mit sichtbarer Textbeschriftung der zugängliche Name diesen sichtbaren Beschriftungstext enthält (WCAG 2.5.3).
Anwendbarkeit. Gilt für Bedienelemente, die über aria-label oder aria-labelledby benannt sind, visuell gerendert werden und einen sichtbaren Beschriftungstext haben, den diese Engine deterministisch ermitteln kann: aus einem zugeordneten <label>, aus dem eigenen gerenderten Text des Elements oder aus den Elementen, auf die aria-labelledby verweist. Kandidaten sind <button>, <a href>, <summary>, nicht ausgeblendete Formularelemente sowie Elemente, deren role-Attribut (sein erstes bekanntes, nicht abstraktes Token, ohne Berücksichtigung der Groß-/Kleinschreibung) zur Rolle button, link, checkbox, radio, switch, searchbox, tab, menuitem, menuitemcheckbox, menuitemradio, option, treeitem oder gridcell aufgelöst wird, sowie ein <td> ohne role-Attribut in einem grid oder treegrid, nach HTML-AAM eine gridcell, jeweils ohne ausgeblendete oder deaktivierte Elemente. Ein <input> vom Button-Typ (submit, reset, button) mit einem value zeigt diesen value als Beschriftung; ohne value zeigt es den eigenen Standardtext des Browsers, der sich nicht ermitteln lässt, und liegt außerhalb des Geltungsbereichs. Die sichtbare Beschriftung ist der sichtbare innere Text: Text in Inline-Elementen wird so zusammengefügt, wie er geschrieben ist (<b>Down</b>load ergibt „Download“), eine Box auf Blockebene oder ein <br> beginnt ein neues Wort, und Text in einer Box, die niemand sehen kann (weggeschnitten, 1x1 px oder vollständig transparent, wie bei Text nur für Screenreader), bleibt außen vor, ebenso die Optionen eines <select> und der Text eines <textarea>, die der Wert eines Felds sind, kein Beschriftungstext. aria-hidden wird nicht ausgeschlossen: Es ändert nichts daran, was auf dem Bildschirm gerendert wird, und genau darum geht es in diesem Erfolgskriterium. Ein aria-label, das nach dem Trimmen leer ist, oder ein aria-labelledby, dessen ids auf nichts oder nur auf Elemente ohne Text verweisen, benennt nichts: Der zugängliche Name stammt dann aus der nächsten Quelle (dem Inhalt, einem <label>, title...), wie bei einem Bedienelement ohne diese Attribute, daher liegt das Element außerhalb des Geltungsbereichs. Ein Custom Element, dem seine ElementInternals eine dieser Rollen geben (this.attachInternals().role), ohne role-Attribut, das eine andere nennt, zählt wie ein natives Element mit dieser Rolle.
Erwartung. Der zugängliche Name enthält die Wörter der sichtbaren Beschriftung, zusammenhängend und in derselben Reihenfolge. Verglichen wird wortweise, nicht zeichenweise: Text in Klammern wird verworfen, Groß- und Kleinschreibung wird angeglichen, der Text wird nach NFKC normalisiert, und jedes Zeichen, das kein Buchstabe, keine Ziffer und kein kombinierendes Zeichen ist, wird zum Trennzeichen, sodass Unterschiede bei Satzzeichen und Leerraum nie über das Ergebnis entscheiden. Unsichtbare Formatierungszeichen (ein weiches Trennzeichen, ein Leerzeichen mit Nullbreite) und ein Apostroph innerhalb eines Worts werden stattdessen entfernt, sodass „Down­load“ zu „Download“ und „Don’t“ zu „Dont“ wird. Akzente werden nicht angeglichen: „Déposer“ bleibt ein Wort, und ein Name ohne den Akzent („Deposer“) enthält es nicht. Vier Fälle, die das Markup nicht entscheiden kann, werden als cantTell statt fail gemeldet: ein Wort, das an beiden Stellen unterschiedlich mit Bindestrich getrennt ist; ein sichtbares Wort, das der Autor möglicherweise abgekürzt hat, erkennbar am abschließenden Punkt; sichtbarer Text, der über eine bekannte Icon-Schrift dargestellt wird (im DOM stehen echte Wörter, aber nichts Lesbares wird tatsächlich angezeigt); und eine gesamte sichtbare Beschriftung aus genau einem Zeichen, das nicht einmal im zugänglichen Namen vorkommt und laut ACT 2ee8b8 „Nicht-Text-Inhalt“ sein kann (z. B. „X“ für „schließen“) statt wörtlicher Text.
Was ein Befund meldet.
visibleLabel,accessibleName: der sichtbare Labeltext und der zugängliche Name, wie gefunden.normalized.visibleLabel,normalized.accessibleName: dieselben beiden Texte, wie sie verglichen wurden: Text in Klammern entfernt, Groß-/Kleinschreibung angeglichen, Unicode normalisiert.tokenized.visibleLabel,tokenized.accessibleName: die Wörter, in die jeder Text zerlegt wurde, ein Wort pro Eintrag. Der Name muss die Wörter des Labels zusammenhängend und in derselben Reihenfolge enthalten.labelSource: woher das sichtbare Label stammt:label(ein zugeordnetes<label>),self(der eigene Text des Bedienelements),value(der value eines<input>vom Button-Typ) oderaria-labelledby(die Elemente, auf die es verweist).nameMechanism: was den zugänglichen Namen liefert:aria-labeloderaria-labelledby.
Diese Felder in data.details helfen, einen Befund zu lesen und zu reproduzieren. Außer reasonCode und den wenigen Feldern, die Ausgabeschema als stabil nennt, sind sie kein stabiler Vertrag: Ein Feld kann in einer Minor-Version umbenannt werden oder wegfallen, bauen Sie also nicht darauf auf.
Beispiele
<button aria-label="Save changes">Save</button>
Der zugängliche Name („Save changes“) enthält den sichtbaren Text („Save“).
<button aria-label="Submit form">Save</button>
Der zugängliche Name enthält den sichtbaren Beschriftungstext überhaupt nicht.
So prüfen Sie es
Wenn diese Regel nicht entscheiden kann, meldet sie cantTell und überlässt die Frage einer Person. Jede Frage, die sie stellen kann, steht hier unter ihrem Reason-Code, mit den Schritten, um sie zu beantworten. Ein Befund enthält dieselben Schritte in howToCheck, in der Sprache des Scans. Siehe Ausgabeschema.
HYPHENATION_DIFFERS
- Lesen Sie die sichtbare Beschriftung des im Bericht genannten Bedienelements.
- Öffnen Sie den Bereich „Barrierefreiheit“ und lesen Sie den zugänglichen Namen des Bedienelements.
- Vergleichen Sie beide: Sie unterscheiden sich nur in der Setzung von Bindestrichen („E-Mail“ gegenüber „Email“); entscheiden Sie, ob jemand, der die sichtbare Beschriftung ausspricht, dieselben Wörter sagen würde.
- Steht Spracheingabesoftware zur Verfügung, sprechen Sie die sichtbare Beschriftung und prüfen Sie, ob sie das Bedienelement aktiviert.
Bestanden. Der Name enthält dieselben Wörter wie die Beschriftung, nur die Bindestriche unterscheiden sich, sodass das Aussprechen der Beschriftung das Bedienelement erreicht.
Nicht bestanden. Die Bindestriche verändern die Wörter, sodass der Name nicht enthält, was die Beschriftung zeigt; das verstößt gegen WCAG 2.5.3.
POSSIBLE_ABBREVIATION
- Lesen Sie die sichtbare Beschriftung des im Bericht genannten Bedienelements und notieren Sie das Wort, das auf einen Punkt endet.
- Öffnen Sie den Bereich „Barrierefreiheit“ und lesen Sie den zugänglichen Namen des Bedienelements.
- Entscheiden Sie, ob das Wort der Beschriftung eine gängige Abkürzung des Wortes im Namen ist („Str.“ für „Straße“), die man als ganzes Wort vorlesen würde.
Bestanden. Die Abkürzung ist gebräuchlich und wird als das ganze Wort gelesen, das der Name enthält.
Nicht bestanden. Das Wort der Beschriftung wird nicht als das Wort im Namen gelesen, sodass jemand, der die Beschriftung ausspricht, nicht zum Namen passen würde; das verstößt gegen WCAG 2.5.3.
POSSIBLE_ICON_FONT_GLYPH
- Sehen Sie sich das im Bericht genannte Bedienelement auf dem Bildschirm an und notieren Sie, was es zeigt: lesbare Wörter oder ein Symbol.
- Öffnen Sie den Bereich „Barrierefreiheit“ und lesen Sie den zugänglichen Namen des Bedienelements.
- Zeigt das Bedienelement nur ein Symbol, entscheiden Sie, ob der Name es beschreibt; zeigt es lesbare Wörter, prüfen Sie, ob der Name sie enthält.
Bestanden. Das Bedienelement zeigt ein Symbol statt lesbaren Textes, oder der gezeigte lesbare Text ist im Namen enthalten.
Nicht bestanden. Das Bedienelement zeigt lesbare Wörter, die der zugängliche Name nicht enthält; das verstößt gegen WCAG 2.5.3.
POSSIBLE_SYMBOLIC_CHARACTER
- Sehen Sie sich das einzelne Zeichen an, das das im Bericht genannte Bedienelement zeigt.
- Öffnen Sie den Bereich „Barrierefreiheit“ und lesen Sie den zugänglichen Namen des Bedienelements.
- Entscheiden Sie, ob das Zeichen ein Symbol ist, das für eine Aktion steht (ein „X“ für Schließen, ein Pfeil), oder wörtlicher Text, den Nutzende aussprechen würden, etwa eine Ziffer oder ein Buchstabe.
Bestanden. Das Zeichen ist ein Symbol, und der Name beschreibt, was es tut.
Nicht bestanden. Das Zeichen ist Text, den Nutzende aussprechen würden (eine Ziffer oder ein Buchstabe), und der Name enthält es nicht; das verstößt gegen WCAG 2.5.3.