Roberto Remedios ArayaProduct Designer / Developer

WordPress Fan since 2016@remediosgraphic

WordPress - Accesibilidad en la web.Roberto Remedios

WCMGA 2019

“Tu usuario más importante es ciego. La mitad de las visitas a tu sitio vienen de

Google, y Google sólo ve lo que un ciego puede ver. Si tu sitio no es accesible, tendrás menos

visitas. Fin de la historia. “

Fisica o Sensorial

Visual Mobilidad Auditiva

Diferentes discapacidades

Física: Movilidad

Sensorial: Visual, Auditiva

Psicosocial: Depresión, esquizofrenia, bipolaridad, pánico.

Cognitiva: Memoria, dyslexia , DA.

Visual

285 millones de personas con discapacidades visuales en el mundo.

- 39 millones son ciegos- 246 millones problemas de vision- 82% de las personas ciegas son de 50 o más.- 1.4 millones de niños

Daltonicos 1 de cada 10

Cotidianidad - Naturaleza

Movilidad

Las personas de movilidad reducida (PMR) son aquellas que tienen permanente o temporalmente limitada la capacidad de moverse sin ayuda externa.

Paraplejia, tetraplejia, embarazo, vejez, temporales.

Cotidianidad

Cotidianidad

Auditiva

360 millones de personas con discapacidades auditivas en el mundo (%5).

- 32 millones son niños, 5 de cada 1000 de nac.- 1100 millones de jóvenes (12 y 35 años) están en

riesgo.- 1 de cada 3 mayores de 65 años.

Lenguaje de señas

Edad Avanzada

Cotidianidad - industrial

Otras DiscapacidadesCognitivo: Describe cualquier característica que actúa como una barrera para el proceso cognitivo.Trastornos de aprendizaje, dyslexia, DA, consumo de drogas.

Vejez o avanzada edad.

Afecta a (casi) todas las personas.

Conlleva a riesgo y efectos paralelos como comprensión o usabilidad.

No aplica a los jóvenes ?

WAI - ARIA

Web Accessibility (A11Y) Initiative - Accessible Rich Internet Applications

Agregar información de accesibilidad a los elementos HTML

Puede ser usada con Versiones previas a HTML5

Fue publicada en Marzo del 2014

Cinco reglas para el uso de ARIASi usa HTML5 nativo, use elementos semánticos ya construidos de lo contrario piense como replantear el elemento.

No Cambie la semántica de los elementos (no <H1 role=”button”>)

Todos los elementos interactivos de ARIA deben ser accesibles con el teclado o al menos tener un equivalente.

No use role=”presentation” o aria-hidden=”true” en elementos de foco

Todos los elementos interactivos deben tener un nombre accesible. (text, button, etc)

Buenas PrácticasExperiencias de usuarios

User Stories, asegurar usabilidadComponentes

Usuario / Resultado / Valor

Como usuario, deseo lograr x

Como usuario, deseo x y obtener y

Para obtener un valor y yo como usuario deberá obtener x

Principios

Uso Justo: El diseño es útil a personas con capacidades diferentes

Flexible: Se adapta a una amplia gama de preferências

Simple e intuitivo: Es fácil de entender, independientemente de la experiencia del usuario, los conocimientos, habilidades lingüísticas o nivel de concentración

Información perceptible: Comunica la información necesaria

Bajo Esfuerzo Físico: El diseño se puede utilizar de manera eficiente y cómoda y con un mínimo de fatiga

Usuarios / Actualidad

Wendy Edad 18 -35

Sexo - fem

Intereses: A,B,C

CarlosEdad 18 -35

Sexo - Masc

Intereses: A,E,X

AndreaEdad 36 -55

Sexo - fem

Intereses: X,B,Z

FernandoEdad 36 -55

Sexo - masc

Intereses: A,B,D

Buenas prácticas técnicas ALT text en imagenes y links.

Google no puede ver las imagenes solo sabe interpretar estos archivos basados en la descripción que se provee.

Al igual que una personas con discapacidad visual, si no tenemos una buena conexión para cargar imágenes en nuestro sitio una imagen sin descripción no brinda ningún valor a nuestro contenido.

Buenas prácticas técnicas Hyperlinks.

Agregar a nuestro contenido “ver mas” “click aqui” ..

Advertir antes de dejar una página o abrir una nueva ventana

Sus links tienen estilo subrayado o alguna cualidad de distinción.

Son todos sus links consistentes (mismo color, estilo, tamaño)

Utiliza alto contraste en sus links? (solo cambio de color no es suficiente)

Buenas prácticas técnicas Estilos en los estados

: focus

: visited

: hover

Probar usabilidad por medio de los TABS.

Comprobar si navegacion o links aun son visibles en situaciones de alta o baja iluminación.

Buenas prácticas técnicas

Compruebe el contraste de su sitio con herramientas como:

Color Contrast Analyzer de chrome

http://leaverou.github.io/contrast-ratio/

http://webaim.org/resources/contrastchecker/

http://www.checkmycolours.com/

Buenas prácticas técnicas Utilizar <labels> de los formularios adecuadamente

Revisar atributos de los mismos, ID

Revisar que el cursor muestro icono de selección cuando clickea o pasa sobre el elemento

Revisar si los labels tiene propiedad de focus / completo / error… etc

Buenas prácticas técnicas Utilizar elementos

de HTML5

Buenas prácticas técnicas Tomar en cuenta

HTML5 Mobile

Cuidar elementos grid css, flexbox, floats

Buenas prácticas técnicas Use los elementos HTML adecuadamente

<header>

<nav>

<main> uno por pagina

<aside>

<form> inclusive para buscadores

Buenas prácticas técnicas Use los elementos de título <H*> sabiamente

Solo un <h1> por página

No mezcle los niveles de jerarquía h2, h1, h4, h3….

Si usa anidación hágalo adecuadamente.

El no usar H1 en cada nueva sección de su contenido no afecta el SEO, plantee un orden jerárquico de la información para definir su importancia y valor.

Buenas prácticas técnicas Utilize <button>, <input>, <a> para realizar acciones.

No use un <div> o <span> con funciones de onclick.

Revise si con el teclado estos son accesibles.

Click control me lleva a otro tab?

Tab click para navegar elementos.

No utilize tabindex > 0 , interfiere con el orden natural de lectura.

Buenas prácticas técnicas Utilize el lang attribute en HTML

Voice Over usa auto switch voz / acento

JAWS carga correctamente la fonética o diccionario

Use el lenguaje correcto : en / es / fr

No deshabilite el zoom (mobile)

Evite infinite scroll

Buenas prácticas técnicas Utilice caption y subtítulos (videos)

Agregue un texto alternativo HTML a sus videos

Agregue auto descriptions

Revise los auto captions

WordPress es WCAGTodos los updates en core temas o plugins de WP deben ser WCAG 2.0

Buenas prácticas

https://make.wordpress.org/core/handbook/best-practices/coding-standards/accessibility-coding-standards/

https://www.w3.org/WAI/intro/wcag

https://make.wordpress.org/accessibility/get-involved/

WordPress es WCAG

Temas accesibles:

https://wordpress.org/themes/tags/accessibility-ready/

Plugins Accesibles:

https://wordpress.org/plugins/accessible-video-library/

https://wordpress.org/plugins/access-monitor/

https://wordpress.org/plugins/wp-accessibility/

Para finalizar

Soporte a la accesibilidad no es solo buena práctica para la web, en algún momento todos vamos a ocupar de alguna ayuda, asi que basicamente seria trabajar para el futuro. Entrenar y enseñar a developers más jóvenes garantiza su futuro.

Accesibilidad no es un checklist

Accesibilidad requiere mantenimiento

Accesibilidad es un proceso y siempre está en evolución