Sabemos que es buena idea diseñar en forma responsiva para brindar la mejor experiencia multidispositivo, pero el diseño responsivo también proporciona un beneficio de accesibilidad.
Piensa en un sitio como Udacity:
Un usuario con visión reducida que tiene dificultad para leer letras pequeñas puede acercar la página, quizás hasta un 400%. Como el sitio está diseñado de forma responsiva, la IU se reorganizará para el "viewport más pequeño" (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 también para los usuarios de lectores de pantalla para dispositivos móviles. De esta manera, todos ganan. Esta es la misma página ampliada al 400%:
De hecho, al diseñar en forma responsiva, estamos cumpliendo la regla 1.4.4 de la lista de tareas de WebAIM, que indica que una página “… debe ser legible y funcional cuando se duplica el tamaño del texto”.
El repaso de todo el diseño responsivo está fuera del alcance de esta guía, pero estas son algunas conclusiones importantes que beneficiarán a tu experiencia responsiva y les darán a tus usuarios mejor acceso a tu contenido.
Usa la metaetiqueta viewport
<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 de 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 adapte tu contenido al tamaño de la pantalla, para que los usuarios no vean solamente un grupo de texto apretado.
Consulta Cómo adaptar el contenido al viewport para obtener más información.
Permitir que los usuarios hagan zoom
Es posible usar la metaetiqueta de ventana de visualización para evitar el zoom configurando maximum-scale=1 o user-scaleable=no.
Evita hacerlo y permite que los usuarios acerquen la imagen si es necesario.
Diseña con flexibilidad
Evita segmentar tu contenido para tamaños de pantalla específicos y, en su lugar, usa una cuadrícula flexible y realiza cambios en el diseño cuando lo exija el contenido. Como vimos con el ejemplo de Udacity anterior, 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.
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, usa unidades relativas, como em o rem, para elementos como el tamaño del texto, en lugar de valores de píxeles. Algunos navegadores soportan el cambio de tamaño del texto solo en las preferencias del usuario, y si usas un valor de píxel para el texto, este parámetro de configuración no afectará a tu copia. Sin embargo, si usaste unidades relativas en todo momento, la copia del sitio se actualizará para reflejar la preferencia del usuario.
Esto permitirá que todo el sitio se vuelva a fluir a medida que el usuario acerque la imagen, lo que creará la experiencia de lectura que necesita para usar tu sitio.
Evita desconectar la vista visual del orden de la fuente.
Un visitante que use la tecla Tab para desplazarse por tu sitio con el teclado seguirá el orden del contenido en el documento HTML. Cuando se usan métodos de diseño modernos, como Flexbox y Grid, es fácil hacer que la renderización visual no coincida con el orden de la fuente. Esto puede provocar saltos desorientadores en la página para alguien que se desplaza con el teclado.
Asegúrate de probar tu diseño en cada punto de inflexión. Para ello, usa la tecla Tab para desplazarte por el contenido. ¿El flujo a través de la página sigue teniendo sentido?
Obtén más información sobre la desconexión de la fuente y la pantalla visual.
Ten cuidado con las pistas espaciales
Cuando escribas microtexto, evita usar lenguaje que indique la ubicación de un elemento en la página. Por ejemplo, hacer referencia a 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 los dispositivos con pantalla táctil, asegúrate de que los elementos táctiles sean lo suficientemente grandes para que se activen fácilmente sin que se presionen 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.