Permitir que tus páginas se adapten a diferentes tamaños de pantalla es solo una forma de asegurarte de que la mayor cantidad posible de personas pueda acceder a tu sitio web. Considera algunos de estos factores que debes tener en cuenta.
Deficiencia de la visión del color
Diferentes personas perciben el color de manera diferente. Las personas con protanopia no perciben el rojo como un color distintivo. En el caso de deuteranopia, falta el color verde. En el caso de las personas con tritanopia, es azul.
Algunas herramientas pueden darte una idea general de cómo se ven tus esquemas de color para las personas con diferentes tipos de visión de color.
La pestaña Accesibilidad de Firefox incluye un menú desplegable con la etiqueta Simular y una lista de opciones.
En las Herramientas para desarrolladores de Chrome, la pestaña Renderización te permite emular las deficiencias de visión.
Estas son herramientas específicas del navegador. También es posible emular diferentes tipos de visión a nivel del sistema operativo.
En Mac, ve a:
- Preferencias del sistema
- Accesibilidad
- Display
- Filtros de color
- Habilitar filtros de color
Selecciona una de las opciones.
En general, no es una buena idea confiar puramente en el color para diferenciar entre diferentes elementos. Por ejemplo, puedes (y debes) hacer que tus vínculos tengan un color diferente al texto que los rodea. Sin embargo, también debes aplicar algún otro indicador de estilo, como subrayar los vínculos o ponerlos en negrita.
a {
color: red;
}
a {
color: red;
font-weight: bold;
}
Contraste de color
Algunas combinaciones de colores pueden causar problemas. Si no hay suficiente contraste entre el color del primer plano y el del fondo, el texto se vuelve difícil de leer. Un contraste de color deficiente es uno de los problemas de accesibilidad más comunes en la web, pero, afortunadamente, es uno que puedes detectar al principio del proceso de diseño.
A continuación, se incluyen algunas herramientas que puedes usar para probar la relación de contraste de los colores del texto y del fondo:
- tota11y es un marcador que puedes agregar a la barra de herramientas de tu navegador.
- VisBug es una extensión del navegador disponible para todos los navegadores de escritorio principales.
- El Inspector de accesibilidad de Firefox puede revisar si hay problemas con el contraste visual.
- También puedes descubrir y corregir texto de contraste bajo con las Herramientas para desarrolladores de Chrome.
- En el navegador Edge de Microsoft, puedes probar el contraste del color del texto con el selector de color.
Te recomendamos que siempre declares color y background-color juntos en tu CSS. No des por sentado que el color de fondo será el color predeterminado del navegador. Las personas pueden cambiar los colores que usa el navegador y, de hecho, lo hacen.
body {
color: black;
}
body {
color: black;
background-color: white;
}
Contraste alto
Algunas personas configuran sus sistemas operativos para usar un modo de contraste alto. Puedes intentarlo en tu sistema operativo.
En Mac, ve a:
- Preferencias del sistema
- Accesibilidad
- Display
Selecciona la opción para aumentar el contraste.
Existe una función multimedia para detectar si alguien habilitó el modo de contraste alto. La función multimedia prefers-contrast se puede consultar para tres valores: no-preference, less y more. Puedes usar esta información para ajustar la paleta de colores de tu sitio.
Los usuarios también pueden establecer la preferencia de usar colores invertidos en su sistema operativo.
En Mac, ve a:
- Preferencias del sistema
- Accesibilidad
- Display
Selecciona la opción para invertir los colores.
Asegúrate de que tu sitio web tenga sentido para los usuarios que navegan por los colores invertidos. Ten cuidado con las sombras de cuadro, ya que es posible que deban ajustarse cuando se invierten los colores.
Tamaño de la fuente
El color no es lo único que las personas pueden ajustar en su navegador; también pueden ajustar el tamaño de fuente predeterminado. A medida que disminuya su visión, podrían ajustar el tamaño de fuente predeterminado en sus navegadores o sistemas operativos, lo que aumentará las cifras con el paso de los años.
Puedes responder a estas configuraciones usando tamaños de fuente relativos. Evita usar unidades como px. En su lugar, usa unidades relativas como rem o ch.
Intenta cambiar la configuración predeterminada del tamaño del texto en tu navegador. Puedes hacerlo en las preferencias de tu navegador. También puedes acercar la imagen para hacerlo mientras visitas una página web. ¿Tu sitio web sigue funcionando si se aumenta el tamaño predeterminado de la fuente en un 200%? ¿Qué tal un 400%?
Un usuario que visita tu sitio web en una computadora de escritorio con un tamaño de fuente superior al 400% debería tener el mismo diseño que un usuario que visita tu sitio en un dispositivo de pantalla pequeña.
Navegación con el teclado
No todos usan un mouse o un panel táctil para navegar por las páginas web. El teclado es otra forma de desplazarse por una página. La tecla tab es particularmente útil. Los usuarios pueden pasar rápidamente de un vínculo o campo de formulario al siguiente.
Los vínculos diseñados con las seudoclases :hover y :focus mostrarán esos estilos independientemente de si alguien usa un mouse, un panel táctil o un teclado. Usa la pseudoclase :focus-visible para aplicar estilo a los vínculos solo para la navegación con el teclado. Puedes hacer que esos estilos sean más notorios.
a:focus,
a:hover {
outline: 1px dotted;
}
a:focus-visible {
outline: 3px solid;
}
A medida que el usuario vaya del vínculo al vínculo o del campo del formulario al campo del formulario, esos elementos se enfocarán en el orden en que aparezcan en la estructura del documento. Esto también debe coincidir con el orden visual.
Ten cuidado con la propiedad order de CSS. Puedes usar esto junto con Flexbox y la cuadrícula para colocar los elementos en un orden visual diferente al de su orden en el HTML. Es una función muy útil, pero podría confundir a las personas que navegan con un teclado.
Usa la tecla tab del teclado para probar tus páginas web y asegurarte de que el orden de tabulación tenga sentido.
En el panel Accesibilidad de las herramientas para desarrolladores del navegador Firefox, existe una opción para Mostrar orden de tabulación. Si habilitas esta opción, los números se superpondrán en cada elemento enfocable.
Movimiento reducido
La animación y el movimiento son formas maravillosas de dar vida a los diseños web. Sin embargo, para algunas personas, estos movimientos pueden ser muy desorientadores e incluso causar náuseas.
Hay una consulta de funciones que comunica si el usuario preferiría menos movimiento. Se llama prefers-reduced-motion. Inclúyela siempre que uses transiciones o animaciones de CSS.
a:hover {
transform: scale(150%);
}
@media (prefers-reduced-motion: no-preference) {
a {
transition-duration: 0.4s;
transition-property: transform;
}
}
La consulta de medios prefers-reduced-motion es específicamente para el movimiento en la pantalla. Si usas transiciones en el color de un elemento que no debería verse afectado por prefers-reduced-motion. También es correcto transferir la opacidad y el fundido cruzado. La reducción del movimiento no necesariamente significa que no haya animación.
Voice
Las personas experimentan la Web de forma diferente. No todos los usuarios ven tu sitio web en una pantalla. Las tecnologías de asistencia, como los lectores de pantalla, convierten la salida de información en una pantalla en palabras habladas.
Los lectores de pantalla funcionan con todo tipo de aplicaciones, incluidos los navegadores web. Para que un navegador web se comunique de forma útil con un lector de pantalla, debe haber información semántica útil en la página web a la que se está accediendo en ese momento.
Anteriormente, aprendiste la manera en que los botones de solo íconos deben incluir un atributo para especificar el propósito del botón para los usuarios no videntes. Este es solo un ejemplo de la importancia del HTML básico sólido.
Encabezados
Usa encabezados como <h1>, <h2>, <h3>, etc. de manera adecuada. Los lectores de pantalla usan estos encabezados para generar un esquema de tu documento que se pueda navegar con combinaciones de teclas.
<div class="heading-main">Welcome to my page</div> <div class="heading-secondary">About me</div> <div class="heading-tertiary">My childhood</div> <div class="heading-secondary">About this website</div> <div class="heading-tertiary">How this site was built</div>
<h1>Welcome to my page</h1>
<h2>About me</h2>
<h3>My childhood</h3>
<h2>About this website</h2>
<h3>How this site was built</h3>
Estructura
Usa elementos de referencia como <main>, <nav>, <aside>, <header> y <footer> para estructurar el contenido de tu página. Los usuarios de lectores de pantalla pueden ir directamente a estos puntos de referencia.
<div class="header">...</div> <div class="navigation">...</div> <div class="maincontent">...</div> <div class="sidebar">...</div> <div class="footer">...</div>
<header>...</header> <nav>...</nav> <main>...</main> <aside>...</aside> <footer>...</footer>
Formularios
Asegúrate de que cada campo del formulario tenga un elemento <label> asociado. Puedes asociar una etiqueta a un campo de formulario usando el atributo for en el elemento <label> y el atributo id correspondiente en el campo del formulario.
<span class="formlabel">Your name</span> <input type="text">
<label for="name">Your name</label> <input id="name" type="text">
Imágenes
Siempre proporciona una descripción de texto de las imágenes con el atributo alt.
<img src="dog.jpg">
<img src="dog.jpg" alt="A golden retriever sitting on the grass looking happy.">
Si la imagen es meramente presentacional, debes incluir el atributo alt, pero puedes dejarle un valor vacío.
<img src="texture.png">
<img src="texture.png" alt="">
Jake Archibald publicó un artículo sobre cómo escribir un excelente texto en alt.
Vínculos
Intenta incluir texto descriptivo dentro de los vínculos. Evita usar frases como "haz clic aquí" o "más".
<p>To find out more about our latest offers, <a href="/offers.html">click here</a>.</p>
<p>Find out more about <a href="/offers.html"> our latest offers</a>.</p>
ARIA
El uso de código HTML semántico razonable hará que tus páginas web sean más accesibles para tecnologías de asistencia, como lectores de pantalla, y también para otras salidas de audio como asistentes de voz.
Algunos widgets de interfaz que no tienen un elemento HTML correspondiente: carruseles, pestañas, acordeones, etc. Estos se deben compilar desde cero con una combinación de HTML, CSS, JavaScript y ARIA.
ARIA significa aplicaciones de Internet enriquecidas accesibles. Su vocabulario te permite proporcionar información semántica cuando no hay un elemento HTML adecuado disponible.
Si necesitas crear elementos de interfaz que aún no están disponibles como elementos HTML, familiarízate con ARIA.
Cuanta más funcionalidad a medida agregues con JavaScript, más necesitarás para comprender ARIA. Si usas elementos HTML nativos, es posible que no necesites ningún elemento ARIA.
Si es posible, realiza la prueba con usuarios reales de lectores de pantalla. Esto no solo te dará una mejor comprensión de cómo navegan la web, sino que también eliminará las conjeturas de diseñar teniendo en cuenta la accesibilidad.
Hacer pruebas con personas reales es una excelente manera de exponer cualquier suposición que puedas estar haciendo. En el siguiente módulo, aprenderás sobre las diferentes formas en que las personas interactúan con tus sitios web, otra área en la que resulta demasiado fácil hacer suposiciones.
Verifica tus conocimientos
Pon a prueba tus conocimientos sobre accesibilidad
Con CSS, un desarrollador puede sobrescribir una preferencia del usuario, como el tamaño de fuente, en el peor de los casos.
body { font-size: 12px; }.Para evitar sobrescribir la preferencia de tamaño de fuente de un usuario, usa?
pxremTodas las personas del mundo usan un mouse.
¿Para qué sirve una imagen con un atributo alt vacío?