1 of 34

Accesibilidad para Desarrolladores

2 of 34

Soy Valeria Rocha

Desarrolladora de Software

Estudiante de Ingeniería Informática en la Universidad de Buenos Aires.

Mentora de introducción a la programación en la Fundación Itgrarte.

Formo parte de DALAT.

2

@avaltenea

3 of 34

Soy Henry Tong

Desarrollador de Software

20+ años en proyectos de software en diferentes roles (Desarrollador, Líder Técnico, Arquitecto)

Actualmente Backend Developer en la empresa Patagonian en Argentina

​

3

4 of 34

AGENDA

  • Tecnologías asistivas
  • Buenas prácticas en el código HTML
  • DOM y árbol de accesibilidad
  • Validación. Testing de accesibilidad
  • A practicar
  • Preguntas y respuestas

​

4

5 of 34

OBJETIVO DE HOY

Aprender guías y buenas prácticas para desarrollar webs accesibles

6 of 34

Nada sobre nosotros sin nosotros.”

​

​

6

“

7 of 34

Tecnología

Asistiva

  • Magnificadores
  • Lectores de pantalla (JAWS, NVDA)
  • Línea braille

​

7

8 of 34

Desafíos que enfrentan los usuarios

8

9 of 34

Desafios: Visual

9

9

  • Falta de organización en la estructura del sitio web o aplicación.
  • Falta de descripción de imágenes.
  • Links sin descripción.
  • Textos con bajo contraste.
  • Navegación dificultosa por medio de teclado.

10 of 34

Desafios: Auditiva

10

10

  • Videos sin subtítulos.
  • Audios sin texto.
  • Videos que no están facilitados en lengua de señas.

​

11 of 34

Desafios: Motriz

11

11

  • Áreas accesibles que son pequeñas y dificultan el poder hacer click.
  • Navegación por teclado o mouse.
  • Focos para enlaces y botones invisibles.

​

12 of 34

Desafios: Cognitiva

12

12

  • Déficit de atención.
  • Déficit de memoria a corto plazo.
  • Sobrecarga cognitiva cuando hay demasiada información.
  • Conceptos abstractos, textos largos.

​

13 of 34

Buenas prácticas en el código

Codificando HTML accesible

13

14 of 34

DOM y árbol de accesibilidad

14

https://blogs.intuit.com/blog/2021/01/12/why-the-accessibility-tree-is-key-to-understanding-accessible-applications/

15 of 34

HTML - Estructura básica

15

<html lang="es">

<head> <!–– estilos, metatags, scrips ––>

<title>Título</title>

<meta charset="UTF-8">

</head>

<body>

<h1>Encabezado principal</h1>

<p>Cuerpo</p>

</body>

</html>

Noten los atributos lang y charset

16 of 34

HTML - Landmarks

16

<header> Encabezado

​

<nav> Enlaces de navegación

​

<section> Secciones de un documento

​

<aside> Contenido adicional (barra lateral)

​

<footer> Pie de página

​

17 of 34

HTML - Foco y orden

17

  • Resaltar los elementos accionables (botones, enlaces, campos de un formulario).
  • El orden para recorrer los elementos debe respetar un orden lógico.
  • Usar :focus

​

18 of 34

Agregado de alt en imágenes

18

<img src=”mi_imagen.jpg” alt=”Texto alternativo”>

​

Las imágenes decorativas deben tener alt=”” (vacío)

http://diagramcenter.org/table-of-contents-2.html

19 of 34

HTML - Enlaces

19

<a href=”http://www.itgrarte.org” target=”_blank”>Ver galería”</a>

​

  • Los lectores de pantalla los interpretan como vínculos.
  • Deben describir lo mejor posible el contenido.
  • No se deben crear enlaces que no vinculen contenido con el fin de dar formato al texto.

​

20 of 34

HTML - Heading

20

21 of 34

HTML - Listas

21

<ul>

<li>Azul</li>

<li>Rojo</li>

<li>Verde</li>

</ul>

​

Lista desordenada

<ol>

<li>Primero</li>

<li>Segundo</li>

<li>Tercero</li>

</ol>

​

Lista ordenada

22 of 34

HTML - Formularios

22

<form>

​

<fieldset>

<legend>Información de contacto</legend>

<label for="correo">Email (requerido):</label>

<input id="correo" name="txt_correo" type=email required>

<label for="nombre">Nombre (requerido):</label>

<input id="nombre" name="txt_nombre" type=text required>

</fieldset>

​

<p>Ocupación:</p>

​

<label for="o_estudiante">Estudiante</label>

<input id="o_estudiante" name="rad_ocupacion" type=radio>

​

<label for="o_profesor">Estudiante</label>

<input id="o_profesor" name="rad_ocupacion" type=radio>

​

<input type="submit" value="Ingresar">

​

</form>

​

Agrupar campos

con fieldset

Asociar label con input emparejando

“for” -> “id”

Ser explícito con campos requeridos

No es lo mismo required que aria-required

Usar el type adecuado:

  • email
  • text
  • radio ….etc

23 of 34

HTML - Tablas

23

<table class="table">

<caption>Actividades educativas por día</caption>

​

<tr>

<th scope="col">Horario</th>

<th scope="col">Lunes</th>

<th scope="col">Martes</th>

<th scope="col">Miércoles</th>

</tr>

​

<tr>

<th scope="row">09:00 - 10:00</th>

<td>Arte</td>

<td>Matemáticas</td>

<td>Geografía</td>

</tr>

​

<tr>

<th scope="row">11:00 - 12:00</th>

<td>Historia</td>

<td>Química</td>

<td>Física</td>

</tr>

</table>

​

​

Esta es una de las formas más usadas. Se pueden ver otras en https://www.w3.org/WAI/tutorials/tables/

Las personas con visión usualmente procesamos las tablas columna por columna pero que el lector de pantalla las leerá línea por línea.

Pregúntate: Realmente necesito una tabla? Puedo reducir el número de filas/columnas? Realmente necesito hacer merge/span (unión) ?

Utiliza un caption o título a la tabla <caption>

24 of 34

HTML - Modales

24

  • El foco debe quedar atrapado dentro del mismo.
  • Deben incluir un elemento visible que cierre el cuadro de diálogo.
  • Al cerrar el modal el foco debe volver al elemento que lo invocó.

​

25 of 34

La técnica del contenido invisible

25

Existen diferentes formas de lograrlo, aquí una de ejemplo:

​

https://webaim.org/techniques/css/invisiblecontent

Y al apretar tab aparece esto:

Aparece así:

26 of 34

Validación

Testing de accesibilidad para programadores (y también performance, SEO...)

Wave, Axe, Lighthouse

Contrast checkers

Lector de pantalla NVDA

26

Siéntate y acompaña a una PCD a usar el software

27 of 34

Consideraciones adicionales

A tener en cuenta

27

28 of 34

Usando Herramientas y Librerías UI para desarrollo web

28

Herramienta

Librerías UI recomendables

Solamente estilo

  • Primera recomendación: Bootstrap y segunda recomendación: Zurb Foundation

React

  • PrimeFaces, Carbon, Chakra

Vue

  • Vuetify, PrimeFaces, Carbon, Chakra

Solamente Javascript o Jquery

  • Carbon, Oracle Jet

Angular

  • Material, Carbon

Svelte

  • Material, Carbon

Renderizado directo (canvas)

  • Tener cuidado porque tienen problemas con la accesibilidad (ejemplo: Flutter Web)

29 of 34

Accesibilidad en desarrollo para desktop y mobile

29

Plataforma

Librerías UI recomendables para desarrollo

Desktop

  • wxPython (Python - multi plataforma)
  • Windows Forms (C# - Windows)
  • GTK (varios lenguajes - Linux)
  • HTML + Electron / NW.js (multi plataforma)

Mobile

Las de programación nativa, es decir:

  • Java / Kotlin para Android
  • Swift para iOS

Ambas

Tener cuidado con el renderizado directo, tiene problemas de accesibilidad, ejemplos: QT, Flutter Desktop

30 of 34

Accesibilidad en CI (Integración Contínua) y automatización

30

Herramienta

Notas

WAVE

  • 1 millón de páginas analizadas
  • Herramienta propietaria

AXE

  • Se puede integrar en el proceso de build / construcción

PA11Y

  • Se puede utilizar de forma independiente para validar una web

Rastreador Web del observatorio de accesibilidad de España

  • Útil como referencia y documentación ya que provee no solamente código fuente sino además explicación de la metodología utilizada
  • Ayuda a detectar problemas de accesibilidad ( approx 50% de casos )
  • No reemplaza el testeo manual

31 of 34

WAI-ARIA

31

https://developers.google.com/web/fundamentals/accessibility

¿Qué es? identificar el rol del elemento. Ejemplo: <div id=”banner” role=”banner”>

​

¿Cómo se encuentra? identificar estado y propiedades del elemento.

​

¿Qué hace? identificar el comportamiento del elemento.

​

32 of 34

WAI-ARIA

32

https://developers.google.com/web/fundamentals/accessibility

Rol: define el papel del elemento dentro del documento web. Ejemplo:

<div id=”slider” role=”slider”>

​

Estado y propiedades: determinan características y valores de cada elemento.

​

<div id=”slider” role=”slider” aria-valuemax=”30” aria-valuenow=”20”>

​

33 of 34

Consejos para promover la accesibilidad en tu equipo o empresa

33

  • Se puede ganar tiempo aprendiendo/usando librerías UI que ya aplican conceptos básicos de accesibilidad
  • Ayuda a mejorar el SEO
  • Aumenta la cantidad de público/usuarios que pueden utilizar tu servicio/producto
  • Reduce la posibilidad de incumplimiento de leyes de accesibilidad
  • Si se hacen expertos pueden ofrecer el servicio de accesibilidad
  • Pueden apoyarse en la comunidad https://dalatgit.github.io/recursos

34 of 34

¿Preguntas?

Valeria Rocha

Desarrolladora

Henry Tong

Desarrollador

taksantong@gmail.com

34

@avaltenea