roberto remedios araya...en la web. roberto remedios wcmga 2019 “tu usuario más importante es...
TRANSCRIPT
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