Curso de Accesibilidad Web

En este vídeo vamos a ver qué es Accesibilidad y por qué resulta tan importante en la actualidad. Veremos casos de la vida real con la intención de sensibilizar a los desarrolladores.

En qué consisten. Qué son los principios POUR. Cuáles son las técnicas para conseguir cumplir con las pautas de accesibilidad (Techniques for WCAG). Por qué y para qué las vamos a aplicar, ya que aporta muchos beneficios a multitud de personas, sin entrar en normativas gubernamentales.

Qué normativas hay en cada región del mundo que nos obligan a construir webs accesibles. En la Unión Europea y otras regiones del globo. Fechas límite y requisitos clave.

Por qué hacer una página accesible impactará positivamente en el SEO. Vamos a ver qué es la semántica del HTML. Esto nos dará pie a entender cómo un buscador analiza una página web. Analizamos nosotros una página web conocida para ver cómo está construida y hasta qué punto es semántica.

Terminamos con un poco más de accesibilidad y SEO. Además de la semántica tenemos la experiencia de usuario, la descripción de los elementos de la página y otras áreas en común del posicionamiento en buscadores con la accesibilidad. Analizamos el comportamiento de los crawlers y aportamos unas conclusiones finales de este primer bloque.

Comenzamos explicando las bases de la semántica en el contenido, la problemática y la solución. Además vemos un resumen de etiquetas semánticas, antes de pasar al detalle de cada una de ellas.

Vamos a ver una tanda de etiquetas semánticas como article, section y footer. Las explicaremos en detalle cada una de ellas, añadiendo casos de uso y ejemplos de HTML donde se aplican correctamente.

Una segunda tanda de etiquetas semánticas del HTML como son time, aside, header o main, entre otras. Nuevamente, con ejemplos de uso correcto y consejos de aplicación.

Continuamos viendo al detalle nuevas etiquetas semánticas como son details, summary, figure, figcaption mark, strong, em, aportando ejemplos diversos de uso y consejos prácticos de accesibilidad.

Reglas fundamentales para los formularios accesibles. Por qué la semántica nativa del HTML es en principio preferible a los Aria. Luego vamos a definir los principios de Aria y las reglas que debemos tener en cuenta para la accesibilidad, comparando ambos enfoques y viendo las distintas aproximaciones para conseguir elementos de formulario accesibles.

A qué llamamos el árbol de accesibilidad y por qué es fundamental para las tecnologías de asistencia. Cuáles son las propiedades que importan dentro del árbol de accesibilidad, que son las clave para que un componente pueda ser considerado accesible, viendo en detalle cada uno de ellos.

Vamos a ver en concreto cómo se refleja en el HTML cada uno de los elementos que debemos tener en cuenta para conseguir la deseable accesibilidad en los formularios de las páginas web.

Es uno de los desafíos más importantes para conseguir la accesibilidad de los elementos de formulario, así como los elementos de la página en general. Veremos cómo gestionar el foco, el autofocus, cómo se debe implementar la navegación por teclado y otras cosas. Haremos también un resumen de los riesgos de accesibilidad y los factores que facilitan la navegación.

En este último bloque de esta sesión veremos ya el código de un formulario accesible explicado, donde podrás encontrar de manera concreta aplicados todos los conocimientos que hemos ido comentando a lo largo de los vídeos anteriores.

Qué son los niveles de conformidad del estándar de WCAG. Definiendo las características de cada uno de los niveles existentes, A, AA, AAA.

Veremos en un ejemplo concreto los distintos niveles de accesibilidad que dicta el WCAG. En este vídeo mostraremos en un formulario los niveles de conformidad de accesibilidad paso a paso, comenzando por mostrar un formulario accesible con el nivel A, qué debemos hacer para pasar al nivel AA y por último al nivel AAA.

Comenzando explicando la importancia del contraste y cómo vamos a poder medir el contraste en los elementos de una página o un diseño en particular. Explicaremos qué el ratio de contraste, que es nuestra métrica de referencia para poder medirlo.

Ahora que sabemos qué es el contraste y cómo lo medimos, vamos a ver lo que dictan los distintos niveles de conformidad para la accesibilidad en lo referente al contraste, para que sepamos hasta dónde debemos llegar dependiendo del nivel de accesibilidad que queramos implementar. Veremos además que en los textos la conformidad del contraste depende también mucho del tamaño del texto.

Más allá del texto, también es importante mantener el contraste con otros elementos gráficos, como iconos, algo que debemos también tener en cuenta si esos elementos son informativos y no meras decoraciones.

Ya sabemos los ratios que debemos cubrir para cada nivel de accesibilidad pero ¿cómo medimos esos ratios? Lo haremos por medio de herramientas que vamos a mostrar en este vídeo.

Ahora vamos a ver que las herramientas para desarrollo que tiene el navegador integradas también nos ayudan a evaluar la accesibilidad de los elementos de la página. En lo relativo al contraste también nos pueden ayudar, de una manera muy cómoda y rápida al examinar los elementos de la página.

Qué necesitas saber sobre fundamentos, recursos y accesibilidad en el desarrollo de webs.

Usando Lighthouse revisamos fallos de accesibilidad detectados y mostramos cómo se deberían corregir.

Seguimos haciendo una revisión de la accesibilidad, ahora sobre un sitio web distinto, señalando fallos y sus correcciones.

Veremos cómo es un documento realizado para la auditoría de la accesibilidad web, analizando nuevos problemas de accesibilidad y proponiendo soluciones.

Notas finales para el Curso de Accesibilidad, junto con otras alternativas a Lighthouse y técnicas para evaluar el grado de accesibilidad de la web.

Explicamos la función de los widgets de accesibilidad, con sus casos de uso y motivos por los que usarlos o no. Veremos también la implementación del widget de Accedeme.