WCAG-A/AA-Anforderung Priorität: Gering
Ein klickbares Bild funktioniert nur mit der Maus
Die Seite verwendet eine serverseitige Imagemap: ein verlinktes Bild, bei dem der Server anhand der genauen Klickposition entscheidet, was geöffnet wird, zum Beispiel eine alte Filialkarte oder ein klickbares Katalogbild.
Dieser Text wurde automatisch übersetzt und noch nicht von Muttersprachlern geprüft.
Warum das für Ihre Kunden wichtig ist
Tastatur- und Screenreader-Nutzer können keinen Bereich des Bildes auswählen, und nichts sagt ihnen, welche Bereiche es gibt. Was hinter diesen Klicks liegt, bleibt für sie unerreichbar.
Wen es betrifft
- Tastaturnutzer
- Screenreader-Nutzer
- Nutzer von Sprachsteuerung
So beheben Sie es
Ersetzen Sie die serverseitige Imagemap (ein <img ismap> innerhalb eines Links) durch normale Textlinks oder Schaltflächen für jedes Ziel. Wenn Sie ein klickbares Bild brauchen, verwenden Sie eine clientseitige Imagemap (<map> mit <area>-Elementen, jeweils mit Alternativtext) oder einzelne verlinkte Bilder. Eine Textliste derselben Links neben dem Bild hilft zusätzlich.
Bei Shopify
Sehr selten; Shopify-Themes verwenden diese Technik nicht. Falls sie auftaucht, suchen Sie nach altem HTML in einer Seite oder einer veralteten App und ersetzen Sie es durch normale Links.
Bei Shoptet (CZ)
Sehr selten; Templates verwenden diese Technik nicht. Falls sie auftaucht, steckt sie in HTML, das in eine Seite eingefügt wurde; ersetzen Sie es durch normale Links.
Bei PrestaShop
Sehr selten; meist altes HTML auf einer CMS-Seite oder ein veraltetes Modul. Ersetzen Sie es durch normale Links im Inhalt oder im .tpl-Template des Moduls.
Bei WooCommerce
Sehr selten; meist altes HTML in einer Seite, ein veraltetes Plugin oder von einer älteren Website übernommene Inhalte. Ersetzen Sie es durch normale Links oder ein Imagemap-Plugin, das für jeden Bereich Alternativtext ausgibt.
Standards
| Standard | Abschnitt |
|---|---|
| WCAG 2.2 | 2.1.1 (A) Keyboard |
| WCAG 2.1 | 2.1.1 (A) Keyboard |
| WCAG 2.0 | 2.1.1 (A) Keyboard |
| EN 301 549 4.1.1 | 9.2.1.1 |
| EN 301 549 3.2.1 | 9.2.1.1 |
| Section 508 2017 | E205.4 |
| ДСТУ EN 301 549 2022 | 9.2.1.1 |
Automatische Prüfung: axe-core-Regel server-side-image-map.
dequeuniversity.com, github.com, www.w3.org
Ähnliche Prüfungen
-
Einige Überschriften sind nur fetter oder großer Text
WCAG 1.3.1 A
-
Einige Schalter und Kontrollkästchen haben keinen Namen
WCAG 4.1.2 A
-
Große Tabellen haben Zellen ohne Überschriften
WCAG 1.3.1 A
-
Einige Links sagen nicht, wohin sie führen
WCAG 2.4.4 A