Cómo hacer que tu web sea accesible para todos - By Fabian Altahona

Evento WordPress BQ Reloaded: Rendimiento y Accesibilidad en Acción.
https://www.meetup.com/wordpress-barranquilla/events/302820301/?utm_medium=referral&utm_campaign=share-btn_savedevents_share_modal&utm_source=link

Transcript

1. #WPBQ
2. Cómo hacer que tu web sea accesible para todos
3. ¡Hola! Soy Fabian Altahona @fabolivar / WPBQ
4. Diversidad Funcional? @fabolivar23 #WPBQ
5. Diversidad Funcional? @fabolivar23 #WPBQ • Cognitiva • Visual • Fisica • Auditiva • Verbal OMS -> 200 millones de personas en el mundo presentan Diversidad Funcional es decir 1 de cada 7 personas.
6. Diversidad Funcional? @fabolivar23 #WPBQ Dependencia a tecnologías de asistencia (Software, hardware) • Lectores de Pantalla • Ampliadores de Pantalla • Navegadores de Texto • Software de Reconocimiento de Voz • Validadores de Accesibilidad • Dispositivos de entrada alternativos • Pantallas Braille • Sistemas de Navegación por Teclado
7. W3C [World Wide Web Consortium]
8. W3C [World Wide Web Consortium] WCAG [Web Content Accessibility Guidelines] ❖ Perceptible ❖ Operable ❖ Comprensible ❖ Robusto A AA AAA Nivel de conformidad WAI-ARIA [Web Accessibility Initiative] Se organiza en cuatro principios fundamentales para la accesibilidad del contenido
9. Estándares de accesibilidad Web en Colombia ?
10. Estándares de accesibilidad Web en Colombia ? [ Ley 1341 de 2009 (Ley de TIC) ] Lineamientos generales de la Estrategia de Gobierno en Línea. PRINCIPIOS APLICABLES • Gobierno centrado en el ciudadano. • Visión unificada del Estado. • Acceso equitativo y multicanal. • Protección de la información del individuo. • Credibilidad y confianza en el Gobierno en Línea. [ Norma Técnica NTC 5854 - ICONTEC ] Proporciona directrices que cubren varios aspectos del diseño y desarrollo web para asegurar que los contenidos sean perceptibles, operables, comprensibles y robustos para todos los usuarios, independientemente de sus habilidades o discapacidades. • Esta norma actual es equivalente a WCAG 2.1 [ Ley 1618 de 2013] [ Decreto 1081 de 2015] [ Resolución 1519 de 2020]
11. Estándares de accesibilidad Web en Colombia ? [ Norma Técnica 5854 - ICONTEC ] Proporciona directrices que cubren varios aspectos del diseño y desarrollo web para asegurar que los contenidos sean perceptibles, operables, comprensibles y robustos para todos los usuarios, independientemente de sus habilidades o discapacidades. • Esta norma es equivalente a WCAG 2.1 WCAG 2.1 tiene diecisiete nuevas pautas que se centran en mejorar la accesibilidad para los usuarios con discapacidades cognitivas y para los usuarios que navegan por sitios web en dispositivos móviles como tablets y teléfonos inteligentes.
12. Diversidad funcional cubierta por los puntos de control de calidad de WCAG 2.1
13. La rampa en edificios la mayoría de las veces la asociamos con personas discapacitadas en sillas de ruedas. Puede ser para todos: • La mamá con un coche de bebé. • Repartidor con alguna carretilla con cajas pesadas. • Nosotros mismos por ejemplo sí algún día nos hemos fracturado y vamos con muletas.
14. Hacer una página Web Accesible no solo ayuda a las personas con discapacidad sino que nos ayuda a todos.
15. Accesibilidad No es negro y blanco
16. • Primero Escritorio Diseño de páginas web receptivas - Responsive • Primero Móvil
18. Usabilidad Web Vs Accesibilidad Web
19. • Usuarios específicos. • Objetivos específicos. • Contexto específico. • Con eficacia, eficiencia y satisfacción. Usabilidad Web
20. Pruebas de Usabilidad Mala Usabilidad Buena Usabilidad
21. • Flexibilidad. • Beneficios para el usuario. • Tecnologías de asistencia. • A menudo es exigida por la ley. • Igualdad de acceso e igualdad de oportunidades. Accesibilidad Web
22. Accesibilidad Web
23. Accesibilidad Web - WAI ARIA - Actúa como el controlador. - Manipula los datos y la interfaz de usuario. - Maneja los eventos. - Produce un nuevo widget. Navegador DOM Role - Tipos de widgets - Puntos de referencia de la Navegación. Estados y propiedades - Widgets - Formulario - Regiones vivas - Relaciones - Valor Jerarquía implementada a través del DOM. Eventos de estado y de propiedad Tecnología de Asistencia Agente de usuario API de Accesibilidad
24. Accesibilidad Web - WAI ARIA
25. Beneficios de tener una Web Accesible
26. • Mejora la indexación y localización del sitio Web en los buscadores. • Reduce el mantenimiento (Consistencia). • Escalabilidad, Crecimiento (nuevas líneas de negocio). • Movilidad (Celulares, TVs, PDA). • Aumento en el número de clientes. Beneficios de tener una Web Accesible
27. Errores comunes de Accesibilidad
28. • Imágenes con información relevante para el usuario sin una correcta alternativa textual (alt). • Imágenes decorativas deben tener la alternativa textual vacía (alt=””), utilizar el atributo WAI-ARIA aria-hidden=”true” o ser embebidas en el HTML a través del CSS. • En los formularios, las etiquetas <label> no son asociadas a su correspondiente elemento <input> mediante los atributos “for” e “id”, • El color se usa como único medio visual para transmitir la información. • El color de los textos no tiene un contraste mínimo de al menos 4,5:1 respecto al color del fondo. • El tamaño de los textos se encuentra en medidas absolutas (px o pt), impidiendo así al usuario poder aumentar el tamaño del texto. • Se emplean imágenes de texto como enlaces o botones. Los asistentes técnicos no pueden interpretar el texto que se encuentra en las imágenes. • Todo el contenido del sitio Web no es accesible a través del teclado o el foco del teclado no es visible. • Los carruseles o sliders no pueden ser detenidos o pausados. Errores comunes de Accesibilidad
29. • Se utiliza el atributo “tabindex” modificando el orden coherente y significativo del foco del teclado. • Los enlaces no tienen una descripción que identifique el propósito del elemento o es demasiada ambigua, provocando confusión en el usuario al navegar por la página a través de un asistente técnico. • El contenido no se encuentra estructurado en encabezados (H1...H6) siguiendo una jerarquía lineal y coherente con descripciones adecuadas. • No se indica el idioma del sitio Web mediante el atributo “lang” o los cambios de idioma. • No se informa al usuario de errores en la introducción de datos de entrada, como indicar el formato admitido en el campo de entrada o asociar el error a su correspondiente campo de entrada mediante el atributo WAI-ARIA aria-describedby. • En ocasiones se desea ocultar información visiblemente, pero no para los usuarios de asistentes técnicos. • Los cambios de contenido que se producen automáticamente no son anunciados al usuario mediante los atributos WAI-ARIA correspondientes. Errores comunes de Accesibilidad
30. • Se utilizan etiquetas de HTML y atributos o roles WAI-ARIA de forma equivocada, es decir, con una funcionalidad diferente a la que han sido establecidos. Errores comunes de Accesibilidad
31. ¡Gracias! Fabian Altahona / @fabolivar23 / Ab2Web / WPBQ #WPBQ “Las preguntas, que sean fáciles, por favor. XD”
32. El mayor beneficio es el propio aprendizaje Contribuir es la mejor manera de aprender #WPBQ