WCAG-A/AA-Anforderung Priorität: Schwerwiegend
Einige Links sagen nicht, wohin sie führen
Einige Links haben keinen lesbaren Text, oft Icons wie ein Warenkorb, ein Herz oder ein Logo ohne Textbeschriftung.
Dieser Text wurde automatisch übersetzt und noch nicht von Muttersprachlern geprüft.
Warum das für Ihre Kunden wichtig ist
Screenreader-Nutzer hören nur „Link“ und können nicht erkennen, ob er den Warenkorb, das Kundenkonto oder Instagram öffnet. Sie verlieren Zeit oder finden Warenkorb oder Kontaktseite gar nicht.
Wen es betrifft
- blinde Kundinnen und Kunden
- Screenreader-Nutzer
- Nutzer von Sprachsteuerung
So beheben Sie es
Geben Sie jedem Link einen Textnamen: sichtbaren Text, Alternativtext an einem Bild im Link oder aria-label bei reinen Icon-Links. Der Name sollte das Ziel beschreiben, zum Beispiel "Warenkorb, 2 Artikel". Blenden Sie dekorative Icons mit aria-hidden="true" aus.
Bei Shopify
Meist Icon-Links im Header oder Footer des Themes. Ergänzen Sie visuell versteckten Text oder aria-label in den Liquid-Sections und -Snippets des Themes; Links aus Apps müssen in der App korrigiert oder dem App-Entwickler gemeldet werden.
Bei Shoptet (CZ)
Meist Icon-Links im Header oder Footer des Templates. Prüfen Sie die Template-Einstellungen auf Link-Beschriftungen; andernfalls muss Shoptet oder eine Partneragentur den Template-Code ändern.
Bei PrestaShop
Meist Icon-Links in Header-Modulen oder Theme-Templates. Ergänzen Sie versteckten Text oder aria-label in den .tpl-Dateien des Themes oder in überschriebenen Modul-Templates.
Bei WooCommerce
Oft Icon-Links aus dem Theme-Header, einem Mini-Warenkorb oder einem Social-Icons-Plugin. Ergänzen Sie Textbeschriftungen in den Theme- oder Child-Theme-Templates oder wählen Sie Plugin-Einstellungen, die zugängliche Beschriftungen ausgeben.
Standards
| Standard | Abschnitt |
|---|---|
| WCAG 2.2 | 2.4.4 (A) Link Purpose (In Context) |
| WCAG 2.2 | 4.1.2 (A) Name, Role, Value |
| WCAG 2.1 | 2.4.4 (A) Link Purpose (In Context) |
| WCAG 2.1 | 4.1.2 (A) Name, Role, Value |
| WCAG 2.0 | 2.4.4 (A) Link Purpose (In Context) |
| WCAG 2.0 | 4.1.2 (A) Name, Role, Value |
| EN 301 549 4.1.1 | 9.2.4.4 |
| EN 301 549 4.1.1 | 9.4.1.2 |
| EN 301 549 3.2.1 | 9.2.4.4 |
| EN 301 549 3.2.1 | 9.4.1.2 |
| Section 508 2017 | E205.4 |
| ДСТУ EN 301 549 2022 | 9.2.4.4 |
| ДСТУ EN 301 549 2022 | 9.4.1.2 |
Automatische Prüfung: axe-core-Regel link-name.
dequeuniversity.com, github.com, www.w3.org, www.w3.org
Ähnliche Prüfungen
-
Links im Fließtext sehen aus wie normaler Text
WCAG 1.4.1 A
-
Formularfelder haben keine Beschriftung
WCAG 4.1.2 A
-
Manche Formular-Schaltflächen haben keinen Namen
WCAG 4.1.2 A
-
Barrierefreiheits-Attribute haben falsche Werte
WCAG 4.1.2 A