Incluso sin una revisión completa de la accesibilidad de WAVE, hay muchas medidas sencillas que puedes tomar para que tu sitio web sea más navegable para las personas con discapacidad (y para todos los demás).
No hay duda de que Internet es una de las mayores innovaciones de los tiempos modernos. La web, en particular, ha proporcionado a miles de millones de personas un nivel de acceso a la información, el entretenimiento, los bienes y servicios, y la conexión humana que las generaciones anteriores apenas podían imaginar.
Pero no todo el mundo puede hacer uso de la web por igual. Las personas con discapacidades visuales o físicas dependen de ayudas tecnológicas para hacer en la red lo que el resto de nosotros da por sentado. Y esas ayudas sólo tienen éxito en la medida en que los desarrolladores web las utilicen o las apoyen. Los diseños complicados de las páginas pueden confundir a los lectores de pantalla, e incluso los no discapacitados pueden tener problemas para entender el texto de bajo contraste o los colores engañosos.
Las normas de accesibilidad en la web se rigen generalmente por las Directrices de Accesibilidad al Contenido en la Web (WCAG) del W3C. Sin embargo, seguir todas las pautas de las WCAG supone mucho trabajo, y es fácil ahogarse en un mar de detalles menores mientras se pierde el panorama general.
En este artículo, vamos a enumerar 10 pasos que puede seguir, en orden ascendente de complejidad, para hacer que sus sitios web sean más accesibles. Puedes poner en práctica primero las sugerencias más sencillas y luego ir subiendo a medida que el tiempo y los recursos te lo permitan.
Evolución de la WAN: De SD-WAN a Secure Access Service Edge (SASE)
Por cierto, las medidas de accesibilidad de la web no sólo ayudan a acomodar a las personas con problemas de visión o de control motor, sino que también hacen que los sitios web sean más fáciles de leer y navegar para todos. Estas son las mejoras que puede introducir en sus sitios web y que beneficiarán a todos los visitantes.
Índice de contenidos
- Ponga un título a las imágenes de su sitio web (fácil)
- Utilice etiquetas de encabezado para organizar los documentos (fácil)
- Etiquete los formularios y manténgalos legibles (fácil)
- Asegúrese de que la navegación de los elementos mediante el teclado sea coherente y accesible (moderado)
- Permitir el ajuste manual del tamaño de la fuente, no sólo el zoom (moderado)
Titular las imágenes de su sitio web (fácil)
Una tarea sencilla que puede realizar de inmediato y que le reportará grandes beneficios es subtitular las imágenes de su sitio web. Los subtítulos permiten al software lector de pantalla leer en voz alta las descripciones de las imágenes que se encuentran en el texto. También proporcionan marcadores de posición textuales para las imágenes que pueden ser útiles para los visitantes del sitio web con un ancho de banda limitado o conexiones erráticas.
La forma más sencilla de subtitular imágenes es añadir una etiqueta alt a la etiqueta img, que proporcione una descripción textual de lo que se muestra en la imagen.
<img src=”https://yoursite.com/deckard.jpg” alt=”Short-haired man in overcoat”>
Si proporciona subtítulos con imágenes como parte del texto, y no sólo en los metadatos de la imagen, utilice los elementos de nivel de bloque figure y figcaption. Estos elementos pueden ser estilizados individualmente o modificados con clases CSS. Además, como figcaption es un elemento a nivel de bloque, puede contener otros elementos o formatos según sea necesario.
Otra etiqueta que puede añadirse a los elementos para proporcionar una descripción es la etiqueta longdesc. En lugar de contener el texto que describe la imagen, puede contener un URI que proporciona la descripción. Sin embargo, el estado del soporte de los navegadores para longdesc es turbio en este momento, por lo que es mejor no confiar en él solo. Utilice longdesc junto con alt o figure/figcaption.
Utiliza las etiquetas de cabecera para organizar los documentos (fácil)
El uso de etiquetas de encabezado es una práctica común en el diseño web, pero vale la pena repetirlo en este contexto: Utiliza h1, h2, h3, etc. para dividir los documentos en secciones a nivel de esquema. Lo más sencillo es marcar el título de la página como h1 y todos los subtítulos como h2.
Esto es importante para la accesibilidad. Muchos lectores de pantalla interpretan las etiquetas de encabezado como anclas a las que el lector puede saltar directamente con una pulsación o un comando. Esto hace que el documento sea más navegable sin tener que añadir metadatos adicionales.
Etiquetar los formularios y mantenerlos legibles (fácil)
Si tienes un texto descriptivo para los campos de un formulario, eso es bueno. Es aún mejor cuando esas descripciones están explícitamente asociadas a los elementos que describen. Utiliza siempre la etiqueta label para asociar la descripción de cada campo con su campo, ya que esto proporciona a los lectores de pantalla y otros sistemas de accesibilidad más contexto sobre cada campo.
Otro posible problema de accesibilidad en los formularios es el uso de texto de marcador de posición en los campos del formulario. El texto del marcador de posición -las sugerencias de texto que aparecen por defecto cuando no se escribe nada en un campo- suele ser útil. Pero no se debe confiar en él para transmitir información esencial, ya que suele aparecer en un tipo de letra atenuado que puede ser difícil de leer. La información del texto del marcador de posición también debería estar disponible a través de la propiedad title del campo, donde puede mostrarse como información sobre herramientas al pasar el ratón por encima o ser extraída por el software de lectura.
Tenga en cuenta que a menudo puede obtener información rápida sobre el etiquetado de formularios e imágenes y otros problemas de accesibilidad en los navegadores modernos utilizando el panel de inspección del navegador. En las versiones actuales de Chrome y Edge, por ejemplo, la pestaña «Problemas» de la ventana de herramientas para desarrolladores incluye sugerencias para mejorar la accesibilidad.
formularios de accesibilidad del sitio web IDG
La pestaña «Problemas» de la ventana de herramientas de desarrollo de una versión reciente de Microsoft Edge. Los problemas de accesibilidad aparecen bajo su propio encabezado y se puede navegar por ellos para examinar los elementos a los que se refieren.
Garantizar que la navegación de los elementos mediante el teclado sea coherente y accesible (moderado)
La mayor parte de la navegación en una página web se realiza con el ratón o con eventos táctiles. Cualquier elemento en el que quieras que alguien haga clic debería ser accesible con la navegación por teclado. Sólo asegúrate de que, al hacerlo, no acabes rompiendo otras cosas.
Cuando una página está enfocada, la tecla Tab puede usarse para moverse entre elementos de la página en secuencia-una propiedad llamada «tab-indexable». Los elementos en los que se puede hacer clic son indexables por tabulación por defecto, y se indexan por tabulación en el orden en que están dispuestos en el documento.
Para ello, es conveniente dejar que el orden de los elementos en el documento dicte el orden de tabulación en la medida de lo posible. Es posible utilizar el elemento tabindex para reordenar cómo se tabulan los elementos, pero la estrategia moderna de diseño web es evitar el reordenamiento tanto como sea posible.
También es posible que tengas que añadir índices de tabulación a componentes JavaScript creados a medida. Si lo haces, asegúrate de no secuestrar inadvertidamente el índice de pestañas de otros componentes. (Ese documento vinculado también tiene buenos consejos sobre cómo tratar los subelementos de los controles, que no deben ser indexados por tabulación).
Otra forma de hacer que los elementos sean accesibles por medio de las teclas es a través de los enlaces de teclado, donde uno puede presionar una tecla para activar o moverse a un elemento específico. Por ejemplo, una aplicación de chat podría enviar mensajes utilizando Alt-S cuando el cuadro de texto está enfocado, o saltar de nuevo al cuadro de texto con otra tecla de acceso directo (para no tener que volver a desplazarse hasta él).
Si quieres añadir enlaces de teclas para los elementos de la página, ten en cuenta estos puntos:
Deja claro al usuario cuáles son las teclas de acceso rápido y dónde funcionan. El usuario no debería tener que descubrir las acciones de las teclas de acceso rápido por sí mismo, o tropezar con ellas por error. Además, el alcance de la acción es importante. Si la tecla de acceso rápido sólo se activa cuando algún elemento concreto está enfocado, el usuario debe saberlo.
El atributo accesskey nativo de HTML permite asignar combinaciones de teclas a elementos concretos. Sin embargo, su comportamiento no está soportado de forma consistente, y algunas combinaciones de teclas podrían no estar disponibles para todos los usuarios. Por lo tanto, no se recomienda como forma de hacerlo.
Permitir el ajuste manual del tamaño de la fuente, no sólo el zoom (moderado)
Uno de los problemas de permitir que el usuario haga zoom para ajustar el tamaño de los elementos es que cambia el tamaño de todo en la página. Una solución mejor es implementar iconos de más y menos en algún lugar de la página que cambien el tamaño del texto base a petición, y guardar esa configuración en el cliente. Esto implicaría poco más que una función de JavaScript que altere el tamaño de la fuente base para los estilos de texto en el documento.
No utilizar tablas para la maquetación (moderado)
Esto no significa que no debas usar tablas, y punto. Las tablas son inmensamente útiles cuando necesitas presentar datos en un formato rígido de filas y columnas. Sólo que no deberían utilizarse para el diseño, es decir, para dar formato a un texto que no son datos tabulares. Hace tiempo, era una práctica común utilizar tablas para posicionar elementos. Pero hoy en día, flexbox y otros métodos de estilización a nivel de bloque proporcionan formas más sofisticadas y potentes de posicionar los elementos de forma precisa y sensible.
Una razón clave para no utilizar tablas para el diseño es que es una confusión de intenciones. Los lectores de pantalla analizan el contenido de las tablas como datos y no como diseño. Interpretan los encabezados de las columnas y filas de las tablas como etiquetas de los datos que contienen. Si una tabla se utiliza para el diseño, el lector de pantalla puede malinterpretarlo.
Si ya evitas las tablas para el diseño y utilizas un marco CSS moderno, ¡genial! Si no es así, tómate el tiempo necesario para cambiar a uno y abandonar el uso de tablas. Es un esfuerzo que puede llevar mucho tiempo, por lo que lo hemos catalogado como un elemento de nivel «moderado».
Crea un modo oscuro o de alto contraste para tu sitio web (moderado)
Los modos oscuros para los sitios web y las aplicaciones se han puesto de moda, y con razón. Con pantallas tan grandes y brillantes como las de hoy en día, y con un mayor número de personas que miran fijamente a ellas durante horas, un modo oscuro hace que la vida digital sea más fácil para los ojos.
Muchos temas preconfeccionados para sitios web vienen con una hoja de estilo de modo oscuro de algún tipo. Si ya utilizas una, puedes colocar fácilmente un selector en algún lugar -por ejemplo, en el menú de hamburguesa de tu sitio- que permita al lector activar o desactivar el modo oscuro y mantener el estado en el navegador. Sin embargo, un sitio web con un tema personalizado puede ser más difícil de dotar de un modo oscuro, ya que tendrás que construir un modo oscuro desde cero y asegurarte de que todos los elementos de tu sitio son legibles con él.
Si estás pensando en un rediseño, entonces inclínate por temas que puedan ser fácilmente despellejados para los modos oscuros.
Utiliza colores y diseños para enfatizar los elementos de la página (moderado)
Una de las formas más fáciles de llamar la atención sobre un elemento de una página web, o de darle cierto énfasis, es cambiar su color. No es una mala idea en sí misma, pero tampoco es suficiente. El color por sí solo no siempre destaca, especialmente para las personas con problemas de visión.
El énfasis debe proporcionarse siempre de más de una manera, combinando el color con otros patrones de diseño. Por ejemplo, un elemento de advertencia podría mostrarse en rojo, colocado en un recuadro, y con un icono de advertencia. Los gráficos de barras deben utilizar texturas y colores, siempre que sea posible, para destacar.
Por supuesto, la aplicación de este tipo de cambios requerirá probablemente algo más que una simple hoja de estilo. Podría requerir un gran esfuerzo de rediseño, dependiendo de cómo se represente su sitio web.
También puede valer la pena probar el esquema de colores de su sitio con un simulador de daltonismo para determinar si las personas con ciertas deficiencias visuales tendrán problemas para navegar por su sitio o para dar sentido a sus elementos visuales.
Utilice URLs descriptivas siempre que sea posible (moderado)
Las URL descriptivas codifican información sobre su destino. Una URL opaca como https://magazino.com/article/2125451 no nos dice nada sobre el artículo en cuestión. Tendríamos que hacer clic para averiguarlo, o al menos leer los metadatos de la página (que podrían no estar disponibles). En cambio, una URL descriptiva como https://magazino.com/article/ten-best-harrison-ford-films/2125451 nos dice bastante de un vistazo.
Una URL descriptiva reduce la cantidad de trabajo que un visitante tiene que realizar para saber qué contiene el artículo. Por eso, un sitio web bien diseñado dedicará una parte de la URL a una breve descripción textual del contenido, mientras que el servidor utiliza el ID del artículo para determinar qué artículo debe servir.
Los sitios web que no utilizan URLs descriptivas se enfrentan a un reto. No es poca cosa cambiar a un esquema de URL completamente nuevo después de años de acumular contenido heredado. Pero vale la pena hacer que las URL descriptivas formen parte de cualquier esfuerzo de rediseño.
Utilice la herramienta WAVE para comprobar la accesibilidad del sitio web (avanzado)
La herramienta WAVE, desarrollada y mantenida por el Centro para Personas con Discapacidad de la Universidad Estatal de Utah, proporciona información detallada y gráfica sobre la accesibilidad de un sitio web determinado. Introduzca una URL en WAVE, o utilice su API, y le proporcionará un informe que desglosa todos los problemas de accesibilidad de la página analizada. La página analizada también se muestra con marcas que indican dónde se encuentran los problemas, por lo que se puede acceder rápidamente a cada problema y ver su origen en la fuente de la página.
Cualquier sitio web creado sin tener en cuenta la accesibilidad planteará casi con toda seguridad muchos problemas con WAVE. Por lo tanto, es mejor realizar un análisis WAVE como preparación o en conjunción con una revisión importante del sitio web, y no como una medida correctiva puntual para tal o cual problema.
IDG de la onda de accesibilidad del sitio web
La herramienta WAVE escanea una página web y ofrece un desglose detallado de los problemas de accesibilidad, mayores y menores.
Serdar Yegulalp es un redactor sénior de InfoWorld, centrado en el aprendizaje automático, la contenedorización, las operaciones de desarrollo, el ecosistema de Python y las revisiones periódicas.