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.

Deficiencia de la visión del color

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.

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.

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.

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 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:

• tota11y es unbookmarklet que puedes agregar a la barra de herramientas de tu navegador.
• VisBug es una extensión de navegador disponible para todos los principales navegadores de escritorio.
• El Inspector de accesibilidad de Firefox puede comprobar si hay problemas con el contraste visual.
• También puedes descubrir y corregir texto con contraste bajo con las Herramientas para desarrolladores de Chrome.
• En el navegador de Microsoft Edge, puedes probar el contraste de texto y color con el selector de color.

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.

body {
  color: black;
}

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.

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.

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.

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.

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.

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.

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.

<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 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.

<span class="formlabel">Your name</span>
<input type="text">

<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.

<img src="dog.jpg">

<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.

<img src="texture.png">

<img src="texture.png" alt="">

Jake Archibald publicó un artículo sobre cómo escribir excelentes textos 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 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