Capacitación dictada en el marco de los siguientes proyectos: 2015. “Interfaces digitales accesibles para el desarrollo del turismo local en la ciudad de Rosario”, aprobado y financiado por la Secretaría de Vinculación Tecnológica y Desarrollo Productivo de la Universidad Nacional de Rosario. 2017. "Garantizar una educación de calidad para estudiantes con discapacidad - MUSE" co-financiado por la Comisión Europea a través del programa Erasmus +.

1. María Inés Laitano
ines.laitano@gmail.com
Introducción a la
accesibilidad web

2. Programa
1. Otras maneras de utilizar el ordenador
2. ¿Qué es la Accesibilidad?
3. ¿Por qué es importante?
4. Marco legal internacional y argentino
5. Enfoque de la W3C
6. Pautas de Accesibilidad para el contenido web (WCAG) 2.0
7. Criterios de conformidad A
8. Evaluación automática

3. Línea Braille

4. Magnificador

5. Alto contraste

6. Dispositivos adaptados
Ratones
especiales
Teclado una
sola mano
Reconocimiento
de voz
Licornio

7. e-Accesibilidad
Derecho de acceso a la información digital más allá de las
singularidades físicas, psíquicas, culturales, geográficas o
económicas de las personas.
“El poder de la Web está en su
universalidad”
Tim Berners-Lee. Director de la W3C e inventor
de los estándares HTML, HTTP y URL.

8. Según la Web Accessibility Initiative (WAI)
Usable para
las personas
con
discapacidad
Percibir
Entender
Navegar
Interactuar
Contribuir

9. 15% de la población mundial
(>1.000 millones de personas)
12,9% de la población argentina (>5
millones personas)
Personas con discapacidad

10. No sólo para personas con discapacidad
• Discapacidades temporarias
• Impedimentos por la edad
• Baja alfabetización o poco dominio del idioma
• Conectividad limitada o tecnologías antiguas
• Internautas principiantes o poco frecuentes
• ¡Y para todos en general!

11. Accesibilidad web = Derecho Humano
2006
Convención ONU
sobre DDHH de las
personas con
discapacidad
2008
Ratificación
argentina de la
Convención
ONU
2010
Ley
argentina de
Accesibilidad
Web
2013
Reglamentación
de la ley
argentina de
Accesibilidad
Web
2014
Disposición
ONTI niveles
mínimos

12. Accesibilidad web = SEO
“Tu usuario más importante es ciego. La mitad de las visitas a tu
sitio vienen de Google, y Google sólo ve lo que un ciego puede
ver.” *
* Steven Pemberton, Chair of HTML and Forms Working Groups, W3C. 2005

13. Accesibilidad web = Mobile

14. Accesibilidad ≠ feo y aburrido

15. Estándares internacionales

16. Pautas de Accesibilidad para el contenido web
(WCAG) 2.0
Principios
Pautas
Criterios de conformidad (CC)
Técnicas suficientes y aconsejables
• Perceptible
• Operable
• Comprensible
• Robusto
• Objetivos generales
• Nivel A
• Nivel AA
• Nivel AAA

17. Ejemplo WCAG 2.0
1. Perceptible
1.4 Facilitar a los usuarios ver y oír el contenido,
incluyendo la separación entre el primer plano y el
fondo.
 1.4.1 Uso del color: El color no se usa como único medio
visual para transmitir la información, indicar una acción,
solicitar una respuesta o distinguir un elemento visual.
(Nivel A)

18. Requerimiento en Argentina
• “Establécese que el nivel mínimo de conformidad a ser
cumplimentado por los organismos […] se establecerá en
OCHENTA (80) puntos, acorde lo establecido en el Anexo II
que aprueba la presente Disposición”
• Anexo II = Criterios de conformidad de Nivel A
• Cada criterio de conformidad vale 4 puntos
• No aplica = Cumplido

19. Logos de conformidad
• Forma de promover y crear conciencia
• Conformidad con determinado nivel
• No implica validación de la W3C

20. Documentos de las WCAG 2.0

21. Criterios de conformidad
Nivel A

22. Contenido no textual
CC 1.1.1 : Todo contenido no textual que se presenta al usuario tiene una
alternativa textual que cumple el mismo propósito, excepto en: (Nivel A)
• Controles, Entrada de datos
• Contenido multimedia tempodependiente
• Prueba o ejercicio no válido si fuera texto
• Sensorial
• Decoración, Formato, Invisible
• CAPTCHA

23. ¿Qué alternativa textual para …
1. … una imagen funcional?
2. … una imagen informativa?
3. … una imagen decorativa?
<a href=“http://www.frro.utn.edu.ar/”>
<img src="logo.png"
alt=“Inicio Facultad Regional Rosario”/>
</a>
<a href=“calendario.pdf”>
Calendario Academico
<img src="pdf.jpg" alt="en formato PDF"/>
</a>
<h2 class="con_cintillo">Cátedras en línea<h2>

24. <img src=“mapa.jpg"
alt=“Plano de la planta alta del
museo con recorrido histórico"
longdesc=“plano-recorrido.html" />
Imágenes complejas

25. CAPTCHA
¿Cuánto es dos más dos? Escriba el resultado con letras.
¿Cuál es la tercera palabra de hoy está lloviendo?

26. Subtítulos opcionales (closed caption)
CC 1.2.2 Se proporcionan subtítulos para el contenido de audio grabado
dentro de contenido multimedia sincronizado, excepto cuando la
presentación es un contenido multimedia alternativo al texto y está
claramente identificado como tal. (Nivel A)

27. Audiodescripción o Medio Alternativo
CC 1.2.3 Se proporciona una audiodescripción o una alternativa para
medios tempodependientes para el contenido de vídeo grabado en los
multimedia sincronizados, excepto cuando ese contenido es un contenido
multimedia alternativo al texto y está claramente identificado como tal.
(Nivel A)

28. CC 1.3.1 La información,
estructura y relaciones
comunicadas a través de la
presentación pueden ser
determinadas por software
o están disponibles como
texto. (Nivel A)
Información y relaciones

29. Estructura de títulos

30. Relaciones entre controles de formulario
<fieldset><legend>Teléfono</legend>
<input id="preInter" title="Prefijo internacional" type="text">
<input id="preCiudad" title="Prefijo ciudad" type="text">
<input id="numero" title="Número de teléfono" type="text">
</fieldset>

31. Tablas accesibles
• Tablas SOLO para información tabular
• <caption> título a la tabla
• summary=“” visión general de la tabla
• scope=“” asocia encabezados y celdas de datos
• id=“” headers=“” asocia encabezados y celdas en tablas complejas

32. <table summary="Para contactar a una persona busque su nombre en la
columna 2, luego lea hacia la derecha su teléfono, fax y ciudad."
border="1">
<caption>Información de contacto</caption>
<tr>
<td></td>
<th scope="col">Nombre</th>
<th scope="col">Teléfono</th>
<th scope="col">Fax</th>
<th scope="col">Ciudad</th>
</tr><tr>
<td>1.</td>
<th scope="row">José García</th>
<td>212-5421</td>
<td>212-5400</td>
<td>Pergamino</td>
…
Tablas simples

33. Secuencia significativa
CC 1.3.2 Cuando la secuencia en que se presenta el contenido afecta a su
significado, se puede determinar por software la secuencia correcta de
lectura. (Nivel A)

34. Características sensoriales
CC 1.3.3 Las instrucciones proporcionadas para entender y operar el
contenido no dependen exclusivamente de las características sensoriales
de los componentes como su forma, tamaño, ubicación visual, orientación o
sonido. (Nivel A)

35. Características sensoriales (2)

36. Características
sensoriales (3)

37. Uso del color
CC 1.4.1 El color no se usa como único medio visual para transmitir la
información, indicar una acción, solicitar una respuesta o distinguir un
elemento visual. (Nivel A)
“Normal” Protanopia Deuteranopia Tritanopia

38. “Normal” Protanopia
Enlaces

39. Inaccesible Accesible
Campos obligatorios

40. Gráficos

41. Teclado
CC 2.1.1 Toda la funcionalidad del contenido es operable a través de una
interfaz de teclado sin que se requiera una determinada velocidad para
cada pulsación individual de las teclas. (Nivel A)

42. Interacción sólo ratón

43. Orden del foco
• CC 2.4.3 Si se puede navegar secuencialmente por una página web y la
secuencia de navegación afecta su significado o su operación, los
componentes que pueden recibir el foco lo hacen en un orden que
preserva su significado y operabilidad. (Nivel A)
<a href=”main.html” tabindex=”1”>Homepage</a>

44. Sin trampas para el foco del teclado
CC 2.1.2 Si es posible mover el foco a un componente de la página usando
una interfaz de teclado, entonces el foco se puede quitar de ese
componente usando sólo la interfaz de teclado y, si se requiere algo más
que las teclas de dirección o de tabulación, se informa al usuario el método
apropiado para mover el foco. (Nivel A)

45. Pausar, detener, ocultar, controlar
CC 2.2.2 Existe un mecanismo para que el usuario pueda pausar, detener,
ocultar o controlar la frecuencia de actualización
Movimiento, parpadeo,
desplazamiento
Actualización automática
• comienza automáticamente
• dura más de cinco segundos
• se presenta en paralelo con otro contenido
• comienza automáticamente
• se presenta en paralelo con otro contenido
…a menos que sea parte esencial de una actividad. (Nivel A)

46. Carrusel

47. Control del audio
CC 1.4.2 Si el audio de una página web suena automáticamente durante
más de 3 segundos, se proporciona ya sea un mecanismo para pausar o
detener el audio, o un mecanismo para controlar el volumen del sonido que
es independiente del nivel de volumen global del sistema. (Nivel A)

48. Evitar bloques
CC 2.4.1 Existe un mecanismo para evitar los bloques de contenido que se
repiten en múltiples páginas web. (Nivel A)
<div role="banner">
<div role="navigation">
…
Fuente de la imagen: http://www.slideshare.net/mrazzari/waiaria-en-5-minutos

49. Titulado de páginas
CC 2.4.2 Las páginas web tienen títulos que describen su temática o
propósito. (Nivel A)
<head>
<title>Título descriptivo</title>
</head>

50. CC 2.4.4 El propósito de cada
enlace puede ser determinado con
sólo el texto del enlace o a través
del texto del enlace sumado al
contexto del enlace determinado
por software, excepto cuando el
propósito del enlace resultara
ambiguo para los usuarios en
general. (Nivel A)
• Párrafo
• Lista
• Celda
• Columna
Contexto del
enlace
Propósito de los enlaces (en contexto)

51. URLs
Inaccesible
El listado de transportes
equipados para el traslado de
personas con discapacidad motriz
podés encontrarlo en
http://www.rosario.gov.ar/sitio/se
rvicios/transporte/escolares.jsp
Accesible
El listado de transportes
equipados para el traslado de
personas con discapacidad motriz
podés encontrarlo en la página de
transportes escolares de la
Municipalidad de Rosario

52. Leer más
<p>Con sus paradores y
servicios al otro lado
del río, estas vastas
costas de arena
concentran la movid
...<a
href="playa.html">
Leer más</a></p>

53. Idioma de la página
CC 3.1.1 El idioma predeterminado de cada página web puede ser
determinado por software. (Nivel A)
<html lang=”es”>

54. Al recibir el foco
• CC 3.2.1 Cuando cualquier componente recibe el foco, no inicia ningún
cambio en el contexto. (Nivel A)

55. Al recibir entradas
CC 3.2.2 El cambio de estado en cualquier componente de la interfaz de
usuario no provoca automáticamente un cambio en el contexto a menos
que el usuario haya sido advertido de ese comportamiento antes de usar el
componente. (Nivel A)

56. Al recibir entrada en combo

57. Identificación de errores
CC 3.3.1 Si se detecta automáticamente
un error en la entrada de datos, el
elemento erróneo es identificado y el
error se describe al usuario mediante un
texto. (Nivel A)

58. Etiquetas o instrucciones
CC 3.3.2 Se proporcionan etiquetas o instrucciones cuando el contenido
requiere la introducción de datos por parte del usuario (Nivel A)
<label for="apellido">Apellido:</label>
<input type="text" id="apellido"/>
<fieldset><legend>Teléfono</legend>
<input id="preInter" title="Prefijo internacional" type="text">
<input id="preCiudad" title="Prefijo ciudad" type="text">
<input id="numero" title="Número de teléfono" type="text">
</fieldset>

59. Función de búsqueda
<input type="text" title=“Escribe aquí lo que quieres buscar”/>
<input type="submit" value=“Buscar”/>
Buscar

60. Procesamiento (o análisis sintáctico)
CC 4.1.1 En los contenidos implementados mediante el uso de lenguajes de
marcas, los elementos tienen las etiquetas de apertura y cierre
completas; los elementos están anidados de acuerdo a sus
especificaciones; los elementos no contienen atributos duplicados y los ID
son únicos, excepto cuando las especificaciones permitan estas
características. (Nivel A)

61. Nombre, función, valor
CC 4.1.2 Para todos los componentes de la interfaz de usuario (incluyendo
pero no limitado a: elementos de formulario, enlaces y componentes
generados por scripts), el nombre y la función pueden ser determinados
por software; los estados, propiedades y valores que pueden ser
asignados por el usuario pueden ser especificados por software; y los
cambios en estos elementos se encuentran disponibles para su consulta
por las aplicaciones de usuario, incluyendo las ayudas técnicas. (Nivel A)

62. Criterios de conformidad
Nivel AA

63. Imágenes de texto
CC 1.4.5 Si con las tecnologías que se están utilizando se puede conseguir
la presentación visual deseada, se utiliza texto para transmitir la
información en vez de imágenes de texto (Nivel AA)

64. Contraste
CC 1.4.3 La presentación visual del texto e imágenes de texto tiene una
relación de contraste de, al menos, 4.5:1, excepto: (Nivel AA)
Textos 18pt
o 14pt en
negrita
Logotipos
Incidental
Contraste >= 3:1
Sin requisitos

65. CC 2.4.5 Se proporciona más de un
camino para localizar una página web
dentro de un conjunto de páginas web,
excepto cuando la página es el resultado o
un paso intermedio de un proceso. (Nivel
AA)
Caminos
• Función de búsqueda
• Mapa del sitio
• Enlaces relacionados
• Menú
• Tabla de contenidos
Múltiples vías

66. Foco visible
CC 2.4.7 Cualquier interfaz de usuario operable por teclado tiene una
forma de operar en la cuál el indicador del foco del teclado resulta visible.
(Nivel AA)
*:focus {border:3px solid orange;}