Presentación sobre el proyecto de canales digitales y la estrategia y estado del área de accesibilidad para el SENA - Colombia a mayo de 2020.

1. Accesibilidad
Web
Mayo 2020

2. OC-42840 de 2019
SENA y Visión Software
Canales Digitales
(Intranet y Portal Web)

3. Servicio social
Esta presentación contiene varios errores de accesibilidad y usabilidad en varias de
sus diapositivas, somos conscientes.

4. • Edison Monsalve
• @morpheusco
• Profesor “Cacharrero” de “cuasi
profesión”
• Especialista en Sistematización
y gestión de datos.
Quién soy yo

5. A tratar
Definición accesibilidad y
accesibilidad web
• ¿Accesibilidad universal?
• Accesible y usable
Mitos
Normatividad (Línea de
tiempo)
• Versiones de la normatividad
¿La web es HTML?
¿Contenidos en PDF?
¿Excel?
¿Cómo se mide?
Impacto en el SENA y
cómo lo miden
administrativamente
(FURAG)
Trabajo técnico – estado
¿Qué viene a
continuación?
Capacitaciones.

6. Definición
Accesibilidad •Accesibilidad física
•Accesibilidad de contenido
•Accesibilidad económica
•Accesibilidad al producto o
servicio
•Accesibilidad ….
“Cualidad de fácil acceso para la
mayor cantidad de personas a una
comunicación, entendimiento,
lugar, objeto o servicio”
Accesibilidad universal, no existe.

7. Definición
Usabilidad
•Efectividad
•Eficiencia
•Satisfacción
“Asociada a la facilidad
de uso y su experiencia
en el proceso”

8. Mitos de accesibilidad
(solo algunos)…

9. “Web accesible es tener dos
sitios web”
“Esa vaina es de
diseñadores y
programadores”
“Mi web es accesible, es
decir, fea”
“Si quieren ver mi web, será
bajo mis reglas”
“Ese tema es para
discapacitados”
“Ya corrimos las
herramientas y cumplimos”
“Sin imágenes, videos y las
animaciones y listo”
“Ser accesible es más
costoso”
“Yo publico y ya está, para
eso están los editores”
“Ya lo hicimos para móviles,
ya cumplimos”
“Si justifico el texto en Word
y lo paso a PDF eso ya
cumple”
“Usamos traductor de
lenguaje de señas y listo”
“Mi sitio web es para
usuarios con manos
pequeñas”
“Y decenas de mitos más…”
“Eso es sólo para la web, yo
publico solo adjuntos.”

10. ¿Cómo hacerlo mejor?
Útil
Deseable
Accesible Creíble
Encontrable
Usable
Valioso
Accesible y usable son solo el inicio.

11. Usos al día de hoy
• A 1 mano
• A 2 manos
• ¿Diestros o siniestros?

12. Textos
simples y
semánticos
(ver más…)
• ¿No es verdad que digo
mentiras?
• “En la gráfica en rojo puedes
ver que vamos bien, en verde,
el área que vamos mal”
• “En HTML5, se enfoca a que JS y
CSS trabajen en conjunto como
un framework especializado y
enfocado al más alto
performance nativo”
• “Le di un ósculo lento, ella no lo
podía creer”

13. Ustedes
conocen a su
público
No es tan difícil, no tienen que
hacer estudios de mercado.

14. Visión y color
• 1843
• 3246
• 3240
• 1246
• 1240
Sugestión
Astigmatismo
y miopía
Astigmatismo
Leve miopía
Visión ok

15. Cuidado con el
saber popular
Recuerdas cuando te
preguntaban ...
¿Cuál es la única palabra en
español que posee las 5
vocales?
Pues mi abuelito, el arquitecto
tenía un auténtico murciélago

16. Normatividad
ICONTEC
Marco Colombiano –
Norma técnica
ICONTEC 5854
Normas WCAG
Marco internacional
(norma y versiones)
WCAG 1,0 – 2,0 y 2,1
Formulario Único
Reporte de Avances
de la Gestión (II
versión)
FURAG
2020 SENA
Proyecto Actual
Plan a futuro

17. Nace la web sobre
internet (1969), basada
en protocolo http.
El HTML 1 es el lenguaje
de la web
Guerra de navegadores
Cada cual hace lo que puede
Microsoft desea participar
1989 1991 - 1993 1995 1997
La web HTML HTML 2 HTML 3

18. Se buscó optimizar,
consolidar y estandarizar
para asegurar acceso
El enfoque a aplicaciones en
la web lleva a preocuparse
incluso por el código, nace
WAI – ARIA y
XAG
Aunque no es necesariamente
una versión fija, se volvió
modular, así:
HTML 5
CSS 3
JavaScript
HTML 4
1998
WCAG 1,0
1999
WCAG 2,0
2008
HTML 5 - Estándar

19. ICONTEC llama a gremios
y ciudadanos
Crean la norma 5854
Actualización importante
basada en lo visto como
avance Tecnología y Usos.
Determina entre otros cómo evaluar
la norma técnica 5854
Contrato
Iniciativas
Gestión
Proyección
2011 2018 2019 2020
ICONTEC WCAG 2,1 FURAG SENA

20. WCAG 2,1 4 principios
+Accesible -> Perceptible, operable, comprensible,
robusto – No evaluable -> +Usable
13 pautas (1 nueva)
No evaluables
78 criterios (17 nuevos)
Se distribuyen en nivel A, AA, AAA
580 técnicas y errores
Y son constantemente actualizados

21. ¿La web es HTML?
La normatividad no habla
específicamente de una tecnología.
Habla de la información digital
puesta a disposición del ser
humano.
Y se habla de diversidad.

22. ¿Cómo medir? 1 de 2
Problema Permanente Temporal Situacional Solución común
Pérdida de visión Ceguera Pupila dilatada,
cataratas, fotofobia,
mareos
No mirar la pantalla,
estar conduciendo,
estar ocupado
Facilitar interacción
por voz
* Apoyo por software
Baja visión Glaucoma, alta miopía. Conjuntivitis, guayabo Letra pequeña en un
contrato
Permitir hacer zoom
* No disponible SENA
Ceguera color Daltonismo (7 formas)
1 de 4 personas
Deslumbramiento
luces fuertes
Usar móvil en día
soleado, poca batería
Contraste suficiente
* En revisión
Pérdida de audición Sordera Otitis, no entender el
idioma, lenguaje de
señas
Entorno ruidoso bar,
silencioso como
biblioteca
Subtítulos

23. ¿Cómo medir? 1 de 2
Problema Permanente Temporal Situacional Solución común
Baja movilidad Parálisis, miembro
perdido, Parkinson,
artrosis
Esguince, tendinitis,
túnel metacarpiano,
temblores por
situación vírica (gripa)
Usar celular con una
sola mano
Manos sucias
Puntos de interacción
suficiente.
SEO 50x50
Dificultad atención y
concentración
Autismo, trastorno
déficit de atención,
hiperactividad
Ansiedad, depresión,
dolor de cabeza
(estoy ocupado) etc.
Realizar otra actividad
como cuidar de
alguien, esperar
tráfico, usar 2da
pantalla
Simplicidad en la
organización de
contenidos
SEO
Comprensión lectora Dislexia, discapacidad
cognitiva, sordera de
nacimiento
Bajo nivel educativo,
bajo dominio de
idioma
Entorno complejo,
calle con ruido
Sencillez en textos y
maquetación
adecuada (ARIA)

24. Autonomía
Percibir los elementos de la interfaz
Conocimiento
Descubrir la interfaz
Control
Operar con la interfaz
Seguridad
Obtener y percibir el “feedback”
Objetivo

25. Formas de medición
AUTOMÁTICA EN DESARROLLO
(LINT)
AUTOMÁTICA EN PRODUCCIÓN
DE CONTENIDOS – HELPERS O
WIZARDS
AUTOMÁTICA VÍA LISTAS DE
CHEQUEO
AUTOMÁTICA POR
COMPLEMENTOS
MANUAL

26. Tipos de
mensaje
Error
Contraste
Advertencia
Estructural
WAI ARIA

27. Declaraciónconformidad
De sitio completo en
nivel específico
De sitio completo en
varios niveles
De secciones del sitio
De páginas
específicas
De secciones de
contenido
Declaración norma
internacional
Declaración norma
ICONTEC
Declaración FURAG
Declaración pública
procedimiento
Declaración privada
procedimiento
WCAG
SENA

28. Impacto SENA
¿Cómo estamos y hacia donde vamos?

29. Ciclo implementación Accesibilidad SENA
Empatía y
comunicación
del proyecto
Diagnóstico
Objetivos (FURAG,
PETI, ICONTEC,
Norma
internacional 2,1)
Planificación
(revisión alterna
constante de
criterios manuales)
Implementación y
revisión software o
manual
Mantenimiento

30. Metodología WCAG EM (Evaluation Metodology)
Definir alcance Explorar sitio
Selección de
muestra
Auditar y
reporte
Elaborar
informe
(periódico)

31. Proyectogeneral
Diciembre Enero Febrero Marzo Abril Mayo Junio
Análisis
Revisión manual
Pool yreporte
Plantillas
Servidor ycontenidos
Implementación
Producción

32. Revisión constante
Plantillas
Listas sharepoint
Hacks
Editor web
Sharepoint
Desarrollo a medida
Gestión Documental
PDF es solo 1 formato

33. Y siempre falta algo …

34. Para los
inquietos
… (hay
más)
• WAI Groups – WCAG
• APA – Arquitecturas de Plataformas
Accesibles
• ARIA – Desarrollo
• EOWG – Grupo de trabajo y educación
• UAAG – Pautas para agentes de usuario y
navegadores
• ATAG – Pautas para Herramientas de
autor
• WAI IG – Grupos de intereses

35. Equipo que debe involucrarse
Administración
•Directores de proyectos
•Responsables de compras
•TI
•RRHH
•Área Legal y Financiera
•Marketing y
comunicaciones
•Dirección comercial
Solución
•Arquitectos de
información
•Experiencia de usuario
•Especialistas SEO
•Diseñadores de servicio
•Consultores de analítica
Creadores de
contenidos
•Creadores de video /
audio
•Creadores de infografías
•Generadores de
contenido textual
•Generadores de eventos
Solución técnica y
tecnológica
Diseñadores Web
Desarrolladores de
FrontEnd
Desarrolladores de
BackEnd

36. Capacitaciones
• Diseño 22 / 05
• Desarrollo 26 / 05
• Admin 27 / 05
• Editores 28 / 05

37. Sesión de
preguntas
Analizaremos y en caso de no
saberlo, lo intentamos averiguar.

38. Referencias
• WCAG 2,1 - https://www.w3.org/TR/WCAG21/
• Estándares (Español)
https://www.w3.org/WAI/standards-guidelines/es
• Herramientas y validadores
https://www.usableyaccesible.com/recurso_misval
idadores.php
• Lista chequeo desarrollo web
https://www.toptal.com/developers/webdevcheckl
ist
• Sidar -
http://www.sidar.org/traducciones/wcag20/es/

39. GRACIAS