Skip to content
About Blog Aprender Explorar patronas Case studies
En esta página
  • Probando tus objetivos táctiles
  • Usar consultas de medios para detectar el uso de la pantalla táctil

Objetivos táctiles accesibles

Mar 31, 2020 — Actualizado May 29, 2020
Available in: English y Português
Appears in: Accesible para todos
Dave Gash
Dave Gash
Meggin Kearney
Meggin Kearney
Twitter
Rachel Andrew
Rachel Andrew
TwitterGitHubGlitchHomepage
Rob Dodson
Rob Dodson
TwitterGitHubGlitchHomepage
En esta página
  • Probando tus objetivos táctiles
  • Usar consultas de medios para detectar el uso de la pantalla táctil

Cuando tu diseño se muestra en un dispositivo móvil, debes de asegurarte de que los elementos interactivos, como botones o enlaces, sean lo suficientemente grandes y tengan suficiente espacio a su alrededor, para que sean fáciles de presionar sin que se superpongan accidentalmente con otros elementos. Esto beneficia a todos los usuarios, pero es especialmente útil para cualquier persona con una discapacidad motora.

Un tamaño de objetivo táctil mínimo recomendado es de alrededor de 48 píxeles, independiente del dispositivo, en un sitio con una ventana gráfica móvil configurada correctamente. Por ejemplo, aunque es posible que un icono solo tenga un ancho y un alto de 24px, puedes usar un relleno adicional para llevar el tamaño del objetivo táctil hasta 48px. El área de 48x48 píxeles corresponde a alrededor de 9mm, que es aproximadamente el tamaño del área de la yema del dedo de una persona.

En la siguiente demostración, agregué relleno a todos los enlaces para asegurarme de que cumplan con el tamaño mínimo.

Los objetivos táctiles también deben de tener una separación de unos 8 píxeles, tanto horizontal como verticalmente, de modo que el dedo del usuario que presiona un objetivo táctil no toque inadvertidamente otro objetivo táctil.

Probando tus objetivos táctiles #

Si tu objetivo es texto y has utilizado valores relativos como em o rem para ajustar el tamaño del texto y cualquier padding (relleno), puedes utilizar DevTools para comprobar que el valor calculado de esa área es lo suficientemente grande. En el siguiente ejemplo, estoy usando em para mi texto y padding.

Inspecciona la a del enlace y, en Chrome DevTools, cambia al panel de Calculados en donde puedes inspeccionar las distintas partes del cuadro y ver a qué tamaño de píxeles se resuelven. En Firefox DevTools hay un panel de diseño. En ese panel obtienes el tamaño real del elemento inspeccionado.

El panel de diseño en Firefox DevTools muestra el tamaño del elemento a

Usar consultas de medios para detectar el uso de la pantalla táctil #

Una de las características de los medios que ahora podemos probar con las consultas de medios es si la entrada principal del usuario es una pantalla táctil. La función de pointer nos regresará un fine o coarse. Un buen puntero será alguien que use un ratón o trackpad, incluso si ese ratón está conectado a través de Bluetooth a un teléfono. Un coarse indica una pantalla táctil, que podría ser un dispositivo móvil, pero también puede ser una pantalla de computadora portátil o una tableta grande.

Si estás ajustando tu CSS dentro de una consulta de medios para aumentar el objetivo táctil, la prueba de un puntero grueso te permite aumentar los objetivos táctiles para todos los usuarios de pantalla táctil. Esto te da el área de toque más grande, ya sea que el dispositivo sea un teléfono o un dispositivo más grande, mientras que la prueba de ancho solo te brinda a los usuarios móviles.

.container a {
padding: .2em;
}

@media (pointer: coarse) {
.container a {
padding: .8em;
}
}

Puedes obtener más información sobre las funciones de medios de interacción, como el puntero, en el artículo de Conceptos básicos del diseño web responsivo.

Accesibilidad
Última actualización: May 29, 2020 — Mejorar el artículo
Return to all articles
Compartir
suscribir

Contribute

  • Presentar un error
  • Ver fuente

Contenido relevante

  • developer.chrome.com
  • Chrome Actualizaciones
  • Case studies
  • Podcasts
  • Shows

Conectar

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • Todos los productos
  • Condiciones y privacidad
  • Principios de la Comunidad

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.