Accesibilidad Web: Diseñar Para Todos (Y Vender Más)

El Caso De Negocio (No Es Caridad)

Una inmobiliaria en Recoleta no consideraba accesibilidad. "Es para gente con discapacidad. Nuestros clientes no tienen eso."

Error.

Cuando implementó accesibilidad:

• Botones más grandes: Usuarios con visión baja (20%) compraron más
• Contraste mejorado: Usuarios over 65 (gran % de su mercado) usaban más el sitio
• Navegación por teclado: Power users (que no usan mouse) exploraban más

Resultado en 3 meses: +18% en conversión total.

Accesibilidad no es caridad. Es negocio.

WCAG 2.1: El Estándar

WCAG = Web Content Accessibility Guidelines. Es el estándar internacional.

Tres niveles:

• A: Básico (deberías hacerlo)
• AA: Estándar (deberías hacer esto)
• AAA: Avanzado (perfeccionista)

99% de sitios apuntan a AA. Es balance entre esfuerzo y utilidad.

Las 5 Barreras Más Comunes (Y Cómo Arreglarlas)

1. Contraste Bajo

Problema: Texto gris sobre fondo gris. Se ve "soft" pero es ilegible.

Solución: Contraste mínimo 4.5:1.

Verificación: https://webaim.org/resources/contrastchecker/

Ejemplo malo: #888 (gris) en #FFF (blanco) = contraste 3.5:1. No pasa.

Ejemplo bueno: #333 (gris oscuro) en #FFF (blanco) = contraste 12.6:1. Perfecto.

2. Imágenes Sin Alt Text

Problema: Imagen sin descripción. Un usuario ciego no sabe qué es.

Solución:

<!-- MAL -->
<img src="office.jpg">

<!-- BIEN -->
<img src="office.jpg" alt="Oficina de Beersech en San Isidro">

Regla: Alt text como si describieras la imagen a alguien por teléfono.

Plus: Google index el alt text. Mejor SEO.

3. Formularios Sin Labels

Problema: Input flotante. Usuario no sabe qué poner.

Solución:

<!-- MAL -->
<input type="email" placeholder="Email">

<!-- BIEN -->
<label for="email">Tu email</label>
<input id="email" type="email" placeholder="ejemplo@mail.com">

Por qué: Screen readers leen label + input. Sin label = usuario pierde.

4. Navegación Por Teclado Imposible

Problema: Sitio diseñado solo para mouse. Tabs no funciona.

Solución: Tab order lógico (de arriba a abajo, izquierda a derecha).

<!-- Orden importante -->
<input tabindex="0"> <!-- 1º -->
<button tabindex="1"> <!-- 2º -->
<a href="..." tabindex="2"> <!-- 3º -->

Verificación: Abre cualquier página. Tab 100 veces. ¿Puedo navegar todo sin mouse?

5. Videos Sin Subtítulos

Problema: Video importante sin subtítulos. Usuario sordo no entiende.

Solución: Agregar subtítulos (SRT format).

00:00:00,000 --> 00:00:05,000
Accesibilidad es inclusión

00:00:05,000 --> 00:00:10,000
Y también es buen negocio

Plus: YouTube auto-genera pero son malísimos. Siempre agrega manuales.

Checklist De Accesibilidad (Rápido)

• [ ] Contraste texto/background >= 4.5:1
• [ ] Todas las imágenes tienen alt text descriptivo
• [ ] Todos los inputs tienen labels (no solo placeholder)
• [ ] Navegación por teclado funciona (Tab)
• [ ] Colores no son la única forma de comunicar (ej: "click el botón rojo" = malo)
• [ ] Videos tienen subtítulos
• [ ] Headings en orden (h1, h2, h3, no h1 → h3)
• [ ] Focus visible (cuando hace Tab, se ve qué está seleccionado)
• [ ] Botones tienen tamaño >= 44x44px
• [ ] Tiempo suficiente para interactuar (no autoplay que desaparece en 3s)

Herramientas Para Medir

axe DevTools (Chrome)

Extensión gratis. Click y te dice exactamente qué es inaccesible.

WAVE (WebAIM)

https://wave.webaim.org/

Entra URL. Te muestra errores visualmente.

Lighthouse (Chrome DevTools)

F12 → Lighthouse → Analizar.

Accessibility score + lista de issues.

Caso Real: Startup Fintech Argentina

Antes: Sitio sin accesibilidad. Accessibility score: 42/100.

Problemas encontrados:

• Botones muy chiquitos (30x30px)
• Contraste bajo (gris claro en blanco)
• Inputs sin labels
• Colores indistinguibles para colorblind

Después de arreglar:

• Botones 44x44px
• Contraste 7:1
• Labels agregados
• Usar shapes + colores para diferenciar

Cambios:

• Accessibility score: 42 → 92
• Usuarios "30+ años" (que ven peor): +25% engagement
• Colorblind users: +18% completión de signup
• Keyboard-only users: +12% conversión

Errores Comunes

Error 1: "No tengo usuarios con discapacidad"

Incorrecto. 15% de población tiene alguna. Pero además:

• 20% tiene baja visión (no ciega, pero ve mal)
• 30% tiene daltonismo (problemas color)
• 25% usa sitios en ambiental luminoso (baja visibilidad)

Mucha más gente que crees.

Error 2: Accesibilidad = lentitud o fealdad

Falso. Accesibilidad es diseño inteligente.

Botones grandes = mejor UX para todos. Contraste alto = más legible para todos. Navegación clara = mejor para todos.

Error 3: Agregar accesibilidad "después"

Es 10x más caro. Hazlo desde el principio.

FAQ

¿Es obligatorio?

En muchos países sí (EEUU, Unión Europea). En Argentina, es recomendación.

Pero si querés evitar demandas: Sí, es prácticamente obligatorio.

¿Cuánto cuesta?

Auditoría: $1-3K. Arreglar issues: depende. Generalmente 10-40 horas.

¿WCAG AAA es obligatorio?

No. AA es estándar. AAA es "extremo."

¿Debo usar herramientas especiales?

No. HTML semántico + CSS + JavaScript normal. Sin herramientas mágicas.

Siguiente Paso: Audita Tu Accesibilidad

Entra a tu sitio. Descarga axe DevTools. Haz una auditoría rápida.

Score < 80 = mucho por hacer.

Nosotros hacemos auditorías de accesibilidad + implementación. Es inversión pequeña, retorno grande.

¿Necesitás sitio accesible?

📱 WhatsApp: +549113903722 📧 Email: beersechconsultas@gmail.com

O exploá desarrollo web profesional y auditoría SEO (que incluye accesibilidad).

---

Última actualización: Diciembre 2024 Tiempo de lectura: 9 minutos Dificultad: Intermedia