Save 37% off PRO during our Black Friday Sale! »

¿Es mi aplicación accesible?

¿Es mi aplicación accesible?

Diapositivas utilizadas durante el Polymer Day en Madrid

5c086974327e7f3da17333e836f1a9ba?s=128

fzberlinches

October 22, 2016
Tweet

Transcript

  1. ¿ES MI APLICACIÓN ACCESIBLE? / Félix Zapata @felixzapata

  2. SOBRE MÍ Desarrollador senior front end y consultor de accesibilidad

    web. Trabajo en . Fundador del grupo meetup . Coorganizador de los grupos meetup , y . Aerotranstornado: piloto P1 y controlador S3 (aspirante a C1) en la red . GFT WordPress Madrid Accesibilidad Spain Angular Madrid Polymer Madrid VATSIM Mi GitHub: felixzapata
  3. CRÉDITOS Ilustraciones: Marta Segurola

  4. PROBLEMA = INACCESIBLE

  5. POSIBLE (ALGO ES ALGO) Si os parece exagerada esta imagen,

    tenéis que ver las fotos que publica en su twitter @OscarJim3nez
  6. PRÁCTICO = ACCESIBLE

  7. ¡PARA NOTA! = USABLE

  8. ¿POR QUÉ DEBO TENER EN CUENTA LA ACCESIBILIDAD? Pues porque

    es un derecho. Algunos piensan que la accesibilidad web es un privilegio
  9. ¿QUÉ DICE LA LEY EN ESPAÑA? La accesibilidad es obligatoria

    para algunos sitios webs y aplicaciones.
  10. ¿PERO QUÉ ES LA ACCESIBILIDAD WEB? La capacidad de poder

    acceder a la información y/o realizar alguna acción sin necesitar ayuda. Stop Talking About Accessibility. Start Talking About Inclusive Design.
  11. A-E-I-O-U DE LA ACCESIBILIDAD

  12. A - ALTERNATIVAS Alternativas a imágenes, (emojis), y multimedia, principalmente.

  13. E - ESTRUCTURA Semántica, estructura, , formularios, etc. tablas de

    datos
  14. I - IDENTIFICACIÓN Ocultar texto de forma accesible, avisar de

    cambios (importante), etc
  15. O - OPERABILIDAD Los (dichosos) lightbox o cualquier elemento (componente)

    con funcionalidad propia (carruseles, etc). Should I Use A Carousel? The Unbearable Inaccessibility of Slideshows!
  16. U - USO DEL COLOR Ensure High Contrast for Text

    Over Images. Contrast Rebellion - to hell with unreadable, low-contrast texts!.
  17. LAS PREGUNTAS DE SIEMPRE ¿Es ? ¿es ? ¿es React

    accesible? ¿es el framework / librería de turno accesible? Polymer accesible AngularJS accesible En lugar de: ¿sé hacerlo accesible?
  18. REVISEMOS UNA APLICACIÓN HECHA CON POLYMER Shrine template

  19. IMPORTANTE Algunas herramientas automáticas de revisión no funcionan muy bien

    con el Shadow DOM.
  20. ANTES DE LOS CAMBIOS

  21. "IMAGES SHOULD HAVE A TEXT ALTERNATIVE OR PRESENTATIONAL ROLE" Añadimos

    textos alternativos a las imágenes.
  22. "MEANINGFUL IMAGES SHOULD NOT BE USED IN ELEMENT BACKGROUNDS" Cambiamos

    el logo para usarlo como imagen en lugar de como fondo.
  23. "TEXT ELEMENTS SHOULD HAVE A REASONABLE CONTRAST RATIO" Sustituimos los

    contrastes inadecuados.
  24. "THE PURPOSE OF EACH LINK SHOULD BE CLEAR FROM THE

    LINK TEXT" Incorporamos textos para los botones y enlaces.
  25. "THESE ELEMENTS ARE FOCUSABLE BUT EITHER INVISIBLE OR OBSCURED BY

    ANOTHER ELEMENT" Revisamos estos elementos.
  26. EN RESUMEN.... Los fallos que podemos encontrar no son por

    Polymer (o la librería que uses). #useThePlatform
  27. ENLACES DE INTERÉS Norma UNE 139803:2012. Requisitos de Accesibilidad para

    contenidos en la web Legislación nacional Creating an accessible web - Access iQ A web without limits - Access iQ Smartphones Become Essential Accessories for the Blind
  28. ENLACES DE INTERÉS (SEGUNDA PARTE) Apps For All: Coding Accessible

    Web Applications ARIA examples CSS Test for accessibility issues The A11Y Project aDesigner
  29. ENLACES DE INTERÉS (TERCERA PARTE) Before and After Demonstration The

    Accessibility Cheatsheet Live Regions y WAI-ARIA. Cómo mejorar la accesibilidad de contenidos que se actualizan automáticamente Guía de accesibilidad de documentos electrónicos Accessibility statement
  30. ENLACES DE INTERÉS (CUARTA PARTE) Writing an accessibility statement Accessibility

    Wins Herramienta de contraste de Lea Verou Building accessible web components without tears
  31. ENLACES DE INTERÉS (QUINTA PARTE) Los sitios web de la

    Comisión Europea deben ser accesibles desde enero de 2010 Accessibility is My Favorite Part of the Platform - Google I/O 2016 Contenido dinámico accesible: Yes, we can!
  32. ENLACES DE INTERÉS (SEXTA PARTE) Checklist for Web Content Accessibility

    Guidelines 2.0 How to Meet WCAG 2.0 5 cosas sencillas para mejorar la accesibilidad Making Accessible Web Apps Using HTML5 and ChromeVox
  33. ENLACES DE INTERÉS (SÉPTIMA PARTE) Accessibility in Rapid Iterative Development

    Google Accessibility course Accessibility Patterns for the Web Dos and don'ts on designing for accessibility
  34. ENLACES DE INTERÉS (OCTAVA PARTE) WAI-ARIA Authoring Practices 1.1 A11ycasts

    with Rod Dodson