Accesibilidad web para WordPress

Por Jose Miguel Moreno, de www.aportando.es

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

1. ¿Qué es la accesibilidad web?

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:

Se trata de eliminar (en la medida de lo posible)

las barreras que se encuentran las personas discapacitadas

al navegar o comunicarse por internet.

LOS DISCAPACITADOS¡SOMOS MUCHOS!

1000 MILLONES DE PERSONASviven con algún tipo de discapacidad

Fuente: Organización Mundial de la Salud (OMS)

15%DE LA

POBLACIÓNMUNDIAL

Fuente: Organización Mundial de la Salud (OMS)

¡ 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)

LA ACCESIBILIDAD WEBNO ES SOLO PARA DISCAPACITADOS

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…

¿BENEFICIOS?*

Una web accesible puede generar beneficios a las empresas

• 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

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

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

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

REDES SOCIALESWEBS 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

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

¿CÓMO CUMPLIR LA LEY?AA de las WCAG 2.0

*O lo que es lo mismo, deben cumplir con la

Norma UNE 139803:2012http://www.aenor.es/aenor/normas/normas/fichanorma.asp?tipo=N&codigo=N0049614#.VVsDHWvtmko

¿Qué son las WCAG?*

Buenas prácticas que buscan mejorar el acceso de las personas discapacitadas

a la información digital.

¿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.

Las WCAG 2.0*

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

Las WCAG 2.0*

Niveles de conformidad A, AA y AAA.

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).

• 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

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

PERO…:(

La mayoría de las páginas de administraciones y entidades públicas

no cumplen los requisitos legales de accesibilidad web.

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.

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).

¡SI CUMPLEN!:)

WAI-WCAG 1.0 AAAWCAG 2.0 AA

WCAG 1.0 AA

WTF?:$

¿En serio pensáis que con usarun Inclusite ya está todo?

http://www.inclusite.com/

Y A LOS QUE SE LAS SUDAN…D:

CURIOSIDADESD:

• 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).

PERO OJO*

El cumplimiento de las pautas ayuda a detectar posibles errores en un sitio web,

pero no garantiza que éste sea totalmente accesible.

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

Diferentes discapacidades

requieren diferentes soluciones

Fuente (MX): http://goo.gl/Le1MJK

TECNOLOGÍAS DE APOYO*

Las personas discapacitadas suelen utilizar tecnologías de apoyo para navegar por internet.

Y los desarrolladores, también.

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

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

• 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

Bases de la simplificación de contenidos:

• Una sola idea por frase• Usar pocos sinónimos• Glosarios• Correcto uso de acrónimos

Discapacidad cognitiva

DISCAPACIDAD COGNITIVA*

“La necesidad por contenido simplificado puede llegar al 25% de la población”

Horacio Saggion (Universidad Pompeu Fabra)

Ceguera de colores• Aunque hay programas específicos y plugins para

navegadores, no suelen utilizar nada. También existen gafas (enChroma).

Discapacidad visual

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

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

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

• 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

• 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

LOS PRINCIPALES PROBLEMASFuente: 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

USAMOS GOOGLE ASÍ

*Los lectores de pantalla (y las líneas braille)

realizan una lectura lineal de las páginas web.

Las personas con ceguera total lo usan así:

Google y el lector de pantalla NVDA, que suele manejarse desde teclado

1º

2º

La mayoría vemos paleta de colores así:

Simulador de ceguera de colores: visión normalhttp://www.color-blindness.com/coblis-color-blindness-simulator/

Y las personas con ceguera de color lo ven así:

Simulador de ceguera de colores: visión red-blindhttp://www.color-blindness.com/coblis-color-blindness-simulator/

Y las personas con ceguera de color lo ven así:

Simulador de ceguera de colores: visión Green-blindhttp://www.color-blindness.com/coblis-color-blindness-simulator/

Y las personas con ceguera de color lo ven así:

Simulador de ceguera de colores: visión blue-blindhttp://www.color-blindness.com/coblis-color-blindness-simulator/

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

Piensa en otras alternativas

Ejemplo tomado de http://wprincipiante.es/daltonismo-y-wordpress/

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…

CONTRASTE & TAMAÑOXD

Incluso Comic Sans (recomendada en el libro Accessibility HandBook

2.0)

Un ejemplo del Profesor Sergio Luján @sergiolujanmorahttp://accesibilidadenlaweb.blogspot.com.es/2011/03/como-hacer-que-un-grafico-sea-accesible.html

Como hacer esta gráficamas accesible

Porcentaje de personas con acceso a internet

• 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 @sergiolujanmorahttp://accesibilidadenlaweb.blogspot.com.es/2011/03/como-hacer-que-un-grafico-sea-accesible.html

PLANTÉATE LOS PROBLEMAS QUE PUEDEN SURGIR Y OFRECE ALTERNATIVAS

LA ACCESIBILIDAD WEB NO ES FÁCIL

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

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.

4. Accesiblidad y WordPress

El mejor plugin: WP Accesibility

By @joedolson: https://wordpress.org/plugins/wp-accessibility/

•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

• 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.

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

PRO TIP*

Joe Dolson => #JoeForPresidentWP patterns lib:

https://github.com/wpaccessibility/a11ythemepatternsAccessible social sharing:

http://www.slideshare.net/joedolson/build-a-wordpress-plugin-accessible-social-sharing

PRO TIP*

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

¿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.

¿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”.

¿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.

LOS PLUGINS NO HACEN TU WEB TOTALMENTE ACCESIBLE

LOS PLUGINS AYUDAN, PERO SI QUIERES SER ACCESIBLE, TENDRÁS QUE TRABAJAR DURO.

(O contratar a profesionales).

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.

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…

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

ADEMÁS ¡ES BUENO PARA SEO!

• 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.

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).

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

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.

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/

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/

¡Gracias!Soy Jose Miguel Moreno, tengo retinosis pigmentaria (visión túnel y ceguera nocturna), llevo dos audífonosy 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/