Correos y ARIA
Normas para listas de correo, el atributo title y el uso correcto de ARIA en componentes complejos.
Correos Electrónicos Accesibles
HTML — Lista de distribución accesible
<!-- ✓ Correcto: lista semántica -->
<ul aria-label="Lista de distribución de marketing">
<li>
<span>Ana García</span>
<a href="mailto:ana@empresa.com">
ana@empresa.com
</a>
</li>
</ul>
<!-- ✗ Incorrecto: divs sin estructura -->
<div>Ana García - ana@empresa.com</div>
CSS — Correos largos en responsive
.email-link {{
word-break: break-all;
overflow-wrap: break-word;
display: inline-block;
max-width: 100%;
}}Atributo Title y ARIA
El atributo title NO es accesible: no funciona con teclado, muchos lectores de pantalla lo ignoran y es invisible en dispositivos táctiles.
HTML — Alternativas accesibles al title
<!-- ✗ Incorrecto -->
<button title="Guardar cambios">💾</button>
<!-- ✓ Mejor: aria-label -->
<button aria-label="Guardar cambios">💾</button>
<!-- ✓ Mejor aún: texto visible -->
<button>
<span aria-hidden="true">💾</span>
Guardar cambios
</button>
<!-- ✓ Tooltip accesible -->
<button aria-describedby="save-tip">Guardar</button>
<div id="save-tip" role="tooltip" class="sr-only">
Los cambios se guardan inmediatamente.
</div>Conclusión y Recursos
La accesibilidad es un proceso continuo que beneficia a todos los usuarios.
Principios clave
- El control debe estar siempre en manos del usuario.
- Todo lo que funciona con mouse debe funcionar con teclado.
- La información no debe depender de un solo sentido.
- Cuando tenga duda, use elementos nativos HTML.
- Pruebe con lectores de pantalla y navegación por teclado.
Herramientas de prueba
| Herramienta | Plataforma | Uso |
|---|---|---|
| NVDA | Windows | Lector de pantalla gratuito |
| VoiceOver | Mac / iOS | Lector de pantalla de Apple |
| axe DevTools | Navegador | Auditoría automática WCAG |
| WAVE | Web / Extensión | Evaluación visual de accesibilidad |
| Lighthouse | Chrome DevTools | Auditoría integrada |
| PEAT | Windows | Análisis de destellos y epilepsia |
Recuerde
Revise regularmente sus sitios, manténgase actualizado con WCAG y ante cualquier duda contacte al equipo de desarrollo web de la Universidad del Valle.