accesibilidad web para word press jose miguel moreno
Post on 07-Aug-2015
507 Views
Preview:
TRANSCRIPT
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
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.
1000 MILLONES DE PERSONASviven con algún tipo de discapacidad
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)
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…
• 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
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*
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
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).
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.
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/
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…
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
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.
•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 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
• 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/
top related