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?

More Decks by A. Felipe Cabargas Madrid

Other Decks in Programming

Transcript

  1. - 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?
  2. - Los sitios web accesibles permiten a las personas que

    viven con una discapacidad a: - Acceder - Interpretar - Entender - Navegar QUÉ ES LA ACCESIBILIDAD WEB?
  3. 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
  4. 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
  5. 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
  6. 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
  7. - 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
  8. - 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
  9. 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.
  10. - 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?