HTML
Cómo obtienen los controles y regiones su nombre y descripción accesible a partir de texto visible, labels y relaciones ARIA.
El identifica un elemento; la aporta información complementaria.
<label for="email">Correo</label>
<input
id="email"
type="email"
aria-describedby="email-help"
>
<p id="email-help">Usa tu correo principal.</p>nombre → Correo
descripción → Usa tu correo principalSegún el elemento, puede provenir de:
label.alt.aria-labelledby.aria-label.value en ciertos inputs.title como fallback en algunos casos.No todas las fuentes tienen la misma prioridad. Una fuente puede reemplazar otra, no simplemente sumarse.
<button type="button">Guardar cambios</button>El contenido nombra el button. Es visible, traducible y coincide con control por voz.
<label for="name">Nombre completo</label>
<input id="name" name="name">Es la fuente preferida para controles labelable.
<a href="/">
<img src="logo.svg" alt="Nicolás Garzón — Inicio">
</a>El alt participa en el nombre del link porque la imagen es su contenido.
<h2 id="dialog-title">Eliminar proyecto</h2>
<div role="dialog" aria-labelledby="dialog-title">...</div>Reutiliza texto visible. Puede concatenar varios IDs en orden.
Peligroso:
aria-labelledby="missing-id"Una referencia rota puede dejar el elemento sin nombre.
<button type="button" aria-label="Cerrar">
<svg aria-hidden="true">...</svg>
</button>Se utiliza cuando no hay texto visible suficiente.
Puede sobrescribir contenido visible:
<button aria-label="Eliminar">Guardar</button>El usuario ve “Guardar” pero la tecnología anuncia “Eliminar”. Evita esa contradicción.
No todos los roles toman nombre desde sus descendientes de la misma manera. Un texto dentro de un control nativo suele funcionar; un contenedor genérico con role puede necesitar una fuente explícita según el patrón.
No supongas: inspecciona el accessibility tree.
<button aria-describedby="delete-warning">
Eliminar
</button>
<p id="delete-warning">Esta acción no se puede deshacer.</p>La descripción añade contexto, pero el botón sigue llamándose “Eliminar”.
<button
aria-label="Copiar enlace"
aria-description="Copia la URL del proyecto al portapapeles"
>
...
</button>Puede aportar una descripción directa, pero el texto visible mediante aria-describedby suele ser más útil para todos. Verifica soporte objetivo.
<button title="Cerrar">×</button>No es una solución robusta de nombre:
Usa texto, aria-label o aria-labelledby según el caso.
<button aria-label="Guardar">Guardar</button>No suele romper, pero repite información innecesariamente y crea otra fuente que puede desactualizarse.
<button type="button">
<svg aria-hidden="true">...</svg>
Descargar CV
</button>El icono es decorativo porque el texto ya nombra la acción.
En una lista:
<button aria-label="Eliminar DomiSys">Eliminar</button>
<button aria-label="Eliminar SpendControl">Eliminar</button>Los controles deben distinguirse al navegar fuera de contexto.
Otra opción es texto visual más explícito o una relación contextual bien soportada.
<a href="/project/domisys">Ver proyecto DomiSys</a>Es más distinguible que varios “Ver más”. El texto puede ser visualmente adaptado sin esconder la información esencial.
<nav aria-label="Principal">...</nav>
<nav aria-label="Proyectos">...</nav>No incluyas el rol en el nombre:
aria-label="Navegación principal"puede anunciarse como “Navegación principal, navegación”. “Principal” suele bastar.
No conviertas un párrafo completo en aria-label. Los nombres deben ser concisos. Usa contenido visible, aria-describedby, details o ayuda contextual.
Contenido con hidden o display:none puede seguir utilizándose en ciertas referencias de nombre bajo reglas específicas, pero no dependas de comportamientos complejos sin pruebas.
Un texto visualmente oculto mediante una técnica accesible suele ser más predecible.
<article aria-labelledby="domisys-title">
<h2 id="domisys-title">DomiSys</h2>
<p id="domisys-description">
Sistema de gestión para centralizar inventario y pedidos.
</p>
<a
href="/portfolio/domisys"
aria-describedby="domisys-description"
>
Ver proyecto
</a>
</article>El link se llama “Ver proyecto” y recibe contexto descriptivo. Verifica que la experiencia no sea demasiado repetitiva.
¿Por qué aria-label="Confirmar" en un botón cuyo texto visible es “Eliminar cuenta” puede perjudicar el uso por voz?
Porque el usuario intenta decir el texto que ve, pero el nombre accesible no contiene “Eliminar cuenta”, creando una discrepancia entre interfaz visual y comando reconocido.
Foco, tabindex, hidden e inert organiza navegación por teclado y disponibilidad de contenido.