Al ser un sitio accesible, también estamos contribuyendo para que nuestro sitio sea mejor posicionado en el buscado porque cumple estándares

1. Ramsés Moreno
Accesibilidad en la Web como
parte de UX
Ramsés Moreno

2. ¿Qué es accesibilidad?
La capacidad de los servicios para que puedan ser utilizados por
todas las personas sin importar sus condiciones, por ejemplo
personas con discapacidad (PCD)

3. La Web nació accesible
El poder de la Web radica en su
universalidad.
El acceso para todas las personas
independientemente de sus
capacidades es un aspecto
esencial de la misma
- Tim Berners-Lee
(https://www.w3.org/Press/IPO-announce)
“
”

4. ¿Por qué accesibilidad en la Web?
Discapacidades
● Visual
○ Aproximadamente el 285 millones de la población mundial tiene alguna
discapacidad visual, esto es aproximadamente el 4%
○ 39 millones ceguera total y el resto alguna otra debilidad visual
○ Daltonismo tricromático (6% hombres, 0.4 mujeres)
● Auditiva
○ 360 millones de personas con pérdida de audición en diferentes grados
(más del 5%)

5. ¿Por qué accesibilidad en la Web?
¿No accesible? =

6. WAI - Web Accessibility Initiative
● Iniciativa para la Accesibilidad Web de la W3C
● Publica varios documentos, entre ellos:
○ Web Content Accessibility Guidelines (WCAG)
Guías de contenido web accesible
○ Accessible Rich Internet Applications (WAI-ARIA)
Aplicaciones web accesibles

7. Validaciones de accesibilidad
La guía se divide en 4 principios para el contenido accesible, los principios se dividen en
12 pautas, las pautas en 60 criterios y los criterios en recomendaciones. Cada criterio se
define para cada uno de los tres niveles de accesibilidad: A, AA, AAA
1. Perceptible
2. Operable
3. Comprensible
4. Robusto

8. Validaciones de accesibilidad

9. Validaciones de accesibilidad

10. Principio 1. Perceptible.
El contenido web debe estar disponible
(ser perceptible) para los sentidos – vista,
audición, y/o tacto.
Pauta 1.1. Alternativas textuales.
Ofrezca alternativas en forma de texto
para todo el contenido no textual.
Criterio 1.1.1
Contenido no textual
Recomendación: Todas las imágenes,
botones de imagen de los formularios y las
zonas activas de los mapas de imagen,
tendrán un texto alternativo adecuado.
Validaciones de accesibilidad

11. Validaciones de accesibilidad
Principio 1. Perceptible.
El contenido web debe estar disponible
(ser perceptible) para los sentidos – vista,
audición, y/o tacto.
Pauta 1.3 Adaptable: crea contenido que
pueda presentarse de diferentes maneras
(por ejemplo, un diseño simpli cado) sin
perder la información o estructura.
Criterio 1.3.1 Información y sus relaciones
Recomendación: El marcado semántico se
usará para designar los encabezados
(<h1>), listas (<ul>, <ol>, y <dl>), texto
especial o enfatizado (<strong>, <code>,
<abbr>, <blockquo- te>, por ejemplo), etc.
El marcado semántico deberá usarse
apropiadamente.

12. Validaciones de accesibilidad
Principio 1. Perceptible.
El contenido web debe estar disponible
(ser perceptible) para los sentidos – vista,
audición, y/o tacto.
Pauta 1.4 Distinguible: facilite a los
usuarios el ver y escuchar el contenido,
incluyendo la separación entre el primer
plano y el fondo.
Criterio 1.4.4 Tamaño del texto
Recomendación: La página deberá ser
legible y funcional cuando se doble el
tamaño (200%) del texto..
200%

13. Validaciones de accesibilidad
Principio 2. Operable.
Operable. Los formularios, controles,
navegación y otros elementos de la
interfaz deben permitir la interacción.
Pauta 2.1 Accesibilidad mediante el
teclado: permita que toda la funcionali-
dad esté disponible usando el teclado
Criterio 2.1.1 Teclado
Recomendación: Todas funciones de las
páginas deberán estar disponibles
utilizando el teclado, excepto aquellas que
de forma conocida no pueden realizarse
con el teclado (por ejemplo, un dibujo a
mano alzada).

14. Validaciones de accesibilidad
Principio 3. Comprensible. El contenido y
la interfaz deben poder entenderse
fácilmente y ser semánticamente ricos.
Pauta 3.1. Legibilidad: cree contenidos
legibles y fáciles de entender
Criterio 3.1.1 Idioma de la página
Recomendación: El idioma principal de la
página deberá estar identi cado utilizando
el atributo lang de HTML (por ejemplo,
<HTML lang=”es”>).

15. Validaciones de accesibilidad
Principio 4. Robusto. El contenido debe
ser lo su cientemente consistente y able
como para permitir su uso con una amplia
variedad de agentes de usuario, ayudas
técnicas y preparado para las tecnologías
venideras.
Pauta 4.1 Compatible: mejore la
compatibilidad con los agentes de usuario
(navegadores) actuales y futuros,
incluidas las ayudas técnicas.
Criterio 4.1.1 Análisis
Recomendación: Se deberán evitar los
errores de sintaxis de HTML/XHTML. El
código puede com- probarse, analizarse y
validarse a través de
http://validator.w3.org/

16. Validaciones de accesibilidad

17. Validaciones de accesibilidad

18. Validaciones de accesibilidad

19. Validaciones de accesibilidad

20. Validaciones de accesibilidad

21. Validaciones de accesibilidad

22. Técnicas específicas de diseño
Selección tipográfica:
Diferencias entre pares
font-family: Basic;

23. Técnicas específicas de diseño
Espaciamiento entre letras:
modificar si provoca confusión
letter-spacing: 0.05em;
Interlineado:
Por lo menos del 150%
line-height: 150%;

24. Técnicas específicas de diseño
Justificado de cuerpos de texto: IZQUIERDA
text-align: left;

25. Técnicas específicas
Contraste entre texto y fondo
color: #222222;
background-color: #EEEEEE;
No depender del color para
comunicar algo, incluyendo enlaces encendido apagado

26. Mejoramiento de enlaces
p a{
text-decoration: none;
text-shadow: 0.05em 0 0 #fff, -0.05em 0 0 #fff,
0 0.05em 0 #fff, 0 -0.05em 0 #fff,
0.1em 0 0 #fff, -0.1em 0 0 #fff,
0 0.1em 0 #fff, 0 -0.1em 0 #fff;
background: linear-gradient(to bottom right,
#9999dd, #9999dd);
background-repeat: repeat-x;
background-position: bottom 0.030em center;
background-size: 100% 0.0625em;
}

27. Elementos con foco
p a:focus {
outline: none;
background-color: #cef;
text-shadow: 0.05em 0 0 #cef, -0.05em 0 0 #cef,
0 0.05em 0 #cef, 0 -0.05em 0 #cef,
0.1em 0 0 #cef, -0.1em 0 0 #cef,
0 0.1em 0 #cef, 0 -0.1em 0 #cef;
}

28. Caso de estudio

29. ¡Pon tu granito de arena!
¡En nosotros
está el crear una
Web para
todos!

30. Para saber más
Referencias
Web Content Accessibility Guidelines (WCAG 2.0)
https://www.w3.org/TR/WCAG20/
Web Accessibility in Mind (WebAIM) en la dirección
http://webaim.org/standards/wcag/checklist
Pautas de Accesibilidad para el Contenido Web
http://www.sidar.org/traducciones/wcag20/es/

31. Para saber más
Heydon Pickering,
Inclusive design patterns.
Smashing Magazine.
Sarah Horton,
A Web for Everyone.
Rosenfeld Media.
Cathy O’Connor,
Designing Accessible Websites
Smashing Magazine.

32. ¡Gracias!