Tastaturfokus skal være synligt
Kunder, der bruger tastaturet, herunder mange med nedsat motorik, bevæger sig rundt i webshoppen med Tab-tasten. Når temaet skjuler fokusmarkeringen, kan de ikke se, hvor de er, og ved derfor ikke, hvilket link, hvilken størrelse eller hvilken knap de er ved at aktivere.
- Regel-id
- vs-focus-visible
- Kilde
- Validiscan-kontrol
- Alvorlighed
- Alvorlig
- Rettelsesniveau
- AUTO
- på Shopify, Shopware, WooCommerce og Magento
- Status
- køres
Hvad kontrollen gør
Går med Tab gennem alle fokuserbare elementer og sammenligner den beregnede outline, box-shadow, border og background før og efter fokus; et element, der ser ens ud med og uden fokus, fejler (2.4.7).
Kontrollen samler links med et href, formularelementer, summary, audio og video med controls, elementer med et tabindex og contenteditable-indhold. Den udelader iframe, object, embed, negative tabindex-værdier og elementer, der er deaktiverede, skjulte eller har størrelsen nul. Af resten beholder den de første 150 i dokumentrækkefølge.
Først trykker den én gang på Tab, så Chromium behandler de følgende fokusflytninger som tastaturfokus. Derefter giver den hvert element fokus efter tur og registrerer outline, box-shadow, kanter, baggrund, tekstfarve, text-decoration-line, filter, transform og opacity, både uden og med fokus og med CSS-transitioner slået fra. Registreringen omfatter også ::before, ::after, det overordnede element for :focus-within-stile og de første fem underelementer.
Elementer, der ikke tager imod fokus eller ikke matcher :focus-visible, udelades. Kun helt ens registreringer bliver til et fund, så en fokusstil, der kun ændrer en egenskab uden for registreringen, for eksempel text-shadow, bliver rapporteret. Kontrollen måler ikke en ændrings størrelse eller kontrast, og den vurderer ikke, om en fokusstil er let at se.
Sådan retter du det
Tilføj en :focus-visible-stil for hele temaet, for eksempel en outline på 2 til 3 pixels med outline-offset, i en brandfarve med mindst 3:1 kontrast til baggrunden omkring den, og fjern outline: none-regler, der ikke er erstattet af en lige så synlig stil.
WCAG-succeskriterier
- 2.4.7 Focus Visible, niveau AA
Afsnit i EN 301 549
| WCAG-kriterium | Version 3.2.1 | Version 4.1.1 |
|---|---|---|
| 2.4.7 | 9.2.4.7 | 9.2.4.7 |
Hvor en opskrift retter det
Shopify: opskrift focus-visible-styles
Vis før og efter (1)
assets/base.css.liquid Ændringer i assets/base.css.liquid: 7 tilføjet, 0 fjernet
| Linje før | Linje efter | Ændring | Kode |
|---|---|---|---|
| 1866 | 1866 | } | |
| 1867 | 1867 | ||
| 1868 | 1868 | /* ----------------------------------------------------------------- motion */ | |
| 1869 | Tilføjet | ||
| 1870 | Tilføjet | /* validiscan:focus-visible-styles */ | |
| 1871 | Tilføjet | :focus-visible { | |
| 1872 | Tilføjet | outline: 2px solid #1f4d3a; | |
| 1873 | Tilføjet | outline-offset: 2px; | |
| 1874 | Tilføjet | } | |
| 1875 | Tilføjet | /* /validiscan:focus-visible-styles */ |
Shopware: opskrift focus-visible-styles
Vis før og efter (1)
Resources/app/storefront/src/scss/_variant-broken.scss Ændringer i Resources/app/storefront/src/scss/_variant-broken.scss: 5 tilføjet, 5 fjernet
| Linje før | Linje efter | Ændring | Kode |
|---|---|---|---|
| 21 | 21 | } | |
| 22 | 22 | ||
| 23 | 23 | /* "Remove the ugly blue ring" (vs-focus-visible). */ | |
| 24 | Fjernet | .header-actions-btn:focus, | |
| 25 | Fjernet | .header-search-btn:focus, | |
| 26 | Fjernet | .main-navigation-link:focus, | |
| 27 | Fjernet | .product-name:focus, | |
| 28 | Fjernet | .footer-link:focus { | |
| 24 | Tilføjet | .header-actions-btn:focus:not(:focus-visible), | |
| 25 | Tilføjet | .header-search-btn:focus:not(:focus-visible), | |
| 26 | Tilføjet | .main-navigation-link:focus:not(:focus-visible), | |
| 27 | Tilføjet | .product-name:focus:not(:focus-visible), | |
| 28 | Tilføjet | .footer-link:focus:not(:focus-visible) { | |
| 29 | 29 | outline: 0; | |
| 30 | 30 | box-shadow: none; | |
| 31 | 31 | } |
Resources/app/storefront/src/scss/base.scss Ændringer i Resources/app/storefront/src/scss/base.scss: 8 tilføjet, 0 fjernet
| Linje før | Linje efter | Ændring | Kode |
|---|---|---|---|
| 1708 | 1708 | margin: 8px 0 0; | |
| 1709 | 1709 | font-size: 0.875rem; | |
| 1710 | 1710 | } | |
| 1711 | Tilføjet | ||
| 1712 | Tilføjet | /* validiscan:focus-visible-styles */ | |
| 1713 | Tilføjet | /* Visible keyboard focus (WCAG 2.4.7): brand colour sw-color-brand-primary, 8.9:1 on #ffffff. */ | |
| 1714 | Tilføjet | :focus-visible { | |
| 1715 | Tilføjet | outline: 2px solid #6b3f1d; | |
| 1716 | Tilføjet | outline-offset: 2px; | |
| 1717 | Tilføjet | } | |
| 1718 | Tilføjet | /* /validiscan:focus-visible-styles */ |
WooCommerce: opskrift focus-visible-styles
Vis før og efter (1)
assets/css/main.css Ændringer i assets/css/main.css: 9 tilføjet, 3 fjernet
| Linje før | Linje efter | Ændring | Kode |
|---|---|---|---|
| 137 | 137 | box-shadow: 0 0 0 2px var(--kb-ink); | |
| 138 | 138 | } | |
| 139 | 139 | ||
| 140 | Fjernet | /* VALIDISCAN-SEED vs-focus-visible: "remove the ugly focus ring" - nothing replaces it. */ | |
| 141 | Fjernet | :focus { | |
| 142 | Fjernet | outline: none !important; | |
| 140 | Tilføjet | /* validiscan:focus-visible-styles */ | |
| 141 | Tilføjet | :focus-visible { | |
| 142 | Tilføjet | outline: 2px solid var(--kb-focus); | |
| 143 | Tilføjet | outline-offset: 2px; | |
| 143 | 144 | } | |
| 144 | 145 | ||
| 146 | Tilføjet | .kb-topbar :focus-visible { | |
| 147 | Tilføjet | outline-color: #fff; | |
| 148 | Tilføjet | } | |
| 149 | Tilføjet | /* /validiscan:focus-visible-styles */ | |
| 150 | Tilføjet | ||
| 145 | 151 | /* Buttons ------------------------------------------------------------------ */ | |
| 146 | 152 | ||
| 147 | 153 | .button, |
Magento: opskrift focus-visible-styles
Vis før og efter (1)
app/design/frontend/Validiscan/fixture/web/css/source/_theme.less Ændringer i app/design/frontend/Validiscan/fixture/web/css/source/_theme.less: 10 tilføjet, 12 fjernet
| Linje før | Linje efter | Ændring | Kode |
|---|---|---|---|
| 1079 | 1079 | color: #fff; | |
| 1080 | 1080 | } | |
| 1081 | 1081 | ||
| 1082 | Fjernet | // VALIDISCAN-SEEDED vs-focus-visible: the theme removes the focus ring from links and actions. | |
| 1083 | Fjernet | .navigation a:focus, | |
| 1084 | Fjernet | .header.links a:focus, | |
| 1085 | Fjernet | .product-item-link:focus, | |
| 1086 | Fjernet | .footer a:focus, | |
| 1087 | Fjernet | .action:focus, | |
| 1088 | Fjernet | .logo:focus, | |
| 1089 | Fjernet | .block-promo:focus, | |
| 1090 | Fjernet | .journal-link:focus { | |
| 1091 | Fjernet | outline: none; | |
| 1092 | Fjernet | } | |
| 1093 | Fjernet | ||
| 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 | Tilføjet | ||
| 1256 | Tilføjet | /* validiscan:focus-visible-styles */ | |
| 1257 | Tilføjet | :focus-visible { | |
| 1258 | Tilføjet | outline: 2px solid #1979c3; | |
| 1259 | Tilføjet | outline-offset: 2px; | |
| 1260 | Tilføjet | } | |
| 1261 | Tilføjet | .panel.wrapper :focus-visible { | |
| 1262 | Tilføjet | outline-color: #a1d0f3; | |
| 1263 | Tilføjet | } | |
| 1264 | Tilføjet | /* /validiscan:focus-visible-styles */ |
app/design/frontend/Validiscan/fixture/web/css/styles-m.css Ændringer i app/design/frontend/Validiscan/fixture/web/css/styles-m.css: 10 tilføjet, 11 fjernet
| Linje før | Linje efter | Ændring | Kode |
|---|---|---|---|
| 1058 | 1058 | color: #fff; | |
| 1059 | 1059 | } | |
| 1060 | 1060 | ||
| 1061 | Fjernet | .navigation a:focus, | |
| 1062 | Fjernet | .header.links a:focus, | |
| 1063 | Fjernet | .product-item-link:focus, | |
| 1064 | Fjernet | .footer a:focus, | |
| 1065 | Fjernet | .action:focus, | |
| 1066 | Fjernet | .logo:focus, | |
| 1067 | Fjernet | .block-promo:focus, | |
| 1068 | Fjernet | .journal-link:focus { | |
| 1069 | Fjernet | outline: none; | |
| 1070 | Fjernet | } | |
| 1071 | Fjernet | ||
| 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 | Tilføjet | ||
| 1225 | Tilføjet | /* validiscan:focus-visible-styles */ | |
| 1226 | Tilføjet | :focus-visible { | |
| 1227 | Tilføjet | outline: 2px solid #1979c3; | |
| 1228 | Tilføjet | outline-offset: 2px; | |
| 1229 | Tilføjet | } | |
| 1230 | Tilføjet | .panel.wrapper :focus-visible { | |
| 1231 | Tilføjet | outline-color: #a1d0f3; | |
| 1232 | Tilføjet | } | |
| 1233 | Tilføjet | /* /validiscan:focus-visible-styles */ |
Begynd med et gratis tjek af din webshop.
Send din webshops adresse. Validiscan scanner den og svarer med hver fejl, scanningen kan påvise, med siden og koden.
Bestil et gratis tjekEller skriv til info@validiscan.com.
Hvad det gratis tjek omfatter, og hvad det udelader- Du sender
- din webshops adresse
- Sider, der scannes
- op til 15
- Du får
- hver fejl, scanningen kan påvise, med siden og koden
- På din webshop
- kun offentlige sider; intet login, intet købt, ingen formularer sendt
- Hvad det ikke er
- et fuldt audit