Accesibilidad web
Devtalks
¿Qué es la accesibilidad?
Significa que sitios web, herramientas y tecnologías están diseñadas y desarrolladas de tal manera que las personas con discapacidad puedan percibir, comprender, navegar e interactuar con el contenido.
A11Y
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1074608/images/8457293/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1074608/images/8461023/pasted-from-clipboard.png)
¿Qué es la accesibilidad?
Las discapacidades relacionadas con el acceso a la web son:
-
auditivas
-
cognitivas
-
neurológicas
-
motriz
-
del habla
-
visuales
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1074608/images/8461025/pasted-from-clipboard.png)
Problemas temporales o situacionales
-
Estoy en el transporte público
-
Batería baja
-
Luz pegando a la pantalla
-
No puedo activar el sonido
-
Conjuntivitis
La accesibilidad también ataca a
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1074608/images/8457682/pasted-from-clipboard.png)
Tecnologías de apoyo
Proporcionan la funcionalidad necesaria para cubrir las necesidades de los usuarios con discapacidad
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1074608/images/8456448/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1074608/images/8456460/pasted-from-clipboard.png)
Pulsador
Pantalla Braille
Magnificador
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1074608/images/8456485/pasted-from-clipboard.png)
Lector de pantalla
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1074608/images/8456487/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1074608/images/8456489/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1074608/images/8456888/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1074608/images/8457687/pasted-from-clipboard.png)
Navegación por teclado
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1074608/images/8460250/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1074608/images/8460251/pasted-from-clipboard.png)
¿Por qué pensar en accesibilidad?
4 razones para empezar a preocuparnos por la accesibilidad
1
Más de mil millones de personas poseen discapacidad
Más conversiones en Ecommerce
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1074608/images/8457684/pasted-from-clipboard.png)
2
- USA. Americans with Disabilities Act (ADA)
- Europa. Acta Europea de Accesibilidad (2019)
- Argentina. Ley N° 26.653 de “Accesibilidad Web”
Legislaciones
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1074608/images/8456544/pasted-from-clipboard.png)
@servicedesignclub
3
SEO
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1074608/images/8456551/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1074608/images/8457186/pasted-from-clipboard.png)
4
Transformación digital
W3C
El World Wide Web Consortium (W3C) desarrolla estándares web internacionales: HTML, CSS y muchos más. Los estándares de W3C se llaman Recomendaciones del W3C.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1074608/images/8456557/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1074608/images/8460540/pasted-from-clipboard.png)
WCAG
Serie de recomendaciones con el objetivo de hacer el contenido web más accesible.
Son las pautas más reconocidas y exigidas a nivel internacional.
Web Content Accessibility Guidelines
W3C Accessibility Guidelines
2.1
3.0
2.0
1.0
1999
2008
2018
2.2
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1074608/images/8466489/pasted-from-clipboard.png)
4 Principios
13 Pautas
Niveles de conformidad
A
AA
AAA
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1074608/images/8457309/pasted-from-clipboard.png)
en total
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1074608/images/8457309/pasted-from-clipboard.png)
Para personas y robots.
Ofrece alternativas para el mismo contenido
Interactivo y navegable.
Compatible con tecnologías de apoyo
Usable
Organizado
Interpretado por diferentes agentes de usuario (navegador y tecnología de apoyo)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1074608/images/8460462/pasted-from-clipboard.png)
Principio
Pauta
Técnica o error
Criterio de conformidad
Errores de accesibilidad más comunes
La Web es accesible por defecto"
accessiBe (2019)
98% de errores solo en menús
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1074608/images/8456612/pasted-from-clipboard.png)
10 millones de sitios
WebAIM Millon (2020)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1074608/images/8456600/pasted-from-clipboard.png)
El 98.1% de los sitios analizados mostraron problemas de Accesibilidad
1
Contraste
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1074608/images/8456643/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1074608/images/8456644/pasted-from-clipboard.png)
2
Imágenes sin texto alternativo
1.1.1 Contenido que no es texto: Todo el contenido que no es texto, que se presenta al usuario, tiene una alternativa de texto que sirve para el propósito equivalente.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1074608/images/8457691/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1074608/images/8456673/pasted-from-clipboard.png)
✔
<img src="imagen.jpg" alt="Close-up of a bear's face" />
❌
<img src="imagen.jpg" alt="bear, brown bear, grizzly, grizzly bear, mammal, carnivore" />
❌
<img src="imagen.jpg" alt="Image of a bear" />
<img src="imagen.jpg" alt="" />
Imágenes decorativas
Las imágenes decorativas no llevan texto alternativo ya sea porque se las considera irrelevantes o redundantes.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1074608/images/8456695/pasted-from-clipboard.png)
Alt vacío
3
Links vacíos
4
Botones vacíos
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1074608/images/8457393/pasted-from-clipboard.png)
Usar etiquetas de texto significativas
HTML semántico
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1074608/images/8456713/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1074608/images/8456719/pasted-from-clipboard.png)
❌ <div onclick="...">Leer más<div/>
❌ <span onclick="...">Ver detalle<div/>
<a href="...">this CodeSandbox<a/>
<button onclick="...">Crear cuenta<button/>
<button class="btn">
<button> button
</button>
buttonButton.addEventListener('click', logClick);
<div class="btn" tabindex="0">
<div> button
</div>
divButton.addEventListener('click', logClick);
5
Elementos interactivos sin etiqueta label en formularios
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1074608/images/8456906/pasted-from-clipboard.png)
Material Design antes de 2017
5
Elementos interactivos sin etiqueta label en formularios
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1074608/images/8456921/0_uMBjIQ9C_7H17yqn.gif)
Material Design ahora
Librerías accesibles
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1074608/images/8456756/pasted-from-clipboard.png)
Chakra UI
Bootstrap 4 +
Reach UI
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1074608/images/8456783/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1074608/images/8457351/pasted-from-clipboard.png)
Reactstrap
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1074608/images/8456771/pasted-from-clipboard.png)
<label for="firstName" class="sr-only">Nombre</label>
<input name="firstName" placeholder="Nombre" required="" type="text" class="form-control" value="">
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
5
Documento sin atributo de lenguaje
<html lang="es">
<head>...</head/>
<body>
<!-- Contenido en español -->
<section lang="en">
<!-- Contenido en inglés -->
</section>
</body>
</html>
Otros aspectos a tener en cuenta
Foco
⚠ /* Don't, unless custom styles are present */
* {
outline: none;
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1074608/images/8457055/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1074608/images/8457058/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1074608/images/8457060/pasted-from-clipboard.png)
El foco beneficia a todas las personas que navegan con el teclado.
Siempre diferenciar el estado de foco y respetar el orden natural de lectura.
Headings
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1074608/images/8457073/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1074608/images/8457075/pasted-from-clipboard.png)
Skip to content
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1074608/images/8457088/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1074608/images/8457090/pasted-from-clipboard.png)
Testing de accesibilidad
Testing automático
aXe
Pa11y
Firefox Dev Tools
Chrome Dev Tools
stylelint-a11y
Wave
VisBug
Wave browser extension
Contrast for UI app
ColorBox
Storybook a11y addon
Testing manual
Navegación por teclado
Apagar JavaScript/CSS
Zoom/Responsive
Lector de pantalla
Foco
Enlaces
Botones
Visualizo contenido
Preferencia del usuario de tamaño de fuente
Enuncia correctamente el contenido
Fin
@alenanik11
@pipimarquez
@servicedesignclub
@dalatcomunidad
Microsoft Docs
web.dev
w3.org
Google Developers
MDN
Smashing Magazine
CSS Tricks
"Accesibilidad Web. WCAG 2.1 de forma sencilla" Olga Revilla, Olga Carreras, 2018
Ilustraciones: Open Peeps
Accesibilidad web | Devtalk
By Lucas Maidana
Accesibilidad web | Devtalk
- 699