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

Apartados de la norma EN 301 549

El apartado de la norma EN 301 549 que corresponde a cada criterio, por versión de la norma
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)
Antes y después Datos de ejemplo

assets/base.css.liquid Cambios en assets/base.css.liquid (líneas añadidas: 10; eliminadas: 0)

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)
gives the header icons, steppers and swatches a 24px minimum; no page reports small targets Datos de ejemplo

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)

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)
raises the social icons, quantity steppers and swatches of the fixture theme to 24 × 24 px Datos de ejemplo

assets/css/main.css Cambios en assets/css/main.css (líneas añadidas: 4; eliminadas: 2)

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)

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)
sizes the three flagged controls and validates Datos de ejemplo

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)

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)

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 gratuita

O 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

Escribir a Validiscan

Para una revisión gratuita, indique la dirección web de su tienda y su plataforma.

Validiscan utiliza lo que usted envía para responderle. Política de privacidad