Accesibilidad

Permitir que tus páginas respondan a diferentes tamaños de pantalla es solo una forma de asegurarte de que la mayor cantidad posible de personas puedan acceder a tu sitio web. Considera algunos de estos otros factores que debes tener en cuenta.

Cada persona percibe el color de manera diferente. Las personas con protanopia no perciben el rojo como un color distintivo. Con la deuteranopia, falta el verde. Para las personas con tritanopia, es azul.

Algunas herramientas pueden darte una idea general de cómo se muestran tus esquemas de color a las personas con diferentes tipos de visión de los colores.

La pestaña Accesibilidad de Firefox incluye un menú desplegable denominado Simular con una lista de opciones.

Protanopia simulada (sin rojo). Tritanopia simulada (sin azul)
Ver un sitio web con simulaciones de diferentes tipos de visión de color

En las Herramientas para desarrolladores de Chrome, la pestaña de renderización te permite emular las deficiencias de visión.

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:

  1. Preferencias del sistema
  2. Accesibilidad
  3. Display
  4. Filtros de color
  5. Habilitar los filtros de color

Selecciona una de las opciones.

Opciones de filtro de color en las preferencias del sistema.

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. Pero también deberías aplicar algún otro indicador de estilo, como subrayar los vínculos o ponerlos en negrita.

Qué no debes hacer
a {
 
color: red;
}
Qué debes hacer
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 color del fondo, el texto se vuelve difícil de leer. El 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.

Estas son algunas herramientas que puedes usar para probar la proporción de contraste del texto y los colores del fondo:

Te recomendamos que siempre declares color y background-color juntos en tu CSS. No asumas que el color de fondo será el predeterminado del navegador. Las personas pueden cambiar los colores que usa su navegador y, de hecho, lo hacen.

Qué no debes hacer
body {
 
color: black;
}
Qué debes hacer
body {
 
color: black;
 
background-color: white;
}

Contraste alto

Algunas personas configuran sus sistemas operativos para que usen un modo de contraste alto. Puedes probarlo en tu sistema operativo.

En Mac, ve a:

  1. Preferencias del sistema
  2. Accesibilidad
  3. Display

Selecciona la opción para aumentar el contraste.

Aumenta el contraste en las preferencias del sistema.

Existe una función multimedia para detectar si alguien habilitó el modo de contraste alto. Se puede consultar la función multimedia prefers-contrast para tres valores: no-preference, less y more. Puedes usar esta información para ajustar la paleta de colores de tu sitio.

Navegadores compatibles

  • Chrome: 96.
  • Borde: 96.
  • Firefox: 101.
  • Safari: 14.1.

Origen

Las personas también pueden establecer una preferencia en su sistema operativo para usar colores invertidos.

En Mac, ve a:

  1. Preferencias del sistema
  2. Accesibilidad
  3. Display

Selecciona la opción para invertir colores.

Invierte los colores en las preferencias del sistema.

Asegúrate de que tu sitio web aún tenga sentido para alguien que navega con los colores invertidos. Ten cuidado con las sombras de cuadros, ya que pueden requerir ajustes cuando se invierten los colores.

Tamaño de 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 su visión disminuye, es posible que ajuste 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 esta configuración 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 hacerlo mientras visitas una página web si te acercas. ¿Tu sitio web sigue funcionando si el tamaño de la fuente predeterminado aumenta un 200%? ¿Y un 400%?

Un usuario que visita tu sitio web en una computadora de escritorio con el tamaño de fuente aumentado al 400% debería obtener el mismo diseño que alguien que visita tu sitio en un dispositivo de pantalla pequeña.

Clearleft punto com.
Se vio el mismo sitio web en una computadora de escritorio y en un dispositivo móvil. El tamaño de la fuente del navegador de escritorio se ha incrementado al 400%.

Navegación con el teclado

No todos usan un mouse o un panel táctil para navegar por páginas web. El teclado es otra forma de desplazarse por una página, y 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 cuyo estilo se ajuste 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 definir el estilo de tus vínculos para la navegación con el teclado. Puedes hacer que esos estilos se noten más.

a:focus,
a:hover {
 
outline: 1px dotted;
}
a:focus-visible {
 
outline: 3px solid;
}

A medida que el usuario presiona la tecla de tabulación de un vínculo a otro o de un campo de formulario al campo del formulario, esos elementos se enfocarán en el orden en que aparecen en la estructura del documento. Esto también debe coincidir con el orden visual.

Ten cuidado con la propiedad order de CSS. Puedes usar esta opción en combinación con flexbox y cuadrícula para colocar los elementos en un orden visual diferente de su orden en HTML. Es una función muy útil, pero podría confundir a las personas que navegan por el teclado.

Prueba tus páginas web con la tecla tab del teclado para asegurarte de que el orden de tabulación tenga sentido.

En el panel Accesibilidad de las herramientas para desarrolladores del navegador Firefox, hay una opción para Mostrar el orden de tabulación. Si habilitas esta opción, se superpondrán los números en cada elemento enfocable.

Visualizar el orden de las pestañas mediante la pestaña Accesibilidad de Firefox

Movimiento reducido

La animación y el movimiento son formas maravillosas de dar vida a los diseños web. Sin embargo, para algunas personas, esos movimientos pueden resultar muy desorientadores y hasta causar náuseas.

Hay una consulta de función que comunica si el usuario preferiría tener menos movimiento. Se llama prefers-reduced-motion. Inclúyelo donde sea que uses transiciones o animaciones de CSS.

Navegadores compatibles

  • Chrome: 74.
  • Borde: 79.
  • Firefox: 63.
  • Safari: 10.1.

Origen

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 moverse 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 cambiar la opacidad y el encadenado. La reducción de movimiento no tiene por qué implicar ninguna animación.

Voz

Las personas experimentan la Web de manera diferente. No todos ven tu sitio web en una pantalla. Las tecnologías de asistencia, como los lectores de pantalla, convierten la información de salida 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 manera útil con un lector de pantalla, debe haber información semántica útil en la página web a la que se accede en ese momento.

Anteriormente, aprendiste cómo los botones de solo ícono deben incluir un atributo para especificar el propósito del botón para los usuarios sin vista. Este es solo un ejemplo de la importancia de un 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 del documento al que se puede navegar con combinaciones de teclas.

Qué no debes hacer
<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>
Qué debes hacer
<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.

Qué no debes hacer
<div class="header">...</div>

<div class="navigation">...</div>

<div class="maincontent">...</div>

<div class="sidebar">...</div>

<div class="footer">...</div>
Qué debes hacer
<header>...</header>
<nav>...</nav>
<main>...</main>
<aside>...</aside>
<footer>...</footer>

Formularios

Asegúrate de que todos los campos del formulario tengan un elemento <label> asociado. Puedes asociar una etiqueta con un campo de formulario mediante el atributo for del elemento <label> y el atributo id correspondiente en el campo del formulario.

Qué no debes hacer
<span class="formlabel">Your name</span>
<input type="text">
Qué debes hacer
<label for="name">Your name</label>
<input id="name" type="text">

Imágenes

Proporciona siempre una descripción de texto de las imágenes con el atributo alt.

Qué no debes hacer
<img src="dog.jpg">
Qué debes hacer
<img src="dog.jpg" alt="A golden retriever sitting on the grass looking happy.">

Si la imagen es meramente presentacional, igualmente debes incluir el atributo alt, pero puedes asignarle un valor vacío.

Qué no debes hacer
<img src="texture.png">
Qué debes hacer
<img src="texture.png" alt="">

Jake Archibald publicó un artículo sobre cómo escribir excelentes textos en alt.

Intenta incluir texto descriptivo dentro de los vínculos. Evita usar frases como "haz clic aquí" o "más".

Qué no debes hacer
<p>To find out more about our latest offers, <a href="/offers.html">click here</a>.</p>
Qué debes hacer
<p>Find out more about <a href="/offers.html"> our latest offers</a>.</p>

ARIA

El uso de HTML semántico razonable hará que tus páginas web sean más accesibles para las tecnologías de asistencia, como los lectores de pantalla, y también para otras salidas de audio, como los asistentes de voz.

Algunos widgets de interfaz que no tienen un elemento HTML correspondiente: carruseles, pestañas, acordeones, etcétera. Se deben crear 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 la interfaz que aún no están disponibles como elementos HTML, familiarízate con ARIA.

Cuantas más funcionalidades personalizadas agregues con JavaScript, más necesitarás para comprender ARIA. Si usas elementos HTML nativos, es posible que no necesites ningún ARIA.

Si es posible, realiza las pruebas con usuarios reales de lectores de pantalla. Esto no solo te dará una mejor comprensión de cómo navegan por la web, sino que también eliminará las conjeturas al diseñar teniendo en cuenta la accesibilidad.

Realizar pruebas con personas reales es una excelente manera de exponer cualquier suposición que podrías 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 es muy fácil hacer suposiciones.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre accesibilidad

Con CSS, un desarrollador puede reemplazar las preferencias de un usuario, como el tamaño de fuente, ¿para el peor de los peores casos?

Verdadero
Falso

Para evitar sobrescribir la preferencia de tamaño de fuente de un usuario, ¿usa?

Unidades relativas, como rem
Unidades absolutas, como px

Todas las personas usan un mouse.

Verdadero
Falso

¿Qué hace una imagen con un atributo alt vacío?

Nothing
La imagen se trata como una presentación.
El navegador los agregará automáticamente para el usuario.
Lee "cadena vacía" a un lector de pantalla