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


¿Qué es la accesibilidad?
Las discapacidades relacionadas con el acceso a la web son:
-
auditivas
-
cognitivas
-
neurológicas
-
motriz
-
del habla
-
visuales

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

Tecnologías de apoyo
Proporcionan la funcionalidad necesaria para cubrir las necesidades de los usuarios con discapacidad


Pulsador
Pantalla Braille
Magnificador

Lector de pantalla




Navegación por teclado


¿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

2
- USA. Americans with Disabilities Act (ADA)
- Europa. Acta Europea de Accesibilidad (2019)
- Argentina. Ley N° 26.653 de “Accesibilidad Web”
Legislaciones

@servicedesignclub
3
SEO


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.


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

4 Principios
13 Pautas
Niveles de conformidad
A
AA
AAA

en total

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)

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

10 millones de sitios
WebAIM Millon (2020)

El 98.1% de los sitios analizados mostraron problemas de Accesibilidad
1
Contraste


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.


✔
<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.

Alt vacío
3
Links vacíos
4
Botones vacíos

Usar etiquetas de texto significativas
HTML semántico


❌ <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

Material Design antes de 2017
5
Elementos interactivos sin etiqueta label en formularios

Material Design ahora
Librerías accesibles

Chakra UI
Bootstrap 4 +
Reach UI


Reactstrap

<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;
}



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


Skip to content


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
- 921