Sabemos que es buena idea diseñar de forma responsiva para brindar la mejor experiencia multidispositivo pero el diseño adaptable también es un beneficio de la accesibilidad.
Considera un sitio como Udacity:
Un usuario con visión reducida que tiene dificultad para leer letras pequeñas puede hacer zoom en la página, quizá hasta un 400%. Como el sitio está diseñado de manera responsiva, la IU se reorganizará para la "ventana de visualización más pequeña". (en realidad, para la página más grande), lo que es ideal para los usuarios de computadoras que requieren ampliación de la pantalla. y también para usuarios de lectores de pantalla móviles. De esta manera, todos ganan. Esta es la misma página ampliada al 400%:
De hecho, con solo 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 "... debe ser 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 beneficiarán tu experiencia responsiva y brindarles a los usuarios un mejor acceso a tu contenido.
Cómo usar la metaetiqueta de la vista del puerto
<meta name="viewport" content="width=device-width, initial-scale=1.0">
La configuración de width=device-width coincidirá con el ancho de la pantalla en píxeles independientes del dispositivo.
y la configuración initial-scale=1 establece una relación de 1:1 entre los píxeles CSS y los píxeles independientes del dispositivo.
Esto le indica al navegador que ajuste el contenido al tamaño de la pantalla,
para que los usuarios no vean
un montón de texto abreviado.
Para obtener más información, consulta Cómo ajustar el contenido al viewport.
Permitir que los usuarios hagan zoom
Es posible usar la metaetiqueta de la vista del puerto para evitar el zoom,
estableciendo maximum-scale=1 o user-scaleable=no.
Evita hacer esto y permite que los usuarios acerquen la pantalla si lo necesitan.
Diseño con flexibilidad
Evite segmentar tamaños de pantalla específicos y use una cuadrícula flexible. y hacer cambios en el diseño cuando el contenido lo dicte. Como vimos con el ejemplo de Udacity anterior, este enfoque garantiza que el diseño responda ya sea que el espacio reducido se deba a una pantalla más pequeña o a un nivel de zoom más alto.
Puedes obtener más información sobre estas técnicas en el artículo Conceptos básicos del diseño web responsivo.
Usa unidades relativas para el texto
Para aprovechar al máximo tu cuadrícula flexible usan unidades relativas como em o rem para, por ejemplo, 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 proceso, entonces la copia del sitio se actualizará para reflejar las preferencias del usuario.
Esto permitirá que todo el sitio se reprocese a medida que el usuario se acerque. creando la experiencia de lectura que necesitan para usar tu sitio.
Evita desconectar la vista visual del orden de origen
Un visitante que navega con la tecla Tab en tu sitio seguirá el orden del contenido del documento HTML. Cuando uses métodos de diseño modernos, como Flexbox y Grid, es fácil lograr que la renderización visual no coincida con el orden de origen. Esto puede provocar saltos desconcertantes por la página cuando alguien usa el teclado para moverse.
Asegúrate de probar tu diseño en cada punto de interrupción deslizando tabulaciones en el contenido, ¿el flujo en la página aún tiene sentido?
Obtén más información sobre la desconexión de la fuente y la visualización visual.
Cuídate de las pistas espaciales
Al escribir microcopias, evita usar lenguaje que indique la ubicación de un elemento en la página. Por ejemplo, consultar la navegación "a la izquierda" no tiene sentido en una versión para dispositivos móviles cuando la navegación está en la parte superior de la pantalla.
Asegúrate de que los botones táctiles sean lo suficientemente grandes en dispositivos con pantalla táctil
En dispositivos con pantalla táctil, asegúrate de que los objetivos táctiles sean lo suficientemente grandes para que sean fáciles de activar sin tener que ingresar a otros vínculos. Un buen tamaño para cualquier elemento que se puede presionar es de 48 px, obtén más información sobre los objetivos táctiles.