Este documento proporciona consejos sobre accesibilidad web. Explica que la accesibilidad significa que todos los usuarios pueden acceder a los contenidos web de manera igualitaria. Detalla diferentes tipos de discapacidades y recomendaciones de la W3C para hacer sitios web perceptibles, operables, comprensibles y robustos. Incluye consejos prácticos como usar estructura semántica, texto alternativo para imágenes, navegación por teclado, contraste adecuado y contenido claro.

1. Consejos mínimos
de accesibilidad
1

2. 2
Iván Mejía
Drupalero, diseñador web,
organizador de contenido.
correo:koffer@gmail.com
Sitios: drupalmexico.com
www.medioyforma.info

3. Accesibilidad
Cuando los sitios web están diseñados
pensando en la accesibilidad, todos los usuarios
pueden acceder en condiciones de igualdad a
los contenidos.
https://es.wikipedia.org/wiki/Accesibilidad_web
3

4. Discapacidad
▪ Discapacidades sensoriales
▪ Pérdida de visión parcial o total.
▪ Incapacidad parcial o total de captar sonidos.
▪ Discapacidades motrices
▪ Falta de coordinación.
▪ Problemas nerviosos.
▪ Carencia de algún miembro.
▪ Discapacidad cognitiva
▪ Dificultad en la compresión.
▪ Problemas para la asimilación de información.
▪ Edad avanzada.
▪ Discapacidad tecnológica
▪ Desconocimiento de la tecnología (nuevos analfabetos).
▪ Falta de medios tecnológicos adecuados.
4

5. ¿Quién define la Accesibilidad?
https://www.w3.org/TR/WCAG21/
5
http://www.sidar.org/traducciones/wcag20/es/
https://www.w3.org/TR/?status=cr

6. Accesibilidad Web
Diseño
6
Código
Contenido

7. ¿Qué propone
la W3C?
7

8. Los cuatro principios
1.Perceptibilidad - La información y los componentes de la interfaz de
usuario deben presentarse a los usuarios de la manera en que puedan
percibirlos:
4 pautas y 29 criterios de cumplimiento.
2.Operabilidad - Los componentes de la interfaz de usuario y la
navegación deben ser operables:
5 pautas y 29 criterios de cumplimiento.
3.Comprensibilidad - La información y el manejo de la interfaz de
usuario deben ser comprensibles:
3 pautas y 17 criterios de cumplimiento.
4.Robustez - El contenido debe ser lo suficientemente robusto como
para confiarse en su interpretación por parte de una amplia variedad
de agentes de usuario, incluidas las tecnologías asistivas:
1 pauta y 3 criterios de cumplimiento.
8

9. Puntos a cubrir
Perceptibilidad -
4 pautas y 29 criterios de cumplimiento.
Operabilidad -
5 pautas y 29 criterios de cumplimiento.
Comprensibilidad -
3 pautas y 17 criterios de cumplimiento.
Robustez -
1 pauta y 3 criterios de cumplimiento.
9
• 12 pautas que funcionan
como objetivos para ser
cumplidos.
• Cada pauta tiene criterios
que permiten cumplirla.
• No todos los sitios
requieren cumplir todas
las pautas, pero muchos
sitios requieren cumplir
con la mayoría.
http://www.sidar.org/traducciones/wcag20/es/

10. Nivel de conformidad
•Nivel A: Para lograr conformidad con el Nivel A (el
mínimo), la página web satisface todos los Criterios de
Conformidad del Nivel A, o proporciona una versión
alternativa conforme.
•Nivel AA: Para lograr conformidad con el Nivel AA, la
página web satisface todos los Criterios de Conformidad
de los Niveles A y AA, o proporciona una versión
alternativa conforme al Nivel AA.
•Nivel AAA: Para lograr conformidad con el Nivel AAA, la
página web satisface todos los Criterios de Conformidad
de los Niveles A, AA y AAA, o proporciona una versión
alternativa conforme al Nivel AAA.
10

11. Consejos
sencillos
11

12. Estructura semántica
12

13. 13
HTML 5
<header>
<nav>
<footer>
<aside>
<main>

14. Los encabezados comunican la organización del contenido en la
página. Los navegadores web, los complementos y las tecnologías
de asistencia pueden usarlos para proporcionar navegación en la
página.
14
https://www.w3.org/WAI/tutorials/page-structure/headings/
http://www.sidar.org/traducciones/wcag20/es/#navigation-mechanisms
Heading

15. 15
https://www.w3.org/WAI/tutorials/page-structure/headings/
http://www.sidar.org/traducciones/wcag20/es/#navigation-mechanisms

16. Aria
16
https://developer.mozilla.org/es/docs/Web/Accessibility/ARIA

17. 17
Define cómo realizar contenido Web y aplicaciones
Web (especialmente las desarrolladas con
Ajax y JavaScript) más accesibles a personas con
discapacidades.
Por ejemplo, ARIA posibilita puntos de navegación
accesibles, widgets JavaScript, sugerencias en
formularios y mensajes de error, actualizaciones en
directo, y más.
https://www.youtube.com/watch?v=o4xHfi4t9S0&list=PLWjCJDeWfDdcEtSnqq_iGLKGA_H_3o3y7
https://www.w3.org/TR/wai-aria-practices-1.1/#intro
Aria

18. Landmarks Aria
18
https://w3c.github.io/aria-practices/examples/landmarks/index.html
Proporcionan una forma eficaz de
identificar la organización y la
estructura de una página web
• Banner
• Complementary
• Contentinfo
• Form
• Main
• Navigation
• Search
• Region
http://www.d.umn.edu/itss/training/online/structure/landmarks/

19. Imágenes
19

20. 20
Contenido no textual: Todo contenido no textual que se
presenta al usuario tiene una alternativa textual que
cumple el mismo propósito.
Imágenes

21. Las imágenes con contenidos
deberán tener un texto alternativo.
Código de ejemplo:
<img
src="teatrodegollado.jpg"
alt=“Los lagos. atracción
turística en Xalapa.” />
21
Imágenes

22. Teclado
22

23. Teclado
23
Todas las opciones del contenido serán controlables mediante
teclado y serán independientes del tiempo, excepto cuando las
tareas requieran una interacción secuencia temporal

24. Teclado
https://www.w3.org/WAI/perspective-videos/contrast/
24

25. Contraste
25

26. 26
https://webaim.org/articles/contrast
Contraste
Texto Texto

27. 27
https://webaim.org/articles/contrast
Asegurar de que las combinaciones de
los colores de fondo y primer plano
tengan suficiente contraste para que
sean percibidas por personas con
deficiencias de percepción de color o en
pantallas en blanco y negro.
Contraste

28. 28
https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html
https://webaim.org/resources/contrastchecker/
Contraste (mínimo): La presentación visual de texto e imágenes de
texto tiene una relación de contraste de, al menos, 4.5:1, excepto en
los siguientes casos: (Nivel AA)
• Textos grandes: Los textos de gran tamaño y las imágenes de
texto de gran tamaño tienen una relación de contraste de, al menos,
3:1.
• Incidental: Los textos o imágenes de texto que forman parte de
un componente inactivo de la interfaz de usuario, que son simple
decoración, que no resultan visibles para nadie o forman parte de
una imagen que contiene otros elementos visuales significativos, no
tienen requisitos de contraste.
• Logotipos: El texto que forma parte de un logo o nombre de marca
no tiene requisitos de contraste mínimo.

29. Hipervínculos
29

30. 30
Nombres descriptivos en las ligas.
Evitar: “ haga clic aquí ", " más " ,
“ haga clic para obtener detalles "
https://webaim.org/techniques/hypertext/hypertext_links
Hipervínculos

31. Contenido
31

32. 32
http://www.sidar.org/traducciones/wcag20/es/
Cuando un texto requiere un nivel de
lectura más avanzado que el nivel
mínimo de educación secundaria una
vez que se han eliminado nombres
propios y títulos, se proporciona
un contenido suplementario o una
versión que no requiere un nivel de
lectura mayor a ese nivel educativo.
(Nivel AAA)
Contenido

33. 33
http://www.sidar.org/traducciones/wcag20/es/
Navegación coherente: Los mecanismos de
navegación que se repiten en múltiples páginas
web dentro de un conjunto de páginas
web aparecen siempre en el mismo orden
relativo cada vez que se repiten, a menos que
el cambio sea provocado por el propio usuario.
(Nivel AA)
Contenido

34. Herramientas
34

35. Herramientas
35
http://wave.webaim.org
https://chrome.google.com/webstore/detail/axe/lhdoppojpmngadmnindnejefpokejbdd
Wave, sitio web accesibilidad.
AXE, extensión de chrome
Herramientas de desarrollo
En Chrome.
https://validator.w3.org/
Validador HTML
Herramientas

36. Lectores
36
https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn
https://www.nvaccess.org/download/
Chromevox, extensión de voz en chrome
NVDA, Lector windows
https://www.nvaccess.org/download/
ORCA, Linux
https://www.apple.com/accessibility/mac/vision/
Voiceover, MACOS
Herramientas

37. 37
Procesamiento: 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).
Nota: Las etiquetas de apertura y cierre a las que les falte un carácter crítico
para su formación, como un signo de "mayor qué", o en las que falten las
comillas de apertura o cierre en el valor de un atributo, no se consideran
completas.
https://validator.w3.org/

38. Ejemplos de sitio web accesibles
38
www.canada.ca
Gobierno de Canadá
www.ssa.gov
Social security. USA
www.nsw.gov.au
New South Wales
Gobierno de New

39. ¿Dudas?
39

40. Muchas
Gracias
40