Accesibilidad

Permitir que tus páginas respondan a diferentes tamaños de pantalla es solo una forma de asegurarte de que tu sitio web sea accesible para la mayor cantidad de personas posible. Ten en cuenta algunos de estos otros factores.

Deficiencia en la percepción del color

Cada persona percibe el color de manera diferente. Las personas con protanopia no perciben el rojo como un color distinto. Con la deuteranopia, falta el color verde. Para 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 los colores.

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

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

Esas 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. Cómo habilitar los filtros de color

Selecciona una de las opciones.

En general, no es una buena idea depender únicamente del color para diferenciar entre los distintos elementos. Por ejemplo, puedes (y debes) hacer que tus vínculos tengan un color diferente al del texto circundante. Sin embargo, también debes aplicar algún otro indicador de diseño, 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 de primer plano y el color de 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 en las primeras etapas del proceso de diseño.

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

• VisBug es una extensión del navegador disponible para todos los navegadores principales de computadoras.
• El Inspector de accesibilidad de Firefox puede verificar 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 Edge de Microsoft, puedes probar el contraste de color del texto con el selector de color.

Es recomendable que siempre declares color y background-color juntos en tu CSS. No supongas que el color de fondo será el predeterminado del navegador. Las personas pueden cambiar los colores que usa su navegador y 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 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.

Hay una función de medios para detectar si alguien habilitó el modo de contraste alto. La función de medios prefers-contrast se puede consultar para obtener 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 los colores.

Asegúrate de que tu sitio web siga teniendo sentido para alguien que navega con los colores invertidos. Ten cuidado con las sombras de los cuadros, ya que es posible que deban ajustarse cuando se invierten los colores.

Tamaño de fuente

El color no es lo único que las personas pueden ajustar en su navegador, sino que también pueden ajustar el tamaño de fuente predeterminado. A medida que su visión disminuye, es posible que ajusten el tamaño de fuente predeterminado en sus navegadores o sistemas operativos, y aumenten los números con el paso de los años.

Puedes responder a estos parámetros de configuración con tamaños de fuente relativos. Evita usar unidades como px. En su lugar, usa unidades relativas, como rem o ch.

Intenta cambiar el parámetro de configuración de tamaño de texto predeterminado en tu navegador. Puedes hacerlo en las preferencias del navegador. También puedes hacerlo mientras visitas una página web acercándola. ¿Tu sitio web sigue funcionando si el tamaño de fuente predeterminado se incrementa en un 200%? ¿Qué tal un 400%?

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

Navegación con el teclado

No todas las personas usan un mouse o un panel táctil para navegar por las páginas web. El teclado es otra forma de navegar 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 diseñados con las seudoclases :hover y :focus mostrarán esos diseños independientemente de si alguien usa un mouse, un panel táctil o un teclado. Usa la seudoclase :focus-visible para aplicar estilo a tus vínculos solo para la navegación con el teclado. Puedes hacer que esos estilos sean más visibles.

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

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

Ten cuidado con la propiedad order de CSS. Puedes usar esta propiedad en combinación con flexbox y cuadrícula para colocar elementos en un orden visual diferente al que tienen en el código HTML. Esta es una función potente, pero podría confundir a las personas que navegan con un teclado.

Prueba tus páginas web con la tecla tab de tu 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 orden de tabulación. Si habilitas esta opción, se superpondrán 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, estos movimientos pueden ser muy desorientadores e incluso causar náuseas.

Hay una consulta de funciones que comunica si el usuario prefiere menos movimiento. Se llama prefers-reduced-motion. Inclúyelo dondequiera que uses transiciones o animaciones 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ífica 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 está bien hacer una transición de opacidad y una transición cruzada. El movimiento reducido no significa que no haya animaciones.

Voz

Las personas experimentan la Web de diferentes maneras. No todas las personas ven tu sitio web en una pantalla. Las tecnologías de asistencia, como los lectores de pantalla, convierten la información que se muestra en la 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.

Anteriormente, aprendiste que los botones solo con íconos deben incluir un atributo para especificar el propósito del botón a los usuarios no videntes. Este es solo un ejemplo de la importancia de un HTML básico sólido.

Encabezados

Usa los encabezados, como <h1>, <h2>, <h3>, etcétera, de forma sensata. Los lectores de pantalla usan estos encabezados para generar un esquema de tu documento, por el que puedes 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 saltar 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 con el atributo for en el elemento <label> y el atributo id correspondiente en el campo de 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 ilustrativa, 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 texto alt excelente.

Vínculos

Intenta proporcionar 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

Usar código HTML semántico adecuado 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 otros resultados de audio, como los asistentes de voz.

Algunos widgets de la interfaz que no tienen un elemento HTML correspondiente, como los carruseles, las pestañas y los acordeones. Esos elementos deben crearse desde cero con una combinación de HTML, CSS, JavaScript y ARIA.

ARIA significa Accessible Rich Internet Applications (aplicaciones de Internet enriquecidas y 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.

Cuanto más funcionalidad personalizada agregues con JavaScript, más necesitarás comprender ARIA. Si te limitas a los elementos HTML estándar, es posible que no necesites ARIA.

Si es posible, realiza pruebas con usuarios reales de lectores de pantalla. Esto no solo te permitirá comprender mejor cómo navegan por la Web, sino que también te ayudará a diseñar con la accesibilidad en mente sin tener que adivinar.

Probar con personas reales es una excelente manera de exponer cualquier suposición que puedas estar haciendo. En el próximo 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