Las zonas interactivas deben medir al menos 24 por 24 píxeles CSS
Los botones de cantidad diminutos, los iconos para cerrar, las muestras de color y las casillas de los filtros son difíciles de acertar para las personas con temblores o poca destreza manual, y para cualquiera que use el móvil. Tocan la talla equivocada, eliminan un artículo que no querían o se rinden, lo que cuesta pedidos, sobre todo en el móvil.
- ID de la regla
- vs-target-size
- 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
Mide enlaces, botones y controles de formulario y señala las zonas de menos de 24 × 24 píxeles CSS que no se acogen a la excepción de espaciado (2.5.8). Se excluyen los enlaces dentro del texto corrido. Sustituye a la regla de axe target-size.
La comprobación mide además los elementos summary y los elementos con roles como checkbox, tab y option, así que también cuentan las muestras de color de un listbox. Las zonas interactivas desactivadas, ocultas y de tamaño cero se omiten, igual que los enlaces de salto colocados fuera de la página. El <label> visible de un control se suma a su recuadro medido.
Una zona interactiva es pequeña cuando su anchura o su altura es inferior a 24 píxeles CSS, con un margen de tolerancia de 0,25 px por la maquetación con subpíxeles. Una zona pequeña supera la comprobación de todos modos cuando:
- un círculo de 24 px centrado en ella no alcanza ni el recuadro de otra zona ni el círculo de otra zona pequeña fuera del texto corrido;
- es un elemento en línea, o un enlace
inline-block, dentro de un bloque que también contiene texto fuera de cualquier zona. Un encabezado sobre una lista de enlaces no cuenta.
La comprobación se ejecuta por separado en cada viewport escaneado, de forma predeterminada escritorio (1440 px) y móvil (390 px), de modo que una zona que solo se encoge en los teléfonos se señala para el móvil. No aplica las excepciones «Equivalent», «User agent control» ni «Essential»; esas las juzga una persona.
Cómo corregirlo
Dé a los botones con icono y a los controles pequeños una zona de pulsación de al menos 24 × 24 píxeles CSS (44 × 44 es mejor en pantallas táctiles), por ejemplo con padding o con min-width y min-height, sin cambiar el icono visible. Cuando una zona tenga que seguir siendo pequeña, deje al menos 24 píxeles entre ella y las contiguas.
Criterios de conformidad de las WCAG
- 2.5.8 Target Size (Minimum), nivel AA
Apartados de la norma EN 301 549
| Criterio de las WCAG | Versión 3.2.1 | Versión 4.1.1 |
|---|---|---|
| 2.5.8 | sin apartado en esta versión | 9.2.5.8 |
Dónde lo corrige una receta
Shopify: receta target-size-padding
Mostrar el antes y el después (1)
assets/base.css.liquid Cambios en assets/base.css.liquid (líneas añadidas: 10; 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:target-size-padding */ | |
| 1871 | Añadida | .header__icon--account, | |
| 1872 | Añadida | .header__icon--cart, | |
| 1873 | Añadida | .swatch--button, | |
| 1874 | Añadida | .quantity__button { | |
| 1875 | Añadida | min-width: 24px; | |
| 1876 | Añadida | min-height: 24px; | |
| 1877 | Añadida | } | |
| 1878 | Añadida | /* /validiscan:target-size-padding */ |
Shopware: receta target-size-padding
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: 6; eliminadas: 2)
| Línea anterior | Línea nueva | Cambio | Código |
|---|---|---|---|
| 10 | 10 | ||
| 11 | 11 | .header-actions-btn { | |
| 12 | 12 | width: 18px; | |
| 13 | Añadida | min-width: 24px; | |
| 13 | 14 | height: 18px; | |
| 14 | Eliminada | min-height: 0; | |
| 15 | Añadida | min-height: 24px; | |
| 15 | 16 | padding: 0; | |
| 16 | 17 | } | |
| 17 | 18 | ||
| 96 | 97 | /* 18 px colour swatches, 20 px quantity and remove buttons (vs-target-size). */ | |
| 97 | 98 | .product-detail-configurator-option-input { | |
| 98 | 99 | width: 18px; | |
| 100 | Añadida | min-width: 24px; | |
| 99 | 101 | height: 18px; | |
| 102 | Añadida | min-height: 24px; | |
| 100 | 103 | margin-right: 4px; | |
| 101 | 104 | } | |
| 102 | 105 | ||
| 103 | 106 | .quantity-selector-group .btn, | |
| 104 | 107 | .line-item-remove-button { | |
| 105 | 108 | width: 20px; | |
| 109 | Añadida | min-width: 24px; | |
| 106 | 110 | height: 20px; | |
| 107 | Eliminada | min-height: 0; | |
| 111 | Añadida | min-height: 24px; | |
| 108 | 112 | padding: 0; | |
| 109 | 113 | } | |
| 110 | 114 |
WooCommerce: receta target-size-padding
Mostrar el antes y el después (1)
assets/css/main.css Cambios en assets/css/main.css (líneas añadidas: 4; eliminadas: 2)
| Línea anterior | Línea nueva | Cambio | Código |
|---|---|---|---|
| 710 | 710 | /* VALIDISCAN-SEED vs-target-size: 18 x 18 px icon links, 4 px apart. */ | |
| 711 | 711 | .kb-social__link { | |
| 712 | 712 | display: inline-flex; | |
| 713 | Eliminada | width: 18px; | |
| 714 | Eliminada | height: 18px; | |
| 713 | Añadida | width: 24px; | |
| 714 | Añadida | height: 24px; | |
| 715 | 715 | color: var(--kb-ink); | |
| 716 | Añadida | align-items: center; | |
| 717 | Añadida | justify-content: center; | |
| 716 | 718 | } | |
| 717 | 719 | ||
| 718 | 720 | .site-info { |
assets/css/woocommerce.css Cambios en assets/css/woocommerce.css (líneas añadidas: 4; eliminadas: 4)
| Línea anterior | Línea nueva | Cambio | Código |
|---|---|---|---|
| 421 | 421 | ||
| 422 | 422 | /* VALIDISCAN-SEED vs-target-size: 18 x 18 px colour swatches, 4 px apart. */ | |
| 423 | 423 | .kb-swatch { | |
| 424 | Eliminada | width: 18px; | |
| 425 | Eliminada | height: 18px; | |
| 424 | Añadida | width: 24px; | |
| 425 | Añadida | height: 24px; | |
| 426 | 426 | padding: 0; | |
| 427 | 427 | border: 1px solid rgba(0, 0, 0, 0.2); | |
| 428 | 428 | border-radius: 50%; | |
| 489 | 489 | /* VALIDISCAN-SEED vs-target-size: 18 x 18 px quantity steppers glued to the input. */ | |
| 490 | 490 | .kb-qty-minus, | |
| 491 | 491 | .kb-qty-plus { | |
| 492 | Eliminada | width: 18px; | |
| 493 | Eliminada | height: 18px; | |
| 492 | Añadida | width: 24px; | |
| 493 | Añadida | height: 24px; | |
| 494 | 494 | padding: 0; | |
| 495 | 495 | border: 1px solid #b9b3aa; | |
| 496 | 496 | border-radius: 2px; |
Magento: receta target-size-padding
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: 9; eliminadas: 0)
| Línea anterior | Línea nueva | Cambio | Código |
|---|---|---|---|
| 1264 | 1264 | height: 18px; | |
| 1265 | 1265 | stroke-width: 3; | |
| 1266 | 1266 | } | |
| 1267 | Añadida | ||
| 1268 | Añadida | /* validiscan:target-size-padding */ | |
| 1269 | Añadida | .social-link, | |
| 1270 | Añadida | .actions-secondary .action, | |
| 1271 | Añadida | .qty-step { | |
| 1272 | Añadida | min-width: 24px; | |
| 1273 | Añadida | min-height: 24px; | |
| 1274 | Añadida | } | |
| 1275 | Añadida | /* /validiscan:target-size-padding */ |
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: 9; eliminadas: 0)
| Línea anterior | Línea nueva | Cambio | Código |
|---|---|---|---|
| 1232 | 1232 | height: 18px; | |
| 1233 | 1233 | stroke-width: 3; | |
| 1234 | 1234 | } | |
| 1235 | Añadida | ||
| 1236 | Añadida | /* validiscan:target-size-padding */ | |
| 1237 | Añadida | .social-link, | |
| 1238 | Añadida | .actions-secondary .action, | |
| 1239 | Añadida | .qty-step { | |
| 1240 | Añadida | min-width: 24px; | |
| 1241 | Añadida | min-height: 24px; | |
| 1242 | Añadida | } | |
| 1243 | Añadida | /* /validiscan:target-size-padding */ |
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