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)

https://www.w3.org/TR/WCAG21/

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

https://accessibe.com/blog/knowledgebase/we-analyzed-10000000-pages-and-heres-where-most-fail-with-ada-and-wcag-21-compliance

WebAIM Millon (2020)

El 98.1% de los sitios analizados mostraron problemas de Accesibilidad

https://webaim.org/projects/million/

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

Made with Slides.com