El foco del teclado debe ser visible
Quienes usan el teclado, entre ellos muchas personas con discapacidad motriz, se mueven por la tienda con la tecla Tab. Cuando el tema oculta el contorno del foco, no ven dónde están, así que no saben qué enlace, qué talla o qué botón están a punto de activar.
- ID de la regla
- vs-focus-visible
- Origen
- Comprobación de Validiscan
- Impacto
- Grave
- Nivel de corrección
- AUTO
- en Shopify, Shopware, WooCommerce y Magento
- Estado
- se ejecuta
Qué hace la comprobación
Recorre con Tab todos los elementos enfocables y compara outline, box-shadow, border y background calculados antes y después de recibir el foco; un elemento que se ve igual con el foco no supera la comprobación (2.4.7).
La comprobación reúne los enlaces con href, los controles de formulario, los elementos summary, los audio y video con controls, los elementos con tabindex y el contenido contenteditable. Omite iframe, object, embed, los valores negativos de tabindex y los elementos desactivados, ocultos o de tamaño cero, y se queda con los 150 primeros en el orden del documento.
Primero pulsa Tab una vez, para que Chromium trate los siguientes movimientos del foco como foco de teclado. A continuación enfoca uno a uno cada elemento y registra el contorno (outline), box-shadow, los bordes, el fondo, el color del texto, text-decoration-line, filter, transform y opacity, sin foco y con foco, con las transiciones CSS desactivadas. El registro incluye también ::before, ::after, el elemento padre para los estilos :focus-within y los cinco primeros descendientes.
Los elementos que no reciben el foco o que no coinciden con :focus-visible quedan fuera. Solo hay hallazgo cuando los registros son idénticos, así que se notifica un estilo de foco que solo cambia una propiedad no registrada, como text-shadow. La comprobación no mide el tamaño ni el contraste de un cambio; no juzga si un estilo de foco se ve con facilidad.
Cómo corregirlo
Añada un estilo :focus-visible para todo el tema, como un contorno de 2 a 3 píxeles con separación, en un color de la marca con un contraste de al menos 3:1 frente al fondo que lo rodea, y elimine las reglas outline: none que no se sustituyan por un estilo igual de visible.
Criterios de conformidad de las WCAG
- 2.4.7 Focus Visible, nivel AA
Apartados de la norma EN 301 549
| Criterio de las WCAG | Versión 3.2.1 | Versión 4.1.1 |
|---|---|---|
| 2.4.7 | 9.2.4.7 | 9.2.4.7 |
Dónde lo corrige una receta
Shopify: receta focus-visible-styles
Mostrar el antes y el después (1)
assets/base.css.liquid Cambios en assets/base.css.liquid (líneas añadidas: 7; eliminadas: 0)
| Línea anterior | Línea nueva | Cambio | Código |
|---|---|---|---|
| 1866 | 1866 | } | |
| 1867 | 1867 | ||
| 1868 | 1868 | /* ----------------------------------------------------------------- motion */ | |
| 1869 | Añadida | ||
| 1870 | Añadida | /* validiscan:focus-visible-styles */ | |
| 1871 | Añadida | :focus-visible { | |
| 1872 | Añadida | outline: 2px solid #1f4d3a; | |
| 1873 | Añadida | outline-offset: 2px; | |
| 1874 | Añadida | } | |
| 1875 | Añadida | /* /validiscan:focus-visible-styles */ |
Shopware: receta focus-visible-styles
Mostrar el antes y el después (1)
Resources/app/storefront/src/scss/_variant-broken.scss Cambios en Resources/app/storefront/src/scss/_variant-broken.scss (líneas añadidas: 5; eliminadas: 5)
| Línea anterior | Línea nueva | Cambio | Código |
|---|---|---|---|
| 21 | 21 | } | |
| 22 | 22 | ||
| 23 | 23 | /* "Remove the ugly blue ring" (vs-focus-visible). */ | |
| 24 | Eliminada | .header-actions-btn:focus, | |
| 25 | Eliminada | .header-search-btn:focus, | |
| 26 | Eliminada | .main-navigation-link:focus, | |
| 27 | Eliminada | .product-name:focus, | |
| 28 | Eliminada | .footer-link:focus { | |
| 24 | Añadida | .header-actions-btn:focus:not(:focus-visible), | |
| 25 | Añadida | .header-search-btn:focus:not(:focus-visible), | |
| 26 | Añadida | .main-navigation-link:focus:not(:focus-visible), | |
| 27 | Añadida | .product-name:focus:not(:focus-visible), | |
| 28 | Añadida | .footer-link:focus:not(:focus-visible) { | |
| 29 | 29 | outline: 0; | |
| 30 | 30 | box-shadow: none; | |
| 31 | 31 | } |
Resources/app/storefront/src/scss/base.scss Cambios en Resources/app/storefront/src/scss/base.scss (líneas añadidas: 8; eliminadas: 0)
| Línea anterior | Línea nueva | Cambio | Código |
|---|---|---|---|
| 1708 | 1708 | margin: 8px 0 0; | |
| 1709 | 1709 | font-size: 0.875rem; | |
| 1710 | 1710 | } | |
| 1711 | Añadida | ||
| 1712 | Añadida | /* validiscan:focus-visible-styles */ | |
| 1713 | Añadida | /* Visible keyboard focus (WCAG 2.4.7): brand colour sw-color-brand-primary, 8.9:1 on #ffffff. */ | |
| 1714 | Añadida | :focus-visible { | |
| 1715 | Añadida | outline: 2px solid #6b3f1d; | |
| 1716 | Añadida | outline-offset: 2px; | |
| 1717 | Añadida | } | |
| 1718 | Añadida | /* /validiscan:focus-visible-styles */ |
WooCommerce: receta focus-visible-styles
Mostrar el antes y el después (1)
assets/css/main.css Cambios en assets/css/main.css (líneas añadidas: 9; eliminadas: 3)
| Línea anterior | Línea nueva | Cambio | Código |
|---|---|---|---|
| 137 | 137 | box-shadow: 0 0 0 2px var(--kb-ink); | |
| 138 | 138 | } | |
| 139 | 139 | ||
| 140 | Eliminada | /* VALIDISCAN-SEED vs-focus-visible: "remove the ugly focus ring" - nothing replaces it. */ | |
| 141 | Eliminada | :focus { | |
| 142 | Eliminada | outline: none !important; | |
| 140 | Añadida | /* validiscan:focus-visible-styles */ | |
| 141 | Añadida | :focus-visible { | |
| 142 | Añadida | outline: 2px solid var(--kb-focus); | |
| 143 | Añadida | outline-offset: 2px; | |
| 143 | 144 | } | |
| 144 | 145 | ||
| 146 | Añadida | .kb-topbar :focus-visible { | |
| 147 | Añadida | outline-color: #fff; | |
| 148 | Añadida | } | |
| 149 | Añadida | /* /validiscan:focus-visible-styles */ | |
| 150 | Añadida | ||
| 145 | 151 | /* Buttons ------------------------------------------------------------------ */ | |
| 146 | 152 | ||
| 147 | 153 | .button, |
Magento: receta focus-visible-styles
Mostrar el antes y el después (1)
app/design/frontend/Validiscan/fixture/web/css/source/_theme.less Cambios en app/design/frontend/Validiscan/fixture/web/css/source/_theme.less (líneas añadidas: 10; eliminadas: 12)
| Línea anterior | Línea nueva | Cambio | Código |
|---|---|---|---|
| 1079 | 1079 | color: #fff; | |
| 1080 | 1080 | } | |
| 1081 | 1081 | ||
| 1082 | Eliminada | // VALIDISCAN-SEEDED vs-focus-visible: the theme removes the focus ring from links and actions. | |
| 1083 | Eliminada | .navigation a:focus, | |
| 1084 | Eliminada | .header.links a:focus, | |
| 1085 | Eliminada | .product-item-link:focus, | |
| 1086 | Eliminada | .footer a:focus, | |
| 1087 | Eliminada | .action:focus, | |
| 1088 | Eliminada | .logo:focus, | |
| 1089 | Eliminada | .block-promo:focus, | |
| 1090 | Eliminada | .journal-link:focus { | |
| 1091 | Eliminada | outline: none; | |
| 1092 | Eliminada | } | |
| 1093 | Eliminada | ||
| 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 | Añadida | ||
| 1256 | Añadida | /* validiscan:focus-visible-styles */ | |
| 1257 | Añadida | :focus-visible { | |
| 1258 | Añadida | outline: 2px solid #1979c3; | |
| 1259 | Añadida | outline-offset: 2px; | |
| 1260 | Añadida | } | |
| 1261 | Añadida | .panel.wrapper :focus-visible { | |
| 1262 | Añadida | outline-color: #a1d0f3; | |
| 1263 | Añadida | } | |
| 1264 | Añadida | /* /validiscan:focus-visible-styles */ |
app/design/frontend/Validiscan/fixture/web/css/styles-m.css Cambios en app/design/frontend/Validiscan/fixture/web/css/styles-m.css (líneas añadidas: 10; eliminadas: 11)
| Línea anterior | Línea nueva | Cambio | Código |
|---|---|---|---|
| 1058 | 1058 | color: #fff; | |
| 1059 | 1059 | } | |
| 1060 | 1060 | ||
| 1061 | Eliminada | .navigation a:focus, | |
| 1062 | Eliminada | .header.links a:focus, | |
| 1063 | Eliminada | .product-item-link:focus, | |
| 1064 | Eliminada | .footer a:focus, | |
| 1065 | Eliminada | .action:focus, | |
| 1066 | Eliminada | .logo:focus, | |
| 1067 | Eliminada | .block-promo:focus, | |
| 1068 | Eliminada | .journal-link:focus { | |
| 1069 | Eliminada | outline: none; | |
| 1070 | Eliminada | } | |
| 1071 | Eliminada | ||
| 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 | Añadida | ||
| 1225 | Añadida | /* validiscan:focus-visible-styles */ | |
| 1226 | Añadida | :focus-visible { | |
| 1227 | Añadida | outline: 2px solid #1979c3; | |
| 1228 | Añadida | outline-offset: 2px; | |
| 1229 | Añadida | } | |
| 1230 | Añadida | .panel.wrapper :focus-visible { | |
| 1231 | Añadida | outline-color: #a1d0f3; | |
| 1232 | Añadida | } | |
| 1233 | Añadida | /* /validiscan:focus-visible-styles */ |
Empiece con una revisión gratuita de su tienda.
Envíe la dirección de su tienda. Validiscan la escanea y le responde con cada fallo que el escaneo pueda demostrar, con la página y el código.
Solicitar revisión gratuitaO escriba a info@validiscan.com.
Qué cubre la revisión gratuita y qué deja fuera- Usted envía
- la dirección de su tienda
- Páginas escaneadas
- hasta 15
- Usted recibe
- todos los fallos que el escaneo puede demostrar, con la página y el código
- En su tienda
- solo páginas públicas; sin inicio de sesión, nada comprado, ningún formulario enviado
- Lo que no es
- una auditoría completa