Principios básicos del desarrollo web accesible

En este curso de scrimba, publicado como un único video en el canal de YouTube de freeCodeCamp.org, el instructor y desarrollador web Fredrik Ridderfalk enseña, en inglés, los principios básicos del desarrollo web accesible.

Se trata de un curso-taller que, partiendo de un sitio web con muchos problemas de accesibilidad, va presentando esos problemas y cómo corregirlos.

Para poder hacer los ejercicios hay que seguir el curso ingresando en la plataforma de scrimba (que solicita autentificación vía correo electrónico). De forma gratuita se pueden hacer 10 de los ejercicios planteados. Luego de eso se bloquean las partes de ejercicios en las lecciones y, para desbloquearlas, hay que registrarse mediante pago mensual de aproximadamente U$S 10.

Aquí listo el contenido del curso con algunas notas que agregué sobre los puntos que trata cada parte:

(0:00:00) Accessible Development Intro (1'06")

Presentación de la temática del curso.

(0:01:32) Understanding web accessibility (4'49")

Tecnologías de asistencia:

• lectores de pantalla
• programas de reconocimiento del habla
• magnificadores de pantalla
• dispositivos de entrada alternativos
• etc.

Cómo funcionan las mejoras de accesibilidad

• Vista de árbol de accesibilidad
• HTML semántico
• accesibilidad por teclado
• pestaña “Accesibilidad” en las herramientas del desarrollador en el navegador web

Métodos de comprobación de la accesibilidad

• usar las tecnologías de asistencia
• verificadores de la tasa de contraste
• herramientas automáticas (como Lighthouse en Chrome/Chromium, el Inspector de Accesibilidad de Firefox, aXe, asistentes de Inteligencia Artificial).

(0:06:09) Aside - Text contrast (3'49")

Para la WCAG hay tres niveles de accesibilidad: A, AA, AAA.
El mayor valor de contraste de color entre el texto y su fondo es 21 (negro y blanco).
Tasas mínimas para alcanzar el nivel AA

• 4.5 de contraste para texto normal
• 3 de contraste para texto de 24px o más

Tasas mínimas para alcanzar el nivel AAA

• 7 de contraste para texto normal
• 4.5 de contraste para texto de 24 px o más

(0:10:02) Aside - Use of color (1'18")

Consideraciones sobre cómo reafirmar un significado agregando formas y texto y no solo basándose en colores.

(0:11:23) Text contrast (6'31")

Un par de ejercicios donde aplicar lo visto previamente sobre contraste de color entre el texto y su fondo. En el segundo ejercicio hace uso de la propiedad background-blend-mode.

(0:17:56) Aside - Alternative Text (5'33")

Se deben describir las imágenes significativas a través de un texto alternativo que se ingresa como valor del atributo alt en la etiqueta img.

(0:25:13) Aside - Links (7'19")

Los vínculos se deben definir con el elemento <a>, deben ser fácilmente reconocibles como vínculos y no deben presentar un texto ambiguo.

(0:32:36) Links and alternative text (5'07")

Ejercicio en la web de ejemplo:

• escribir textos alternativos apropiados,
• convertir los vínculos en reconocibles y sin ambigüedades y,
• aumentar el contraste del color del texto de unos subtítulos con su fondo.

(0:37:46) Aside - Labels (6'12")

Los elementos label deben estar definidos en los formularios web y, en el caso de los campos de texto (y de las listas desplegables), asociados entre sí con un id y un atributo for.

El texto de ejemplo en un campo de texto debe ser eso: un texto de ejemplo y no el texto de su elemento label.

Si crea un botón use el elemento button. De no ser posible, deberá agregar las funcionalidades que provee ese elemento, agregando un nombre accesible (aria-label) y accesibilidad a través del teclado (tabindex y onclick).

(0:44:02) Aside - Radio Buttons (1'52")

En el caso de los botones de opción, se le agrega más contexto agrupándolos con el elemento fieldset (grupo de campos) y nombrándolos con el elemento legend.

(0:45:54) Labels (3'09")

Ejercicio en la web de ejemplo:

• Agregar las etiquetas label (con un atributo for del mismo valor que el atributo id del elemento input correspondiente).
• Cambiar el valor de los atributos placeholder por textos de ejemplo y aumentarle la intensidad a su color gris para que alcance el nivel AAA.
• Sustituir el tic del botón de envío por un texto apropiado.

(0:49:07) Semantic HTML (5'45")

La importancia de utilizar etiquetas descriptivas, en particular las de las regiones de referencia (landmark regions): nav, main, section, footer, etc.

(0:54:55) Lists (4'42")

No solo en listas propiamente dichas, sino que las etiquetas de listas (ordenadas o desordenadas) se deben usar para los elementos conectados y consecutivos.

(0:59:41) Text-size (3'21")

El pixel (px) es una unidad de medida fija. Definir las dimensiones de los textos con esta unidad no es una buena práctica. Por otra parte, si se utiliza rem (que equivale al tamaño predefinido del texto en el navegador, normalmente 16px) el usuario puede cambiar el tamaño del texto en las preferencias del navegador y todos los tamaños de los textos se recalcularán en consecuencia.

(1:03:06) Headings (2'51")

Los títulos y subtítulos:

• Deben definirse con las etiquetas <hn> para la estructura de la página (y no para su apariencia),
• los niveles de subtítulos deben ser consecutivos (<h2>, <h3>, etc.), sin saltearse ninguno,
• se debe definir un solo h1 por página.

(1:06:01) ARIA (5'13")

Los atributos ARIA (Accessible Rich Internet Applications) se adosan a los elementos HTML para agregarles contexto e información para las tecnologías de asistencia. Algunos de estos atributos son role, tabindex, label y aria-checked.

(1:11:07) ARIA live regions (6'02")

Los atributos aria (aria-live, aria-controls, etc.) se adjuntan a partes de la página destinadas a actualizarse de forma dinámica (como notificaciones en tiempo real, mensajes de estado luego de enviar un formulario o actualizaciones resultantes de filtrados o búsquedas).

Aside - Accessible JavaScript (3'20")

Existe código JavaScript que se ejecuta con eventos del ratón (mouseover, mouseout) por lo que, si no se utiliza el ratón para navegar, no se puede acceder a él. Así que es preferible utilizar eventos click, de enfoque (focus) o de desenfoque (blur). Pero, aún más preferible es agregar el contenido que depende de esos eventos directamente en el flujo de elementos de la página y ocultarlo o hacerlo visible con la propiedad opacity.

Aside - Hiding content (2'36")

A la hora de esconder contenido visualmente (barras laterales, modals, etc.) hay opciones como display: none; o visibility: hidden;, pero ambas remueven el contenido del árbol de accesibilidad. Es preferible utilizar opacity:0; o mover ese contenido fuera del viewport, de forma de ocultarlo visualmente pero sin quitarlo del árbol de accesibilidad. Y, en cuanto a los modals, es preferible no utilizarlos, ya que es complejo hacerlos accesibles.

(1:16:58) Aside - Skip Navigation Link Part 1 (3'31")

Vínculo oculto a la vista (movido hacia afuera del viewport) que se muestra al pulsar la tecla Tab (gracias a :focus) y que permite saltearse el menú de navegación de una página e ir directamente al contenido.

(1:20:39) Aside - Skip Navigation Link Part 2 (2'00")

Se le agrega un tiempo de transición al enfoque y desenfoque del vínculo creado en la parte anterior. No es indispensable hacerlo, pero facilita al usuario el darse cuenta de la existencia de esta opción.

(1:22:36) Skip Navigation Link (1'43")

Ejercicio de agregar en la web de ejemplo un vínculo para saltearse el menú de navegación, como se vio en las dos partes anteriores.

(1:24:23) Final challenge part 1 (2'38")

Hacer una especie de auditoría de todos los problemas de accesibilidad que presenta la página de contacto de la web de ejemplo.

(1:27:27) Final challenge part 2 (4'12")

Aplicar a la página de contacto todos los cambios resultantes de la revisión hecha en la parte anterior.

(1:31:43) Outro (1'13")

Una somera recapitulación de los temas tratados durante el curso.

Las lecciones Aside - Accessible JavaScript y Aside - Hiding content son posteriores a la subida del video a YouTube y no se encuntran en él. Para verlas debe utilizar la plataforma de Scrimba.

“Prepare for Execution”, la segunda parte del episodio 1 de “Dynamo Dream”

Dynamo Dream es una distopía fantástica escrita y dirigida por Ian Hubert. En la primera parte del primer episodio, titulada "Salad Mug" y estrenada en 2021, conocimos a Josephine Simon (interpretada por Kaitlin Romig) quien produce y vende ensaladas para sobrevivir día a día en la útima ciudad de la Tierra.

Después de haberle salvado la vida (dejando caer una taza) a una aliada política y amiga del poderoso "Floorhead", este le otorga un deseo como recompensa. Ella pide poder comunicarse con su amor, Jackie Simon (interpretado por Thom Morgan). En esa comunicación él le dice que 10 minutos antes había recibido un suculento e inesperado pago y que regresaba ese mismo día. Acuerdan que ella lo fuera a recibir. Pero en su viaje al aeropuerto para el reencuentro se suceden cosas extrañas.

En esta segunda parte del primer episodio, titulada “Prepare for Execution” conoceremos algo del pasado de Josephine y Jackie, el por qué de haberse tenido que separar 8 meses antes y qué pasa cuando Jackie llega al aeropuerto esperando reencontrarse con Josephine.

Para crear este universo fantástico Ian Hubert y su equipo integran acción en vivo con un extensivo uso de imágenes generadas por computadora. Todo el 3D está hecho con Blender. Y es recomendable volver a ver el corto haciendo pausas y prestando atención a los detalles. Es impactante.

Quienes están suscriptos a la página de Patreon de Ian Hubert pueden ver tutoriales y explicaciones de cómo se fueron haciendo algunas de las escenas.

Entre la primera parte del episodio 1 y esta segunda, publicada esta semana, existieron dos episodios más con otras historias del universo Dynamo Dream (el episodio 2, “A Single Point in Space”, en marzo de 2023, y el episodio 3, “A Pete Episode”, en abril de 2023).