![Page 1: Accesibilidad en la Mario Aguiar Web - WordCamp Central · Accesibilidad en la Web Mario Aguiar @EMEAGUIAR. Sobre mi • Front-End Engineer en 10up • Más de 10 años de experiencia](https://reader030.vdocuments.co/reader030/viewer/2022040214/5ec0c9133dab262cea124177/html5/thumbnails/1.jpg)
Accesibilidad en la Web Mario Aguiar
@EMEAGUIAR
![Page 2: Accesibilidad en la Mario Aguiar Web - WordCamp Central · Accesibilidad en la Web Mario Aguiar @EMEAGUIAR. Sobre mi • Front-End Engineer en 10up • Más de 10 años de experiencia](https://reader030.vdocuments.co/reader030/viewer/2022040214/5ec0c9133dab262cea124177/html5/thumbnails/2.jpg)
Sobre mi
• Front-End Engineer en 10up• Más de 10 años de experiencia en
diseño y desarrollo web• Conocimientos de UX, Accesibilidad• Especializado en WordPress
![Page 3: Accesibilidad en la Mario Aguiar Web - WordCamp Central · Accesibilidad en la Web Mario Aguiar @EMEAGUIAR. Sobre mi • Front-End Engineer en 10up • Más de 10 años de experiencia](https://reader030.vdocuments.co/reader030/viewer/2022040214/5ec0c9133dab262cea124177/html5/thumbnails/3.jpg)
¿Qué es la Accesibilidad?
“La accesibilidad en la web (a11y) se refiere a la práctica de remover barreras que previenen la interacción, o acceso, a sitios web por parte
de personas con capacidades diferentes”
![Page 4: Accesibilidad en la Mario Aguiar Web - WordCamp Central · Accesibilidad en la Web Mario Aguiar @EMEAGUIAR. Sobre mi • Front-End Engineer en 10up • Más de 10 años de experiencia](https://reader030.vdocuments.co/reader030/viewer/2022040214/5ec0c9133dab262cea124177/html5/thumbnails/4.jpg)
¿Por qué es importante la accesibilidad?
• Más personas = Más ganancias
• Requerimientos legales
• Inclusión
![Page 5: Accesibilidad en la Mario Aguiar Web - WordCamp Central · Accesibilidad en la Web Mario Aguiar @EMEAGUIAR. Sobre mi • Front-End Engineer en 10up • Más de 10 años de experiencia](https://reader030.vdocuments.co/reader030/viewer/2022040214/5ec0c9133dab262cea124177/html5/thumbnails/5.jpg)
“Esto no es una pipa”
![Page 6: Accesibilidad en la Mario Aguiar Web - WordCamp Central · Accesibilidad en la Web Mario Aguiar @EMEAGUIAR. Sobre mi • Front-End Engineer en 10up • Más de 10 años de experiencia](https://reader030.vdocuments.co/reader030/viewer/2022040214/5ec0c9133dab262cea124177/html5/thumbnails/6.jpg)
Si puedes leer estoTú, eres afortunado
![Page 7: Accesibilidad en la Mario Aguiar Web - WordCamp Central · Accesibilidad en la Web Mario Aguiar @EMEAGUIAR. Sobre mi • Front-End Engineer en 10up • Más de 10 años de experiencia](https://reader030.vdocuments.co/reader030/viewer/2022040214/5ec0c9133dab262cea124177/html5/thumbnails/7.jpg)
–ANTIGUO DICHO EN UX
“Crea sitios web, que tu abuela pueda utilizar”
![Page 8: Accesibilidad en la Mario Aguiar Web - WordCamp Central · Accesibilidad en la Web Mario Aguiar @EMEAGUIAR. Sobre mi • Front-End Engineer en 10up • Más de 10 años de experiencia](https://reader030.vdocuments.co/reader030/viewer/2022040214/5ec0c9133dab262cea124177/html5/thumbnails/8.jpg)
–VERSIÓN ACCESIBLE
“Crea sitios web, que cualquiera pueda utilizar”
![Page 9: Accesibilidad en la Mario Aguiar Web - WordCamp Central · Accesibilidad en la Web Mario Aguiar @EMEAGUIAR. Sobre mi • Front-End Engineer en 10up • Más de 10 años de experiencia](https://reader030.vdocuments.co/reader030/viewer/2022040214/5ec0c9133dab262cea124177/html5/thumbnails/9.jpg)
–META FINAL
“Crea sitios web, que robots puedan utilizar”
![Page 10: Accesibilidad en la Mario Aguiar Web - WordCamp Central · Accesibilidad en la Web Mario Aguiar @EMEAGUIAR. Sobre mi • Front-End Engineer en 10up • Más de 10 años de experiencia](https://reader030.vdocuments.co/reader030/viewer/2022040214/5ec0c9133dab262cea124177/html5/thumbnails/10.jpg)
¿Cómo crear un sitio web accesible?
![Page 11: Accesibilidad en la Mario Aguiar Web - WordCamp Central · Accesibilidad en la Web Mario Aguiar @EMEAGUIAR. Sobre mi • Front-End Engineer en 10up • Más de 10 años de experiencia](https://reader030.vdocuments.co/reader030/viewer/2022040214/5ec0c9133dab262cea124177/html5/thumbnails/11.jpg)
• Utiliza HTML semántico
• Utiliza los atributos de las etiquetas (alt, title)
• Utiliza atributos accesibles (aria, role)
• Sigue los estándares de accesibilidad (WCGAG 2.0, Section 508)
![Page 12: Accesibilidad en la Mario Aguiar Web - WordCamp Central · Accesibilidad en la Web Mario Aguiar @EMEAGUIAR. Sobre mi • Front-End Engineer en 10up • Más de 10 años de experiencia](https://reader030.vdocuments.co/reader030/viewer/2022040214/5ec0c9133dab262cea124177/html5/thumbnails/12.jpg)
Contenido sin texto
• Todo contenido sin texto necesita un equivalente descriptivo en texto
• Ejemplos: Fotografías, gráficas, video
![Page 13: Accesibilidad en la Mario Aguiar Web - WordCamp Central · Accesibilidad en la Web Mario Aguiar @EMEAGUIAR. Sobre mi • Front-End Engineer en 10up • Más de 10 años de experiencia](https://reader030.vdocuments.co/reader030/viewer/2022040214/5ec0c9133dab262cea124177/html5/thumbnails/13.jpg)
![Page 14: Accesibilidad en la Mario Aguiar Web - WordCamp Central · Accesibilidad en la Web Mario Aguiar @EMEAGUIAR. Sobre mi • Front-End Engineer en 10up • Más de 10 años de experiencia](https://reader030.vdocuments.co/reader030/viewer/2022040214/5ec0c9133dab262cea124177/html5/thumbnails/14.jpg)
Contraste• Toda combinación de fondo/texto debe tener contraste suficiente
para ser leído sin problemas
• Contraste mínimo 4.5.1
MALAIDEA
MALAIDEA
BUENAIDEA
![Page 15: Accesibilidad en la Mario Aguiar Web - WordCamp Central · Accesibilidad en la Web Mario Aguiar @EMEAGUIAR. Sobre mi • Front-End Engineer en 10up • Más de 10 años de experiencia](https://reader030.vdocuments.co/reader030/viewer/2022040214/5ec0c9133dab262cea124177/html5/thumbnails/15.jpg)
Enlaces
• Un enlace debe parecer un link
• Un enlace debe ser reconocible sin color.
• Un enlace subrayado, es fácilmente reconocible.
• Todo link debe ser descriptivo.
![Page 16: Accesibilidad en la Mario Aguiar Web - WordCamp Central · Accesibilidad en la Web Mario Aguiar @EMEAGUIAR. Sobre mi • Front-End Engineer en 10up • Más de 10 años de experiencia](https://reader030.vdocuments.co/reader030/viewer/2022040214/5ec0c9133dab262cea124177/html5/thumbnails/16.jpg)
Extras
• HTML semántico, especialmente en encabezados.
• Debe ser posible navegar por el sitio utilizando sólo el teclado.
• El diseño responsivo garantiza que se pueda acceder al sitio aún si no se posee una computadora (no es parte del estándar).
• Uso de etiquetas ARIA
![Page 17: Accesibilidad en la Mario Aguiar Web - WordCamp Central · Accesibilidad en la Web Mario Aguiar @EMEAGUIAR. Sobre mi • Front-End Engineer en 10up • Más de 10 años de experiencia](https://reader030.vdocuments.co/reader030/viewer/2022040214/5ec0c9133dab262cea124177/html5/thumbnails/17.jpg)
Testing
![Page 18: Accesibilidad en la Mario Aguiar Web - WordCamp Central · Accesibilidad en la Web Mario Aguiar @EMEAGUIAR. Sobre mi • Front-End Engineer en 10up • Más de 10 años de experiencia](https://reader030.vdocuments.co/reader030/viewer/2022040214/5ec0c9133dab262cea124177/html5/thumbnails/18.jpg)
WAVE
![Page 19: Accesibilidad en la Mario Aguiar Web - WordCamp Central · Accesibilidad en la Web Mario Aguiar @EMEAGUIAR. Sobre mi • Front-End Engineer en 10up • Más de 10 años de experiencia](https://reader030.vdocuments.co/reader030/viewer/2022040214/5ec0c9133dab262cea124177/html5/thumbnails/19.jpg)
HTML_CodeSniffer
![Page 20: Accesibilidad en la Mario Aguiar Web - WordCamp Central · Accesibilidad en la Web Mario Aguiar @EMEAGUIAR. Sobre mi • Front-End Engineer en 10up • Más de 10 años de experiencia](https://reader030.vdocuments.co/reader030/viewer/2022040214/5ec0c9133dab262cea124177/html5/thumbnails/20.jpg)
User Testing
![Page 21: Accesibilidad en la Mario Aguiar Web - WordCamp Central · Accesibilidad en la Web Mario Aguiar @EMEAGUIAR. Sobre mi • Front-End Engineer en 10up • Más de 10 años de experiencia](https://reader030.vdocuments.co/reader030/viewer/2022040214/5ec0c9133dab262cea124177/html5/thumbnails/21.jpg)
Lectores de Pantalla
• ChromeVox
• VoiceOver (Mac)
• JAWS
![Page 22: Accesibilidad en la Mario Aguiar Web - WordCamp Central · Accesibilidad en la Web Mario Aguiar @EMEAGUIAR. Sobre mi • Front-End Engineer en 10up • Más de 10 años de experiencia](https://reader030.vdocuments.co/reader030/viewer/2022040214/5ec0c9133dab262cea124177/html5/thumbnails/22.jpg)
Más que probar
• Navegación por teclado
• Activa los modos de alto contraste
• ¿Cuánto tardas en llegar al verdadero contenido?
![Page 23: Accesibilidad en la Mario Aguiar Web - WordCamp Central · Accesibilidad en la Web Mario Aguiar @EMEAGUIAR. Sobre mi • Front-End Engineer en 10up • Más de 10 años de experiencia](https://reader030.vdocuments.co/reader030/viewer/2022040214/5ec0c9133dab262cea124177/html5/thumbnails/23.jpg)
“La web es para todos, asegurémonos de ello.”
![Page 24: Accesibilidad en la Mario Aguiar Web - WordCamp Central · Accesibilidad en la Web Mario Aguiar @EMEAGUIAR. Sobre mi • Front-End Engineer en 10up • Más de 10 años de experiencia](https://reader030.vdocuments.co/reader030/viewer/2022040214/5ec0c9133dab262cea124177/html5/thumbnails/24.jpg)
Gracias