Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Accesibilidad Web: Que, como, cuando y por que?

Accesibilidad Web: Que, como, cuando y por que?

Transcript

  1. FELIPE CABARGAS MADRID Qué, cómo, cuándo y por qué? ACCESIBILIDAD

    WEB
  2. FELIPE CABARGAS MADRID Software Developer @ Monsido Copenhague, Dinamarca

  3. QUÉ

  4. - La Accesibilidad es una herramienta que como desarrolladores nos

    permite crear software y otras plataformas de manera tal que puedan ser utilizadas por personas con discapacidad. - En el caso de la Accesibilidad Web, nos referimos a soluciones que ayuden a personas con discapacidades: - Auditivas - Cognitivas - Neurológicas (cerebrales - de aprendizaje, ADHD, epilepsia) - Físicas - Linguísticas - Visuales QUÉ ES LA ACCESIBILIDAD WEB?
  5. - Los sitios web accesibles permiten a las personas que

    viven con una discapacidad a: - Acceder - Interpretar - Entender - Navegar QUÉ ES LA ACCESIBILIDAD WEB?
  6. LOS SITIOS WEB INACCESIBLES GENERAN BARRERAS

  7. Sitio multimedia sin transcripciones o subtítulos dejan fuera a personas

    con discapacidad auditiva. Servicios que sólo funcionan por voz. Sitios multimedia que si bien tienen transcripciones o subtítulos no tienen controles de ajuste de texto o volumen de audio. DISCAPACIDADES AUDITIVAS
  8. Sitios con navegación compleja o estructuras difíciles de seguir. Sitios

    con lenguaje innecesariamente técnico. Sitios que basan el contenido puramente en texto sin imágenes o grá fi cos para dar contexto. Grá fi cos, animaciones o UI extravagantes que generan distracción en el usuario. DISCAPACIDADES COGNITIVAS, NEUROLÓGICAS Y DE APRENDIZAJE
  9. Sitios sin soporte para navegación con el teclado. Timers. Controles

    sin texto alternativo. Navegación compleja que es difícil de seguir. DISCAPACIDADES FÍSICAS
  10. CÓMO

  11. CONTRASTE

  12. CONTRASTE - Las guías de la WCAG (Web Content Accessibility

    Guidelines) en su versión 2.1 de fi nen 4.5:1 (contraste mínimo para personas con visión 20/40) como el contraste mínimo para obtener una cali fi cación AA mientras que 7:1 (visión 20/80) para una clasi fi cación AAA. - La proporción se calcula con la formula: (L1 + 0.05)/(L2 + 0.05) L1 y L2 son las luminancias relativas1 de los colores, siendo 1 el mas claro y 2 el mas oscuro. - Demasiada información? Nadie quiere sacar una calculadora para escribir CSS. 1: https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html#dfn-relative-luminance
  13. monsido.com/tools/contrast-checker

  14. TEXTO ALTERNATIVO

  15. - Siempre incluye texto alternativo en las imágenes de tu

    sitio web, esto permite que motores de texto a voz lean las descripciones a los usuarios. - Mejora tu SEO. - El texto alternativo debería: - Ser preciso y corto. - Presentar el contenido y contexto de la imagen en la página. - El texto alternativo NO debería: - Ser redundante. - Empezar con “imagen de…” “grá fi co de…” “video de …”. 1: TEXTO ALTERNATIVO
  16. ESTRUCTURA DE TITULARES https://bighack.org/wp-content/uploads/2021/01/Heading-structure-accessibility-01.jpg

  17. - h1 es el titulo de la pagina, h2 las

    secciones, etc… - Los titulares (h1..h6) deberían considerarse como elementos anidados, el titulo dentro de una sección h2 debería ser un h3 y una sección nueva debería ser otro h2. - No utilices los titulares como elementos de estilos. Utiliza clases personalizadas. 1: ESTRUCTURA DE TITULARES
  18. OTROS - Haz que tus vínculos tengan texto relevante. No

    dejes URLs largas entre el texto. - Los lectores de pantalla generalmente permiten navegar entre vínculos. El texto correcto permitirá a tus usuarios llegar al contenido que desean sin frustraciones. - En formularios: - Utiliza <label for=“”> para identi fi car de manera correcta los textos alrededor de los inputs. - Utiliza aria-describedby para añadir texto complementario de ayuda. - CAPTCHA es notoriamente inaccesible. Considera otras alternativas. - Chequea que el orden de “tab” es correcto para asegurar mejor control con teclado.
  19. CUÁNDO

  20. SIEMPRE

  21. QUÉ POR

  22. - Es a bene fi cio del cliente/compañía mantener el

    sitio web actualizado a los requerimientos y normativas legales vigentes. - Mercados importantes tienen normativas y multas vigentes (Alemania, Australia, Canadá, China, Dinamarca, EU, Finlandia, Francia, Hong Kong, India, Irlanda, Israel, Japón, Holanda, Nueva Zelanda, Noruega, Korea, Suecia, Suiza, Taiwan, UK, US). - Secciones 255/508 - USA - Los sitios web accesibles tienen mejores resultados de SEO al proveer texto alternativo y otras herramientas que los crawler consideran ventajas. - Google no descartó la posibilidad de utilizar reglas WCAG dentro de su algoritmo de Rank. - Un sitio accesible también puede ayudar a las personas con discapacidad temporal como personas que sufrieron una lesión o herida. - ES LO CORRECTO. POR QUÉ DEDICAR TIEMPO A LA ACCESIBILIDAD WEB?
  23. Accessibility Handbook

  24. DISPONIBLE EN DISCORD/FACEBOOK DESPUES DEL STREAM!

  25. GRACIAS! twitter.com/juanpintoduran linkedin.com/in/cabargas aca@monsido.com