Aprender los elementos de una página web accesible

Objetivos de aprendizaje

Después de completar esta unidad, podrá:

• Describir de qué forma un buen diseño hace más accesible la Web
• Crear una estructura de encabezados accesible para su diseño
• Enumerar las estrategias utilizadas para transmitir el contenido a los usuarios ciegos

La accesibilidad no obstaculiza, sino que impulsa la innovación

Uno de los errores conceptuales más habituales en términos de diseño y accesibilidad es que un producto accesible es feo, aburrido o confuso. En este módulo, aprenderá no solo que esto es falso, sino que, al comprender mejor la accesibilidad y las restricciones del diseño accesible, es posible diseñar productos más coherentes y más utilizables para todos los usuarios. Aprender sobre el diseño accesible incrementa las oportunidades de crear un diseño innovador.

El diseño y la accesibilidad van de la mano de un objetivo compartido para garantizar que todos los usuarios disfruten usando sus productos. Los diseñadores se unen a los equipos de investigación para garantizar que se tengan en cuenta ciertas funciones de usuario. Los diseñadores también deberían considerar la accesibilidad para tener en cuenta los perfiles que pueden aportar esta función al proceso de diseño.

Mucho más que un mouse

Aunque pueda parecer obvio, como diseñador, usted es responsable de mucho más que los clics que se hacen con un mouse y de la disposición visual del contenido en la pantalla. Si bien es importante considerar la interacción con el mouse y el aspecto visual de un diseño, también debe tener en cuenta otros factores. 

• Complete los modelos de interacción de los flujos.
• El modo en que opera una función exclusivamente con un teclado.
• Laptops y tablets con operación táctil.
• Los usuarios que alternan entre modos de ingreso y cambian del mouse al teclado a una función táctil y, quizás, a dictado por voz.

A medida que lea la información de este módulo, recuerde que no va a diseñar para sus colegas, sino para los usuarios. Diseñará para una diversidad de usuarios que interactuarán con sus productos. Los usuarios tienen distintas formas de interactuar con los productos y de recibir información de esos productos. 

Entre esa diversidad de usuarios, se pueden incluir personas ciegas, daltónicas o con poca visión; personas sordas o con dificultades de audición; personas con poca movilidad temporaria o permanente; o personas con discapacidades cognitivas. Diseñará para jóvenes y adultos, usuarios avanzados, usuarios ocasionales y personas que simplemente disfrutan una experiencia de buena calidad.

Excluir deliberadamente del diseño una restricción centrada en la accesibilidad es excluir deliberadamente de sus productos a los usuarios. Adopte las directrices de accesibilidad del mismo modo que implementaría cualquier serie de restricciones para el diseño. Son parte del reto y el ímpetu por crear productos increíbles. 

Comprender la interfaz de usuario (IU)

Cuando los usuarios ven un sitio web o una aplicación web por primera vez, tardan unos momentos en orientarse entre toda la información presente en la pantalla. Aprenden qué es posible, y esto los guía en los siguientes pasos. Los usuarios videntes pueden explorar visualmente la página para entender el diseño general, decidir por dónde comenzar y empezar a indagar en ciertas partes de la aplicación. Pueden ver diferentes agrupaciones; encabezados grandes; listas; y otros patrones familiares de experiencia del usuario (UX), como tarjetas, conjuntos de fichas, tablas o árboles. 

Los usuarios visuales pueden desglosar la página de inicio de Lightning Experience de manera similar a lo que muestra la captura de pantalla a continuación. Aquí, los elementos por los que se puede navegar están resaltados en amarillo, hay un gran gráfico en verde y varias tarjetas de información resaltadas en color rosa. 

Los usuarios ciegos dependen de una estructura de página efectiva que incorpore encabezados y puntos de referencia, así como otras estructuras semánticas, para comprender la página en general. A continuación, la navegación de la página principal y los claros encabezados visuales de la misma página de Lightning Experience están indicados con un recuadro rojo. Si bien los ingenieros finalmente expondrán esta información ante los usuarios, es importante que los diseñadores incluyan puntos de referencia y encabezados claros, para lo cual deberán comprender su objetivo y comunicárselo a los equipos de ingeniería. 

Formato

Del mismo modo que los usuarios videntes tienen diferentes estrategias para familiarizarse con un sitio web nuevo, los usuarios de lectores de pantalla también emplean distintos enfoques. Aunque es un método más lento, los usuarios de lectores de pantalla pueden optar por que el software lea la página completa mientras visitan un sitio web o una aplicación por primera vez. Otros usuarios pueden explorar la página desplazándose por todos los encabezados o puntos de referencia.

Los encabezados le dan estructura a una página web, de modo similar a los capítulos de un libro, los artículos de una revista o las secciones destacadas de un trabajo de investigación. Sin embargo, en lugar de usar números romanos, letras y números, los sitios web incluyen etiquetas de encabezados, de <h1> a <h6>, para crear esta estructura de forma programática. 

Cuando el código de una página está escrito correctamente, los usuarios pueden usar un lector de pantalla común para abrir una lista con todos los encabezados de la página. También pueden desplazarse por cada encabezado individual mediante un atajo del teclado. En la captura de pantalla que se muestra a continuación, un usuario de lector de pantalla solicita la lista de encabezados de la página. Hay un solo encabezado de nivel 1, Home (Inicio); los otros encabezados son de nivel 2. En esta página de Lightning Experience, hay un encabezado de nivel 2 para cada tarjeta. 

Cuando se crea una estructura de encabezados lógica, los usuarios pueden comprender la disposición del contenido en una página. Asimismo, contar con encabezados visuales claros también ayuda a los usuarios a comprender la jerarquía de elementos de una página. Esto es útil, sobre todo, para algunas personas con discapacidades cognitivas. 

Además de una estructura de encabezados lógica, los ingenieros deben usar puntos de referencia de HTML semánticos para que los usuarios puedan identificar en qué parte de la página se encuentran. Estas incluyen:

• Encabezado
• Navegación
• Área de contenido principal
• Artículos
• Elementos adicionales (“asides”) (contenido relacionado tangencialmente, a menudo utilizado para barras laterales o llamadas a la acción)
• Cuerpo
• Pie de página

Los lectores de pantalla identifican los puntos de referencia y también permiten que los usuarios se desplacen por cada región mediante los atajos del teclado. Como diseñador, tiene la capacidad de diseñar puntos de referencia claros y comunicárselos a los ingenieros para que puedan incluirlos correctamente en el código. 

En el siguiente ejemplo, la página tiene un solo punto de referencia, la región de navegación Global Navigation (Navegación global).

Puede ver que faltan otros puntos de referencia potencialmente útiles, como Búsqueda, Encabezado, Principal y Artículo.

Iconos e imágenes

Algunas personas ciegas usan lectores de pantalla o teclados digitales en braille, pero estas tecnologías de apoyo solo leen texto en voz alta: no pueden leer automáticamente iconos ni imágenes. Esto significa que es tarea del diseñador crearlos correctamente. 

Hay dos tipos de iconos, que los lectores de pantalla pueden manejar de manera diferente: iconos decorativos (que se pueden omitir) e iconos informativos (que transmiten contenido al usuario). Como diseñador, debe comprender la diferencia entre ellos, elegir cuál funciona mejor para su caso de uso, escribir etiquetas preliminares (si es necesario) para revisar la experiencia del contenido e informar a los ingenieros para que puedan escribir el código del icono correctamente. 

Decorativos

Los iconos e imágenes decorativos no aportan información relevante y no cumplen ninguna función. En esta categoría, también entran los iconos y las imágenes redundantes, ya que refuerzan el significado del texto existente, pero no suman información nueva. Los lectores de pantalla no deberían leer estos elementos, ya que solo suman palabras innecesariamente. Los iconos no necesitan nada especial que los señale como decorativos, pero las imágenes deben llevar una etiqueta “alt” vacía, que obliga a los lectores de pantalla a omitirlas. Si un lector de pantalla detecta una imagen sin esta etiqueta, leerá la etiqueta “src” de la imagen, que a menudo se ve así: /images/weji2362iofweio6.png.

Los iconos de funciones de contacto (Contact Roles), de productos (Products) y de notas y archivos adjuntos (Notes & Attachment) de la siguiente imagen son decorativos, ya que son redundantes. Cada uno tiene texto adyacente que describe la misma información [icono de archivos junto a Notes & Attachment (0)].

Informativos 

Los iconos e imágenes informativos transmiten información importante que falta en el texto circundante. Algunos ejemplos de estos elementos son los botones de iconos y los avatares independientes. Los iconos necesitan texto auxiliar o una etiqueta ARIA, mientras que las imágenes necesitan una descripción alternativa. Escriba la acción que permite realizar el icono o la imagen y no cómo se ve el elemento (por ejemplo, “Cargar archivo” en lugar de “sujetapapeles”).

En la captura de pantalla que se muestra a continuación, los botones de iconos en el panel de navegación global superior son todos informativos, ya que el usuario necesita saber qué permiten realizar para interactuar con ellos.

¿Y el siguiente icono? Aunque tiene texto adyacente, sigue siendo informativo, ya que el icono indica que el objeto es una cuenta y el texto es el nombre de la cuenta. Sin el icono, los usuarios no sabrán si es un contacto, una oportunidad u otra clase de objeto.

En resumen

El diseño y la accesibilidad van de la mano de un objetivo compartido para garantizar que todos los usuarios disfruten usando sus productos. Al tener en cuenta la estructura y la disposición de los diseños, y al incluir alternativas de texto para las imágenes y otros elementos no textuales, se ofrece un apoyo sólido para los usuarios con discapacidades. En la próxima unidad, veremos cómo ayudar a los usuarios a percibir y comprender mejor el contenido de sus diseños. 

Recursos

• Artículo: Una Web para todos
• Artículo: Puntos de referencia accesibles
• Artículo: Diseñar para la compatibilidad con lectores de pantalla