Introducción a la accesibilidad web: descubre qué es, qué dice la legislación española, qué páginas cumplen con la normativa (y cuáles no). Veremos algunos de los problemas que se pueden encontrar las personas discapacitadas para navegar y comunicarse por internet y propondremos algunas posibles soluciones. Finalizaremos con un ejemplo práctico de cómo hacer tu WordPress un poco más accesible.

1. Accesibilidad web para WordPress
Por Jose Miguel Moreno, de www.aportando.es

2. La discapacidad no debería ser
un obstáculo para el éxito.
Yo mismo he sufrido una
neuropatía motora durante toda
mi vida adulta, y no por ello he
dejado de desarrollar una
destacada carrera profesional
como astrofísico y de tener una
feliz vida familiar.
Profesor Stephen W. Hawking

3. 1. ¿Qué es la accesibilidad web?

4. La accesibilidad web significa que
personas con algún tipo de discapacidad
van a poder hacer uso de la Web,
mediante un diseño que va a permitir
que estas personas puedan
percibir, entender, navegar e interactuar
con la Web.
Según la Iniciativa por la Web Accesible (WAI) de la W3C:

5. Se trata de eliminar
(en la medida de lo posible)
las barreras que se encuentran las
personas discapacitadas
al navegar o comunicarse
por internet.

6. LOS DISCAPACITADOS
¡SOMOS MUCHOS!

7. 1000 MILLONES DE PERSONAS
viven con algún tipo de discapacidad
Fuente: Organización Mundial de la Salud (OMS)

8. 15%
DE LA
POBLACIÓN
MUNDIAL
Fuente: Organización Mundial de la Salud (OMS)

9. ¡ Y CADA VEZ SOMOS MAS!
*
El porcentaje está aumentando paulatinamente,
en parte debido al envejecimiento de la población.
Fuente: Organización Mundial de la Salud (OMS)

10. LA ACCESIBILIDAD WEB
NO ES SOLO PARA
DISCAPACITADOS

11. También puede ayudar a:
• Personas mayores
• Personas que están aprendiendo un idioma
• Con poca experiencia en internet
• Dispositivos y navegdores antiguos
• Conexiones lentas
• Situaciones de baja luminosidad, ruido…

12. ¿BENEFICIOS?
*
Una web accesible
puede generar beneficios a las empresas

13. • Pueden llegar a más clientes
• Ayuda a mejorar el posicionamiento web
• Aumenta el reconocimiento social de la
empresa
• En algunos casos ayuda a cumplir con la ley

14. 2. ¿Qué dice la legislación española
sobre la accesibilidad web?

15. LO QUE DICE LA LEY
(TEORÍA)
*
En España, todas las páginas web
de las administraciones y entidades públicas
deben ser accesibles para las personas con discapacidad
desde el 1 de Enero de 2009.
Real Decreto 1494/2007; Ley 53/2007

16. 1.000.000 €
*
Las infracciones en temas de accesibilidad web pueden
ser sancionadas con hasta 1 millón de euros.
Real Decreto Legislativo 1/2013, Artículo 83

17. REDES SOCIALES
WEBS DE EMPRESAS RELEVANTES
*
A partir del 1 de Enero de 2013,
también deben ser accesibles las redes sociales
y las empresas catalogadas
de especial relevancia económica.
Ley 26/2011

18. AHORA,
PEOR QUE ANTES
*
Discapnet publicó en 2014 un informe
indicando que la accesibilidad web de las redes sociales
ha disminuido con respecto al año 2010
http://goo.gl/xfMRM5

19. ¿CÓMO CUMPLIR LA LEY?
AA de las WCAG 2.0
*
O lo que es lo mismo, deben cumplir con la
Norma UNE 139803:2012
http://www.aenor.es/aenor/normas/normas/fichanorma.asp?tipo=N&codigo=N0049614#.VVsDHWvtmko

20. ¿Qué son las WCAG?
*
Buenas prácticas que buscan
mejorar el acceso de las personas discapacitadas
a la información digital.

21. ¿Qué son las WCAG?
*
• Son las Pautas para el Contenido Web Accesible (Web
Accesibility Content Guidelines),
de la Iniciativa por la Web Accesible (WAI) del W3C.
• Las WCAG 1.0 fueron publicadas en 1999
y las WCAG 2.0 en 2012, ambas en Diciembre.
• Ambas se basan en los mismos criterios de
conformidad pero se organizan de forma diferente.

22. Las WCAG 2.0
*
4 principios -> 12 pautas -> 61 criterios de verificación
-> Técnicas suficientes y técnicas recomendables.

23. Las WCAG 2.0
*
Niveles de conformidad A, AA y AAA.

24. Las WCAG 2.0
*
Incorpora el concepto “tecnología compatible con la
accesibilidad” (que no venía en las WCAG 1.0).
Por ejemplo, si una página utiliza Javascript, debe ser no intrusivo.
Y si tiene documentos PDF, deben estar correctamente estructurados para
que sean compatibles con las tecnologías de apoyo
(como navegadores y lectores de pantalla).

25. • UAAG 2.0: User-agent Accessibility Guidelines
• WCAG: Web Accessibility Content Guidelines
• ATAG: Authoring Tool Accessibility Guidelines
Pero hay más:
• Microsoft: Assistive Technology Product for
Windows:
http://www.microsoft.com/enable/at/matvplist.aspx
• IBM Web Accessibility checklist:
http://www-
03.ibm.com/able/guidelines/web/accessweb.html
Fuente: https://www.w3.org/WAI/intro/components.php
Componentes esenciales de la accesibilidad web

26. ¿QUÉ PÁGINA DEBERÍAN SERLO?
*

27. PERO…
:(
La mayoría de las páginas de administraciones
y entidades públicas
no cumplen los requisitos legales
de accesibilidad web.

28. PERO…
:(
De las páginas que cumplían con las WCAG 1.0,
muchas tienen problemas actualmente:
algunas se han quedado obsoletas, se han visto afectadas
por actualizaciones
o no se han realizado las correctas tareas de supervisión
de contenidos publicados.

29. PERO…
:(
Aunque la legislación entró en vigor hace varios años,
en España todavía no se ha impuesto ninguna sanción
por temas de accesibilidad web
(eso sí: algunos, como el Metro y
el Ayuntamiento de Madrid,
se pusieron las pilas después de ser demandados).

30. ¡SI CUMPLEN!
:)
WAI-WCAG 1.0 AAA
WCAG 2.0 AA
WCAG 1.0 AA

31. WTF?
:$
¿En serio pensáis que con usar
un Inclusite ya está todo?
http://www.inclusite.com/

32. Y A LOS QUE SE LAS SUDAN…
D:

33. CURIOSIDADES
D:
• En el año 2000, el comité organizador de los Juegos Olímpicos de Sydney
(Australia) fue sancionado porque su sitio web (que lo desarrolló IBM) no
era accesible.
• En 2008 y después de un juicio de dos años, la cadena de grandes
almacenes Target acordó pagar 6 millones de dólares a la Federación
Nacional de Ciegos de EEUU porque su web no era accesible.
• En el 2011, Disney fue denunciada en el mismo país por el mismo motivo.
• En los Juegos Olímpicos de Londres, se llevaron 22 demandas porque en su
página tenían varias imágenes que parpadeaban muy rápido (epilepsia
fotosensitiva).

34. PERO OJO
*
El cumplimiento de las pautas
ayuda a detectar posibles errores en un sitio web,
pero no garantiza que éste sea totalmente accesible.

35. 3. ¿Cómo acceden a los contenidos
las personas discapacitadas?

36. Diferentes discapacidades
requieren diferentes soluciones
Fuente (MX): http://goo.gl/Le1MJK

37. TECNOLOGÍAS DE APOYO
*
Las personas discapacitadas suelen utilizar
tecnologías de apoyo para navegar por internet.
Y los desarrolladores, también.

38. Discapacidad auditiva
Problemas auditivos
• Audífonos
• Vídeos con subtítulos:
2 líneas máx.
35/40 caracteres
• Transcripciones (audio/video->texto)
Editar subtitulado con Youtube:
https://support.google.com/youtube/answer/2734705
Efecto hover

39. Sordera total
• Transcripción de vídeo/audio en Lengua de
Signos Española (LSE)
• Traductor LSE virtual
• Transcripciones (en texto o LSE) de efectos
sonoros
• Textos y enlaces LSE
Editar subtitulado con Youtube:
https://support.google.com/youtube/answer/2734705
Efecto hover
Discapacidad auditiva

40. • Texto simplificado automáticamente: Simplish
http://simplish.org/ (en inglés).
• Tabletas y teclados especiales basados en iconos
• Navegadores accesibles
http://www.wwaac.eu/products/browser.asp
Discapacidad cognitiva

41. Bases de la
simplificación de contenidos:
• Una sola idea por frase
• Usar pocos sinónimos
• Glosarios
• Correcto uso de acrónimos
Discapacidad cognitiva

42. DISCAPACIDAD COGNITIVA
*
“La necesidad por contenido simplificado
puede llegar al 25% de la población”
Horacio Saggion (Universidad Pompeu Fabra)

43. Ceguera de colores
• Aunque hay programas específicos y plugins para
navegadores, no suelen utilizar nada. También
existen gafas (enChroma).
Discapacidad visual

44. Baja visión (979.000 personas)
• Magnificador de pantalla (+voz)
• Braille (+voz)
• Teclados en alto contraste
• ZoomText 9.1
• Plugins navegador para alto contraste y
aumentar/redicor fuentes.
Discapacidad visual

45. Ceguera total (36.000 personas)
• Lectores de pantalla (Jaws, NVDA…), manejados
principalmente desde teclado (normal o braille).
• En el futuro: identificación de imágenes por medio
de IA (www.imageidentify.com).
Discapacidad visual

46. Sordoceguera (6.000 personas)
• Guante dáctil (TacTIC)
• Línea braille
• Ayuda de un intérprete (lengua de signos apoyada)
• Simplificación automática de texto
Discapacidades múltiples
Entrevista de @sergiolujanmora a Santi Trigueros: http://accesibilidadweb.dlsi.ua.es/?menu=entrevista-a-santi-trigueros-una-persona-sordociega

47. • Formularios online de solicitud de transporte de
pasajeros y maletas (aeropuertos, trenes…) al
comprar los viajes.
• Envíos a domicilio (y no a central de recogida).
Discapacidad motriz

48. • Dispositivos señaladores (licornios,
ratones aumentados, ratones de boca/barbilla,
basados en sensores ópticos,pulsadores…)
• Teclados de una sola mano, teclado en pantalla
• Conmutadores (respiración, soplidos, gestos
faciales…)
• Brazo biónico
• Consultas por voz (Google Now, Cortana, Siri…)
Discapacidad motriz

49. LOS PRINCIPALES PROBLEMAS
Fuente: http://webaim.org/projects/screenreadersurvey4/#problems
• CAPTCHA
• Flash inaccesible
• Enlaces ambiguos
• Texto alternativo y cabeceros mal puestos
• Formularios complejos
• Mala accesibilidad por teclado
• Cambios inesperados de tamaño de pantalla
• Demasiados enlaces
• Tablas complejas
• Falta de enlaces de salto de contenido
• Cuadro de búsqueda inaccesible

50. USAMOS GOOGLE ASÍ
*
Los lectores de pantalla (y las líneas braille)
realizan una lectura lineal de las páginas web.

51. Las personas con ceguera total lo usan así:
Google y el lector de pantalla NVDA, que suele manejarse desde teclado
1º
2º

52. La mayoría vemos paleta de colores así:
Simulador de ceguera de colores: visión normal
http://www.color-blindness.com/coblis-color-blindness-simulator/

53. Y las personas con ceguera de color lo ven así:
Simulador de ceguera de colores: visión red-blind
http://www.color-blindness.com/coblis-color-blindness-simulator/

54. Y las personas con ceguera de color lo ven así:
Simulador de ceguera de colores: visión Green-blind
http://www.color-blindness.com/coblis-color-blindness-simulator/

55. Y las personas con ceguera de color lo ven así:
Simulador de ceguera de colores: visión blue-blind
http://www.color-blindness.com/coblis-color-blindness-simulator/

56. Procura no basar el significado de las cosas
únicamente en el color

57. Piensa en otras alternativas
Ejemplo tomado de http://wprincipiante.es/daltonismo-y-wordpress/

58. CONTRASTE & TAMAÑO
*
• texto normal: contraste mínimo de 4,5
• Texto grande y datos gráficos (diagramas, barras,…):
contraste mínimo de 3:1.
Herramienta para comprobar el contraste: http://webaim.org/resources/contrastchecker/
• Tamaño del texto: tamaño mínimo de 1em.
Usa unidades relativas (em) en lugar de absolutas.
• Fuentes legibles: sans-serif, arial, helvética…

59. CONTRASTE & TAMAÑO
XD
Incluso Comic Sans
(recomendada en el libro Accessibility HandBook 2.0)

60. Un ejemplo del Profesor Sergio Luján @sergiolujanmora
http://accesibilidadenlaweb.blogspot.com.es/2011/03/como-hacer-que-un-grafico-sea-accesible.html
Como hacer esta gráfica
mas accesible
Porcentaje de personas con acceso a internet

61. • Bordes y rellenos
diferentes (punteado,
rayado, sólido…)
• Números encima de
las barras
• Fuente grande y en
alto contraste
Un ejemplo del Profesor Sergio Luján @sergiolujanmora
http://accesibilidadenlaweb.blogspot.com.es/2011/03/como-hacer-que-un-grafico-sea-accesible.html

62. PLANTÉATE LOS PROBLEMAS QUE PUEDEN
SURGIR Y OFRECE ALTERNATIVAS

63. LA ACCESIBILIDAD WEB NO ES FÁCIL

64. PERO ¡EY!, SER CIEGO
NO ES MUCHO MAS SENCILLO, ¿EH?

65. NO TIENE POR QUÉ TENER UN DISEÑO FEO
Botones para cambiar el tamaño del texto y la combinación de colores de la página.

66. 4. Accesiblidad y WordPress

67. El mejor plugin: WP Accesibility
By @joedolson: https://wordpress.org/plugins/wp-accessibility/

68. • Marcado automático WAI-ARIA de elementos HTML.
• Elimina atributos de título de enlaces de archivos y de
nubes de tags.
• Crear enlaces (visibles o invisibles) de salto a
navegación, contenido, mapa del sitio o al destino
que queramos.
• Añadir título del artículo a los enlaces “Continuar
leyendo”.
• Añadir barra de herramientas de Accesibilidad con
ajuste de tamaño de letra y conmutador de contraste

69. • Zoom: widget para aumentar/reducir el tamaño del
texto.
• Formularios: Gravity Forms WCAG 2.0 (de pago) y
Contact Form 7: Accesible defaults . Siempre que
puedas, evita los CAPTCHA.
• SEO Remove H1: Es muy importante hacer un uso
coherente de los encabezados.
• Testers: Access monitor y Check imagen ALT text.
• Twitter Feed Accesible
• WP Youtube Lyte.

70. PRO TIP
*
Cuando busques plugins en el directorio de WordPress,
prueba a añadir WAI, ARIA o WCAG a tus consultas.
Buscar por “accesible” no suele dar buenos resultados.
O prueba los de esta lista: http://goo.gl/yupwNH

71. PRO TIP
*
Joe Dolson => #JoeForPresident
WP patterns lib:
https://github.com/wpaccessibility/a11ythemepatterns
Accessible social sharing:
http://www.slideshare.net/joedolson/build-a-wordpress-
plugin-accessible-social-sharing

72. PRO TIP
*
ARIA: ejemplos prácticos:
http://heydonworks.com/practical_aria_examples/#input
-tooltip

73. ¿QUÉ NO HACEN LOS PLUGINS?
*
• Priorizar el contenido
(pasando la navegación a la zona secundaria).
• Usar el sentido común para comprobar la coherencia de
la navegación y la operabilidad de la página.
• Usar acrónimos de forma correcta.

74. ¿QUÉ NO HACEN LOS PLUGINS?
*
• Eliminar correctamente los H1 de las imágenes del
cabecero (logo) y del resto del sitio, de forma que quede
un único H1 por página.
• Vigilar el resto la estructura de cabeceros.
• Crear textos alternativos de imágenes con sentido.
Un lector de pantalla canta “gráfica flecha” cuando
debería decir “servicios de posicionamiento web”.

75. ¿QUÉ NO HACEN LOS PLUGINS?
*
• Crear subtítulos y transcripciones de vídeo en texto.
• Evitar darle significado a los colores
(pulse el botón verde…).
• Avisar de que se va a abrir un enlace en
una ventana nueva.
• Cuando las imágenes sean decorativas,
procura ponerlas como background.

76. LOS PLUGINS NO HACEN TU WEB
TOTALMENTE ACCESIBLE

77. LOS PLUGINS AYUDAN, PERO SI QUIERES SER
ACCESIBLE, TENDRÁS QUE TRABAJAR DURO.
(O contratar a profesionales).

78. Un pequeño ejemplo práctico
La plantilla Twenty Fourteen, a pesar de estar marcada con el tag
“accesibility-ready”, por el equipo de WordPress, presenta algunos
problemas:
• Tiene varios <h1> en el header y en la zona secundaria de widgets.
Ahora únicamente aparece uno por página.
• Prioriza la navegación y el cuadro de búsqueda antes que el
contenido.

79. Un pequeño ejemplo práctico
• Los formularios no tienen un correcto etiquetado WAI-ARIA. Esto
hace que sea difícil rellenarlos si navegamos a través de un lector de
pantalla.
• No trae widgets para cambiar el tamaño del texto ni los colores de
la página.
• No tiene enlaces de salto a contenido o navegación.
• No elimina los titles de las nubes de tags…

80. Plantilla para personas ciegas o con baja visión.
• Content-first
• Salto a navegación
• Un único <h1>
• Sin enlaces fecha/autor
• Imagen decorativa como
background
• Cambiar tamaño del texto
• Migas de pan
• Alto contraste
• Font:size:1em
• Font-family:sans-serif
Descárgala aquí: http://www.aportando.es/accesibilidad

81. ADEMÁS ¡ES BUENO PARA SEO!

82. • Los buscadores (Google, Bing…) también son ciegos,
aunque no “navegan” exactamente de la misma forma que
los usuarios con discapacidad visual.
• Al cumplir con los principios de accesibilidad web e
implementar las diferentes técnicas, además de facilitar el
acceso a la información de las personas discapacitadas,
también estás facilitándole a los buscadores la tarea de
navegar y comprender los diferentes contenidos que ofrece
tu web.

83. La excepción que confirma la regla:
• Todos los enlaces que lleven a la misma página deberán
llevar el mismo anchor text (Criterio 3.2.4 de las WCAG 2.0:
Identificación consistente).

84. HERRAMIENTAS
*
• WAVE: se puede usar online o como plugin de
Chrome/Firefox para comprobar las WCAG 2.0.
http://wave.webaim.org/
• TAW: la versión online es para WCAG 2.0.
http://www.tawdis.net/
• AChecker: el más completo online (WCAG 1.0/2.0 A, AA
y AAA). http://achecker.ca/checker/index.php

85. Pero recuerda… las herramientas pueden disparar
falsos positivos y falsos negativos.
·
Las auditorías siempre deben ser revisadas punto
por punto por una persona con experiencia.

86. Antes de acabar…
Hablar de accesibilidad web en España es hablar de grandes Maestr@s como:
• Sergio Luján Mora (@sergiolujanmora)
• Ester Serna Berná (@esterserna)
• Olga Carreras Montoro (@olgacarreras)
• Y otros grandes como Antonio Fernández, Armando Suárez, Horacio Saggio…
El mejor curso sobre accesibilidad web: “Aprende accesibiliadd web paso a paso”
(+ de 9 horas de lecciones) ¡Muy recomendable!
URL: https://www.udemy.com/aprende-accesibilidad-web-paso-a-paso/

87. Recursos y páginas interesantes
• http://accesibilidadweb.dlsi.ua.es/
• https://wordpress.org/themes/universal/
• http://www.usableyaccesible.com/
• http://www.sidar.org/traducciones/wcag20/es/
• http://accesibilidadenlaweb.blogspot.com.es/
• http://www.who.int/es/ (OMS)
• https://www.udemy.com/aprende-accesibilidad-web-paso-a-paso/

88. ¡Gracias!
Soy Jose Miguel Moreno,
tengo retinosis pigmentaria
(visión túnel y ceguera nocturna),
llevo dos audífonos
y me considero muy afortunado
por la buena vida y por la gran familia que
tengo.
Consultas, sugerencias, linktonic…:
Mail: estamos@aportando.es ,
Twitter @ElectroPunkys
Blog WP: www.aportando.es/seo-malaga/