Accesibilidad con JavaScript
La accesibilidad en JavaScript significa que el control del pedido funciona con el teclado y que un cambio de estado se anuncia. Esta página usa un botón real. Un click pone la línea visible en tea / regular.
No es la página de errores
La página anterior lanzó missing size. Su línea decía caught / missing size. Esta página no usa throw. El control sigue en la página y el resultado se escribe donde se puede ver.
Usa un botón
<button type="button"> ejecuta su listener de click con un clic del ratón, con Enter y con Space. Un div que solo escucha click ignora el teclado. El texto del botón es el nombre que se oye.
const button = document.querySelector("button");
const line = document.querySelector("#line");
button.addEventListener("click", () => {
line.textContent = "tea / regular";
});
La línea pasa a ser tea / regular. Enter y Space ejecutan ese mismo listener.
Anuncia la línea nueva
textContent actualiza la pantalla. Un lector de pantalla puede perderse un cambio silencioso. aria-live="polite" pide que diga el texto nuevo después de la frase actual.
<p id="line" aria-live="polite">…</p>
El cambio se anuncia y no corta la frase actual. assertive interrumpe. Esta página usa polite.
Sin size se desactiva el botón
El pedido es { drink: "tea" } y falta size. Pon button.disabled en true. El botón sigue visible. El listener de click no se ejecuta.
const order = { drink: "tea" };
const button = document.querySelector("button");
if (!order.size) {
button.disabled = true;
}
El botón sigue en la página y no hace el pedido. No quites el elemento.
Deja el foco en el botón
Quien activó el botón ya está ahí. Escribe la línea y luego llama a button.focus(). No llames a line.focus() y no ocultes el contorno.
const button = document.querySelector("button");
const line = document.querySelector("#line");
button.addEventListener("click", () => {
line.textContent = "tea / regular";
button.focus();
});
El foco se queda en el botón. La línea no necesita tabindex. El contorno sigue visible.
Cuatro hábitos
Cada fila es una decisión para este control del pedido.
📊 Control de pedido accesible
| Hábito | Usar | Evitar |
|---|---|---|
| Acción | button con type="button" |
un div que solo escucha click |
| Estado | aria-live="polite" en la línea |
un cambio de texto en silencio |
| No disponible | button.disabled = true |
quitar el botón |
| Foco | button.focus() y un contorno visible |
line.focus() o outline: none |
Un botón toma la acción. La línea en vivo dice el resultado. disabled conserva un control que no puede ejecutarse. El contorno muestra dónde está el foco.
La línea de la página
La página une un botón con la línea en vivo. No se lanza nada.
<!DOCTYPE html>
<html>
<body>
<button id="order" type="button">Place order</button>
<p id="line" aria-live="polite">…</p>
<script>
const button = document.getElementById("order");
const line = document.getElementById("line");
button.addEventListener("click", () => {
line.textContent = "tea / regular";
button.focus();
});
</script>
</body>
</html>
Tras el click, la línea dice tea / regular. Enter y Space hacen lo mismo. caught / missing size pertenecía a la página de errores.
En el mostrador
- Haz clic en el botón. La línea dice tea / regular.
- Pulsa Enter en el mismo botón. El listener se ejecuta otra vez.
- Pon aria-live="polite" en la línea para que se anuncie el texto nuevo.
- Sin size, pon button.disabled en true. El botón permanece y click no se ejecuta.
- Tras un click correcto, llama a button.focus(). No llames a line.focus().
Fallos habituales
Un click en un div no es un control de teclado. disabled no es lo mismo que borrar el botón.
- Usar un
divpara la acción del pedido - Actualizar la línea y olvidar
aria-live - Quitar el botón cuando falta
size - Llamar a
line.focus()tras un pedido correcto - Ocultar el contorno del foco
- Leer la línea como caught / missing size
Quédate con esto
- Un
buttonejecuta el pedido con el ratón, Enter y Space aria-live="polite"anunciatea / regularsin interrumpir- Sin
size,button.disabledpasa atruey el botón sigue en la página - El foco se queda en el botón
- La línea de la página es tea / regular
🧠 Pon a Prueba tu Conocimiento
Pon a Prueba tu Conocimiento
Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema
📝 Instrucciones
- Lee cada pregunta cuidadosamente
- Selecciona la mejor respuesta para cada pregunta
- Puedes repetir el quiz tantas veces como quieras
- Tu progreso se mostrará en la parte superior