- Stufe
- A
- Seit
- WCAG 2.1
- Einträge
- 57 / 193
2.5.3 Beschriftung (Label) im Namen
Die Wörter, die auf einer Schaltfläche oder an einem Feld stehen, müssen Teil des Namens sein, den assistive Technologie hört, damit jemand, der sie laut ausspricht, das gemeinte Bedienelement erreicht.
/ Was es verlangt
Ein Bedienelement hat zwei Namen. Der eine ist der Text, den man darauf sieht, der andere ist der zugängliche Name, den der Browser an assistive Technologie weitergibt. Das Kriterium verlangt, dass der zweite den ersten enthält, sobald ein Bedienelement eine sichtbare Beschriftung aus Text oder aus einem Bild von Text hat. Wer per Sprache arbeitet, spricht die Wörter auf dem Bildschirm aus, etwa „Suchen klicken“, und die Spracherkennung gleicht sie mit dem zugänglichen Namen ab. Lautet der Name anders, passiert nichts.
Der Name darf länger sein als die Beschriftung, solange die sichtbaren Wörter darin vorkommen, und das W3C empfiehlt, sie an den Anfang zu stellen. Groß- und Kleinschreibung sowie Satzzeichen müssen nicht übereinstimmen. Eine Schaltfläche, die nur ein Symbol zeigt, fällt nicht unter das Kriterium, weil sie keine Textbeschriftung hat, die der Name enthalten könnte. Ausnahmen nennt das Kriterium nicht. Ein Bedienelement fällt durch, wenn aria-label oder aria-labelledby den sichtbaren Text durch eine andere Formulierung ersetzt, auch durch ein gleichbedeutendes Wort.
/ Woran Seiten scheitern
- Auf einer Schaltfläche steht „Suchen“, und im Code trägt sie aria-label="Produkte finden".
- Ein Link „Weiterlesen“ erhält ein aria-label, das den Artikel beschreibt und das Wort „Weiterlesen“ weglässt.
- Ein Feld ist sichtbar mit „Telefon“ beschriftet, und ein aria-label mit dem Wert „Kontaktnummer“ überschreibt diese Beschriftung.
- Eine Schaltfläche aus einem Bild von Text zeigt „Senden“, und ihr Alternativtext lautet „Formular abschicken“.
- Ein aria-labelledby-Attribut verweist auf versteckten Text, dessen Wortlaut vom sichtbaren Text des Bedienelements abweicht.
/ So prüfen Sie es selbst
- Gehen Sie die Seite durch und notieren Sie jedes Bedienelement, das Text zeigt: Schaltflächen, Links, Registerkarten und Felder mit sichtbarer Beschriftung.
- Suchen Sie im Quelltext der Seite nach aria-label und aria-labelledby. An diesen beiden Attributen weicht der Name am häufigsten vom sichtbaren Text ab.
- Untersuchen Sie jedes dieser Bedienelemente in den Entwicklerwerkzeugen des Browsers und öffnen Sie den Bereich Accessibility. Vergleichen Sie den berechneten Namen (Name) mit den Wörtern auf dem Bildschirm.
- Schalten Sie die Sprachsteuerung des Betriebssystems ein und sagen Sie „klicken“, gefolgt von den sichtbaren Wörtern. Ein Bedienelement, das nicht reagiert, müssen Sie sich genauer ansehen.
/ So beheben Sie es
- Entfernen Sie das aria-label und lassen Sie den Text im Element button oder a als Namen gelten.
- Wird ein längerer Name gebraucht, beginnen Sie ihn mit den sichtbaren Wörtern, zum Beispiel aria-label="Weiterlesen zum Jahresbericht" an einem Link, der „Weiterlesen“ zeigt.
- Sie können den Namen auch gleich dem sichtbaren Text lassen und die Zusatzangabe über aria-describedby anhängen, das eine Beschreibung ergänzt, ohne den Namen zu ändern.
- Bei einem Bild von Text tragen Sie in das alt-Attribut genau die Wörter ein, die im Bild zu sehen sind.
- Benennen Sie ein Feld mit einem label-Element, das über das for-Attribut mit ihm verknüpft ist, und überschreiben Sie diese Beschriftung nicht mit aria-label.
/ Was unser Scanner prüft
Unsere Prüfung label-in-name läuft in der gerenderten Seite und erfasst per Tastatur erreichbare Bedienelemente. Stammt der zugängliche Name aus aria-label oder aria-labelledby, vergleicht sie ihn mit dem Text auf dem Bedienelement selbst, ohne Rücksicht auf Großschreibung und Satzzeichen, und meldet einen Namen, der diesen Text nicht enthält. Text in Bildern liest sie nicht, und sie vergleicht kein Feld mit einer Beschriftung daneben.
/ Wer es verletzt, nach unseren eigenen Messungen
| Stelle | Sektor | Vorkommen | Wert |
|---|---|---|---|
| San Francisco | city · US | 19 | 28 |
| Nürnberg | city · DE | 18 | 2 |
| Szkoła Główna Handlowa | education · PL | 18 | 12 |
| Gliwice | city · PL | 17 | 13 |
| Poznań | city · PL | 17 | 1 |
| Politechnika Łódzka | education · PL | 16 | 5 |
| Deutsche Bahn | transport · DE | 9 | 5 |
| Baltimore | city · US | 8 | 7 |
| Elbląg | city · PL | 7 | 20 |
| Leipzig | city · DE | 6 | 26 |
| PKP Intercity | transport · PL | 6 | 2 |
| Policja | government · PL | 5 | 12 |
| Tychy | city · PL | 5 | 20 |
| Warszawski Uniwersytet Medyczny | education · PL | 5 | 13 |
| Boston | city · US | 4 | 6 |
| Uniwersytet Mikołaja Kopernika | education · PL | 4 | 6 |
| Hamburg | city · DE | 3 | 23 |
| LA Metro | transport · US | 3 | 17 |
| Las Vegas | city · US | 3 | 8 |
| Muzeum Narodowe w Warszawie | culture · PL | 3 | 11 |
| Warszawa | city · PL | 3 | 20 |
| Narodowy Instytut Dziedzictwa | culture · PL | 2 | 6 |
| Philadelphia | city · US | 2 | 8 |
| State of Georgia | government · US | 2 | 53 |
| Universität Heidelberg | education · DE | 2 | 21 |
| Uniwersytet Ekonomiczny w Krakowie | education · PL | 2 | 15 |
| Uniwersytet Łódzki | education · PL | 2 | 9 |
| Austin | city · US | 1 | 20 |
| Biblioteka Narodowa | culture · PL | 1 | 16 |
| Bundesagentur für Arbeit | government · DE | 1 | 16 |
| Bundesministerium für Bildung und Forschung | government · DE | 1 | 8 |
| Bundestag | government · DE | 1 | 17 |
| Cook County | government · US | 1 | 13 |
| Denver | city · US | 1 | 51 |
| Deutsche Rentenversicherung | government · DE | 1 | 5 |
| Gdańsk | city · PL | 1 | 2 |
| Hannover | city · DE | 1 | 10 |
| Houston | city · US | 1 | 7 |
| Indianapolis | city · US | 1 | 18 |
| Komisja Nadzoru Finansowego | government · PL | 1 | 17 |
| Library of Congress | culture · US | 1 | 30 |
| Ohio State University | education · US | 1 | 6 |
| Opole | city · PL | 1 | 8 |
| Pacjent.gov.pl | health · PL | 1 | 9 |
| Phoenix | city · US | 1 | 1 |
| Prezydent RP | government · PL | 1 | 15 |
| Płock | city · PL | 1 | 52 |
| Robert Koch-Institut | health · DE | 1 | 10 |
| Rzecznik Praw Obywatelskich | government · PL | 1 | 42 |
| Social Security Administration | government · US | 1 | - |
| Stuttgart | city · DE | 1 | 6 |
| Travis County | government · US | 1 | 37 |
| Universität Hamburg | education · DE | 1 | 36 |
| Uniwersytet Śląski | education · PL | 1 | 9 |
| Veterans Affairs | government · US | 1 | 33 |
| Zakład Ubezpieczeń Społecznych | government · PL | 1 | 27 |
| Zielona Góra | city · PL | 1 | 7 |
Eine Seite je Stelle, automatisch im Wochenrhythmus gemessen. Behebungen seit dem letzten Durchlauf erscheinen beim nächsten, und jede Eintragsseite bietet ein Recht auf Gegendarstellung.
/ Fragen zu diesem Kriterium
Was ist der Unterschied zwischen sichtbarer Beschriftung und zugänglichem Namen?
Die Beschriftung ist das, was man auf oder neben dem Bedienelement sieht: Text oder ein Bild von Text. Der zugängliche Name ist das, was der Browser an assistive Technologie meldet, berechnet aus dem Inhalt des Elements, einem label-Element, dem Alternativtext, aria-label oder aria-labelledby. Meist sind beide gleich. Sie gehen auseinander, wenn ein ARIA-Attribut den sichtbaren Text überschreibt.
Muss der zugängliche Name genau dem sichtbaren Text entsprechen?
Nein. Der Name muss den sichtbaren Text enthalten und darf weitere Wörter hinzufügen. Das W3C rät, die sichtbaren Wörter an den Anfang zu stellen, weil manche Spracherkennung vom Anfang des Namens her abgleicht. Unterschiede bei Großschreibung und Satzzeichen zählen nicht. Ein Name, der ein sichtbares Wort durch ein Synonym ersetzt oder weglässt, erfüllt das Kriterium nicht.
Gilt das Kriterium Beschriftung im Namen auch für Schaltflächen mit Symbol?
Nur wenn das Bedienelement Text zeigt. Eine Schaltfläche, auf der nur eine Lupe zu sehen ist, hat keine sichtbare Beschriftung, der Name hat also nichts zu enthalten und das Kriterium greift nicht. Einen zugänglichen Namen braucht sie trotzdem, nach 4.1.2 Name, Rolle, Wert. Steht neben dem Symbol Text, muss dieser Text im Namen vorkommen.