Sabemos que es una buena idea diseñar de forma responsiva para brindar la mejor experiencia en múltiples dispositivos, pero el diseño responsivo también es un logro para la accesibilidad.
Considera un sitio como Udacity:
Un usuario con visión reducida que tiene dificultades para leer letras pequeñas podría acercar la página, tal vez hasta un 400%. Dado que el sitio usa un diseño responsivo, la interfaz se reorganiza para la "ventana gráfica más pequeña" (en realidad, para la página más grande), lo que es ideal para los usuarios de computadoras de escritorio que requieren ampliación de pantalla y para los usuarios de lectores de pantalla móviles. todos ganan. Esta es la misma página ampliada al 400%:
De hecho, solo con diseñar de forma responsiva, cumplimos con la regla 1.4.4 de la lista de verificación de WebAIM, que establece que una página es "legible y funcional cuando se duplica el tamaño del texto".
Repasar todo el diseño adaptable está fuera del alcance de esta guía, pero aquí hay algunas conclusiones importantes que mejoran tu experiencia adaptable y brindan a tus usuarios un mejor acceso a tu contenido.
Usa la metaetiqueta de viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">
El parámetro de configuración width=device-width coincide con el ancho de la pantalla en píxeles independientes del dispositivo, y el parámetro de configuración initial-scale=1 establece una relación 1:1 entre los píxeles de CSS y los píxeles independientes del dispositivo. Si lo haces, le indicas al navegador que ajuste tu contenido al tamaño de la pantalla, de modo que los usuarios no solo vean un montón de texto comprimido.
Consulta Cómo adaptar el contenido al viewport para obtener más información.
Permite que los usuarios hagan zoom
Puedes usar la metaetiqueta de viewport para evitar el zoom. Para ello, configura maximum-scale=1 o user-scaleable=no. Evita hacerlo y permite que los usuarios acerquen la imagen si lo necesitan.
Diseña con flexibilidad
Evita segmentar tus anuncios para tamaños de pantalla específicos y, en su lugar, usa una cuadrícula flexible, realizando cambios en el diseño cuando el contenido lo dicte. Como vimos en el ejemplo de Udacity, este enfoque garantiza que el diseño responda si el espacio reducido se debe a una pantalla más pequeña o a un nivel de zoom más alto.
Obtén más información sobre estas técnicas en Conceptos básicos del diseño web responsivo.
Usa unidades relativas para el texto
Para aprovechar al máximo tu cuadrícula flexible, usa unidades relativas, como em o rem, para elementos como el tamaño del texto, en lugar de valores de píxeles. Algunos navegadores admiten el cambio de tamaño del texto solo en las preferencias del usuario. Si usas un valor de píxel para el texto, este parámetro de configuración no afectará tu copia. Sin embargo, si usaste unidades relativas en todo el sitio, la copia del sitio se actualizará para reflejar la preferencia del usuario.
Esto permite que todo el sitio se redistribuya a medida que el usuario hace zoom, lo que crea la experiencia de lectura que necesita para usar tu sitio.
Evita desconectar la vista visual del orden de origen
Los usuarios que navegan por tu sitio con la tecla Tab siguen el orden del contenido en tus documentos HTML. Cuando usas métodos de diseño como Flexbox y Grid, puedes cambiar el orden visual de los elementos, lo que puede generar una discrepancia con el orden del código fuente. Esto puede hacer que el usuario salte por la página con cada tabulación.
Prueba tu diseño en cada punto de interrupción presionando la tecla Tab para recorrer el contenido. Pregúntate: "¿El flujo de la página sigue teniendo sentido?".
Obtén más información sobre las desconexiones entre la fuente y la visualización.
Ten cuidado con las pistas espaciales
Cuando escribas microcopy, evita usar un lenguaje que indique la ubicación de un elemento en la página. En el caso de los usuarios con discapacidad visual, es posible que no tengan ese contexto compartido y se beneficien más de la identificación de la copia exacta del elemento, lo que la hace apta para la búsqueda.
Esto también ayuda a todos los usuarios, ya que referirse a la navegación como "a tu izquierda" podría no tener sentido en una versión para dispositivos móviles, en la que la navegación podría moverse a una ubicación diferente.
Asegúrate de que los objetivos táctiles sean lo suficientemente grandes en los dispositivos con pantalla táctil
En los dispositivos con pantalla táctil, asegúrate de que los objetivos de toque sean lo suficientemente grandes para que sea más fácil activarlos sin presionar otros vínculos. Un buen tamaño para cualquier elemento en el que se pueda presionar es de 48 px. Obtén más orientación sobre los botones táctiles.