Der Tastaturfokus muss sichtbar sein
Menschen, die mit der Tastatur navigieren, darunter viele mit motorischen Einschränkungen, bewegen sich mit der Tab-Taste durch den Shop. Blendet das Theme den Fokusrahmen aus, sehen sie nicht, wo sie sich befinden, und können nicht erkennen, welchen Link, welche Größe oder welche Schaltfläche sie gleich auslösen.
- Regel-ID
- vs-focus-visible
- Quelle
- Validiscan-Prüfung
- Auswirkung
- Schwerwiegend
- Korrekturstufe
- AUTO
- auf Shopify, Shopware, WooCommerce und Magento
- Status
- wird ausgeführt
Was geprüft wird
Geht per Tab durch alle fokussierbaren Elemente und vergleicht die berechneten Werte von outline, box-shadow, border und background vor und nach dem Fokussieren; ein Element, das fokussiert gleich aussieht, fällt durch (2.4.7).
Die Prüfung sammelt Links mit href, Formularelemente, summary, audio und video mit controls, Elemente mit tabindex sowie Inhalte mit contenteditable. Sie überspringt iframe, object, embed, negative tabindex-Werte und Elemente, die deaktiviert oder verborgen sind oder die Größe null haben. Von den übrigen behält sie die ersten 150 in der Reihenfolge des Dokuments.
Zuerst drückt sie einmal die Tab-Taste, damit Chromium die folgenden Fokuswechsel als Tastaturfokus behandelt. Dann fokussiert sie ein Element nach dem anderen und zeichnet bei abgeschalteten CSS-Übergängen jeweils ohne und mit Fokus Outline, box-shadow, Rahmen, Hintergrund, Textfarbe, text-decoration-line, filter, transform und opacity auf. Die Aufzeichnung erfasst außerdem ::before, ::after, das Elternelement für Stile mit :focus-within und die ersten fünf Nachfahren.
Elemente, die keinen Fokus annehmen oder auf die :focus-visible nicht zutrifft, bleiben außen vor. Ein Befund entsteht nur, wenn beide Aufzeichnungen identisch sind. Ein Fokusstil, der allein eine nicht erfasste Eigenschaft wie text-shadow ändert, wird deshalb gemeldet. Größe und Kontrast einer Änderung misst die Prüfung nicht, und ob ein Fokusstil gut zu sehen ist, beurteilt sie nicht.
So wird es behoben
Ergänzen Sie einen themeweiten :focus-visible-Stil, etwa einen 2 bis 3 Pixel breiten Fokusrahmen (outline) mit Abstand, in einer Markenfarbe mit mindestens 3:1 Kontrast zum umgebenden Hintergrund, und entfernen Sie Regeln mit outline: none, die nicht durch einen ebenso gut sichtbaren Stil ersetzt werden.
WCAG-Erfolgskriterien
- 2.4.7 Focus Visible, Stufe AA
Abschnitte der EN 301 549
| WCAG-Kriterium | Version 3.2.1 | Version 4.1.1 |
|---|---|---|
| 2.4.7 | 9.2.4.7 | 9.2.4.7 |
Wo ein Rezept es behebt
Shopify: Rezept focus-visible-styles
Vorher und nachher anzeigen (1)
assets/base.css.liquid Änderungen an assets/base.css.liquid: 7 hinzugefügt, 0 entfernt
| Zeile vorher | Zeile nachher | Änderung | Code |
|---|---|---|---|
| 1866 | 1866 | } | |
| 1867 | 1867 | ||
| 1868 | 1868 | /* ----------------------------------------------------------------- motion */ | |
| 1869 | Hinzugefügt | ||
| 1870 | Hinzugefügt | /* validiscan:focus-visible-styles */ | |
| 1871 | Hinzugefügt | :focus-visible { | |
| 1872 | Hinzugefügt | outline: 2px solid #1f4d3a; | |
| 1873 | Hinzugefügt | outline-offset: 2px; | |
| 1874 | Hinzugefügt | } | |
| 1875 | Hinzugefügt | /* /validiscan:focus-visible-styles */ |
Shopware: Rezept focus-visible-styles
Vorher und nachher anzeigen (1)
Resources/app/storefront/src/scss/_variant-broken.scss Änderungen an Resources/app/storefront/src/scss/_variant-broken.scss: 5 hinzugefügt, 5 entfernt
| Zeile vorher | Zeile nachher | Änderung | Code |
|---|---|---|---|
| 21 | 21 | } | |
| 22 | 22 | ||
| 23 | 23 | /* "Remove the ugly blue ring" (vs-focus-visible). */ | |
| 24 | Entfernt | .header-actions-btn:focus, | |
| 25 | Entfernt | .header-search-btn:focus, | |
| 26 | Entfernt | .main-navigation-link:focus, | |
| 27 | Entfernt | .product-name:focus, | |
| 28 | Entfernt | .footer-link:focus { | |
| 24 | Hinzugefügt | .header-actions-btn:focus:not(:focus-visible), | |
| 25 | Hinzugefügt | .header-search-btn:focus:not(:focus-visible), | |
| 26 | Hinzugefügt | .main-navigation-link:focus:not(:focus-visible), | |
| 27 | Hinzugefügt | .product-name:focus:not(:focus-visible), | |
| 28 | Hinzugefügt | .footer-link:focus:not(:focus-visible) { | |
| 29 | 29 | outline: 0; | |
| 30 | 30 | box-shadow: none; | |
| 31 | 31 | } |
Resources/app/storefront/src/scss/base.scss Änderungen an Resources/app/storefront/src/scss/base.scss: 8 hinzugefügt, 0 entfernt
| Zeile vorher | Zeile nachher | Änderung | Code |
|---|---|---|---|
| 1708 | 1708 | margin: 8px 0 0; | |
| 1709 | 1709 | font-size: 0.875rem; | |
| 1710 | 1710 | } | |
| 1711 | Hinzugefügt | ||
| 1712 | Hinzugefügt | /* validiscan:focus-visible-styles */ | |
| 1713 | Hinzugefügt | /* Visible keyboard focus (WCAG 2.4.7): brand colour sw-color-brand-primary, 8.9:1 on #ffffff. */ | |
| 1714 | Hinzugefügt | :focus-visible { | |
| 1715 | Hinzugefügt | outline: 2px solid #6b3f1d; | |
| 1716 | Hinzugefügt | outline-offset: 2px; | |
| 1717 | Hinzugefügt | } | |
| 1718 | Hinzugefügt | /* /validiscan:focus-visible-styles */ |
WooCommerce: Rezept focus-visible-styles
Vorher und nachher anzeigen (1)
assets/css/main.css Änderungen an assets/css/main.css: 9 hinzugefügt, 3 entfernt
| Zeile vorher | Zeile nachher | Änderung | Code |
|---|---|---|---|
| 137 | 137 | box-shadow: 0 0 0 2px var(--kb-ink); | |
| 138 | 138 | } | |
| 139 | 139 | ||
| 140 | Entfernt | /* VALIDISCAN-SEED vs-focus-visible: "remove the ugly focus ring" - nothing replaces it. */ | |
| 141 | Entfernt | :focus { | |
| 142 | Entfernt | outline: none !important; | |
| 140 | Hinzugefügt | /* validiscan:focus-visible-styles */ | |
| 141 | Hinzugefügt | :focus-visible { | |
| 142 | Hinzugefügt | outline: 2px solid var(--kb-focus); | |
| 143 | Hinzugefügt | outline-offset: 2px; | |
| 143 | 144 | } | |
| 144 | 145 | ||
| 146 | Hinzugefügt | .kb-topbar :focus-visible { | |
| 147 | Hinzugefügt | outline-color: #fff; | |
| 148 | Hinzugefügt | } | |
| 149 | Hinzugefügt | /* /validiscan:focus-visible-styles */ | |
| 150 | Hinzugefügt | ||
| 145 | 151 | /* Buttons ------------------------------------------------------------------ */ | |
| 146 | 152 | ||
| 147 | 153 | .button, |
Magento: Rezept focus-visible-styles
Vorher und nachher anzeigen (1)
app/design/frontend/Validiscan/fixture/web/css/source/_theme.less Änderungen an app/design/frontend/Validiscan/fixture/web/css/source/_theme.less: 10 hinzugefügt, 12 entfernt
| Zeile vorher | Zeile nachher | Änderung | Code |
|---|---|---|---|
| 1079 | 1079 | color: #fff; | |
| 1080 | 1080 | } | |
| 1081 | 1081 | ||
| 1082 | Entfernt | // VALIDISCAN-SEEDED vs-focus-visible: the theme removes the focus ring from links and actions. | |
| 1083 | Entfernt | .navigation a:focus, | |
| 1084 | Entfernt | .header.links a:focus, | |
| 1085 | Entfernt | .product-item-link:focus, | |
| 1086 | Entfernt | .footer a:focus, | |
| 1087 | Entfernt | .action:focus, | |
| 1088 | Entfernt | .logo:focus, | |
| 1089 | Entfernt | .block-promo:focus, | |
| 1090 | Entfernt | .journal-link:focus { | |
| 1091 | Entfernt | outline: none; | |
| 1092 | Entfernt | } | |
| 1093 | Entfernt | ||
| 1094 | 1082 | // VALIDISCAN-SEEDED vs-headings-landmarks: the home page title is display:none, so the page has no h1. | |
| 1095 | 1083 | .cms-index-index .page-title-wrapper { | |
| 1096 | 1084 | display: none; | |
| 1264 | 1252 | height: 18px; | |
| 1265 | 1253 | stroke-width: 3; | |
| 1266 | 1254 | } | |
| 1255 | Hinzugefügt | ||
| 1256 | Hinzugefügt | /* validiscan:focus-visible-styles */ | |
| 1257 | Hinzugefügt | :focus-visible { | |
| 1258 | Hinzugefügt | outline: 2px solid #1979c3; | |
| 1259 | Hinzugefügt | outline-offset: 2px; | |
| 1260 | Hinzugefügt | } | |
| 1261 | Hinzugefügt | .panel.wrapper :focus-visible { | |
| 1262 | Hinzugefügt | outline-color: #a1d0f3; | |
| 1263 | Hinzugefügt | } | |
| 1264 | Hinzugefügt | /* /validiscan:focus-visible-styles */ |
app/design/frontend/Validiscan/fixture/web/css/styles-m.css Änderungen an app/design/frontend/Validiscan/fixture/web/css/styles-m.css: 10 hinzugefügt, 11 entfernt
| Zeile vorher | Zeile nachher | Änderung | Code |
|---|---|---|---|
| 1058 | 1058 | color: #fff; | |
| 1059 | 1059 | } | |
| 1060 | 1060 | ||
| 1061 | Entfernt | .navigation a:focus, | |
| 1062 | Entfernt | .header.links a:focus, | |
| 1063 | Entfernt | .product-item-link:focus, | |
| 1064 | Entfernt | .footer a:focus, | |
| 1065 | Entfernt | .action:focus, | |
| 1066 | Entfernt | .logo:focus, | |
| 1067 | Entfernt | .block-promo:focus, | |
| 1068 | Entfernt | .journal-link:focus { | |
| 1069 | Entfernt | outline: none; | |
| 1070 | Entfernt | } | |
| 1071 | Entfernt | ||
| 1072 | 1061 | .cms-index-index .page-title-wrapper { | |
| 1073 | 1062 | display: none; | |
| 1074 | 1063 | } | |
| 1232 | 1221 | height: 18px; | |
| 1233 | 1222 | stroke-width: 3; | |
| 1234 | 1223 | } | |
| 1224 | Hinzugefügt | ||
| 1225 | Hinzugefügt | /* validiscan:focus-visible-styles */ | |
| 1226 | Hinzugefügt | :focus-visible { | |
| 1227 | Hinzugefügt | outline: 2px solid #1979c3; | |
| 1228 | Hinzugefügt | outline-offset: 2px; | |
| 1229 | Hinzugefügt | } | |
| 1230 | Hinzugefügt | .panel.wrapper :focus-visible { | |
| 1231 | Hinzugefügt | outline-color: #a1d0f3; | |
| 1232 | Hinzugefügt | } | |
| 1233 | Hinzugefügt | /* /validiscan:focus-visible-styles */ |
Beginnen Sie mit einem kostenlosen Check Ihres Shops.
Senden Sie die Adresse Ihres Shops. Validiscan scannt ihn und antwortet mit jedem Fehler, den der Scan nachweisen kann, jeweils mit der Seite und dem Code.
Kostenlosen Check anfordernOder schreiben Sie an info@validiscan.com.
Was der kostenlose Check umfasst und was nicht- Sie senden
- die Adresse Ihres Shops
- Gescannte Seiten
- bis zu 15
- Sie erhalten
- jeden Fehler, den der Scan nachweisen kann, mit Seite und Code
- In Ihrem Shop
- nur öffentliche Seiten; keine Anmeldung, nichts gekauft, kein Formular abgeschickt
- Was er nicht ist
- ein vollständiges Audit