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).
- Tecnologías de asistencia:
- (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
- Para la WCAG hay tres niveles de accesibilidad: A, AA, AAA.
- (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.
- 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
- (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
alten la etiquetaimg.
- Se deben describir las imágenes significativas a través de un texto alternativo que se ingresa como valor del atributo
- (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.
- Los vínculos se deben definir con el elemento
- (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.
- Ejercicio en la web de ejemplo:
- (0:37:46) Aside – Labels (6’12″)
- Los elementos
labeldeben estar definidos en los formularios web y, en el caso de los campos de texto (y de las listas desplegables), asociados entre sí con unidy un atributofor. El texto de ejemplo en un campo de texto debe ser eso: un texto de ejemplo y no el texto de su elementolabel. Si crea un botón use el elementobutton. 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 (tabindexyonclick).
- Los elementos
- (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 elementolegend.
- En el caso de los botones de opción, se le agrega más contexto agrupándolos con el elemento
- (0:45:54) Labels (3’09″)
- Ejercicio en la web de ejemplo:
- Agregar las etiquetas
label(con un atributofordel mismo valor que el atributoiddel elementoinputcorrespondiente). - Cambiar el valor de los atributos
placeholderpor 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.
- Agregar las etiquetas
- Ejercicio en la web de ejemplo:
- (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.
- La importancia de utilizar etiquetas descriptivas, en particular las de las regiones de referencia (landmark regions):
- (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 utilizarem(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.
- El pixel (
- (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
h1por página.
- Deben definirse con las etiquetas
- Los títulos y subtítulos:
- (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,labelyaria-checked.
- 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
- (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).
- Los atributos
- 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 eventosclick, 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 propiedadopacity.
- Existe código JavaScript que se ejecuta con eventos del ratón (
- Aside – Hiding content (2’36″)
- A la hora de esconder contenido visualmente (barras laterales, modals, etc.) hay opciones como
display: none;ovisibility: hidden;, pero ambas remueven el contenido del árbol de accesibilidad. Es preferible utilizaropacity: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.
- A la hora de esconder contenido visualmente (barras laterales, modals, etc.) hay opciones como
- (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.
- Vínculo oculto a la vista (movido hacia afuera del viewport) que se muestra al pulsar la tecla Tab (gracias a
- (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.