JavaScript Accessibility
JavaScript accessibility means the order control works from the keyboard, and a status change is announced. This page uses a real button. A click sets the visible line to tea / regular.
Not the errors page
The previous page threw missing size. Its line read caught / missing size. This page does not throw. The control stays on the page, and the result is written where people can see it.
Use a button
<button type="button"> runs its click listener for a mouse click, for Enter, and for Space. A div with only a click listener ignores the keyboard. The button text is the name people hear: Place order.
const button = document.querySelector("button");
const line = document.querySelector("#line");
button.addEventListener("click", () => {
line.textContent = "tea / regular";
});
The line becomes tea / regular. Enter and Space run that same listener.
Announce the new line
textContent updates the screen. A screen reader can miss a quiet change. aria-live="polite" asks it to speak the new text after the current sentence.
<p id="line" aria-live="polite">…</p>
The change is announced, and it does not cut off the current sentence. assertive interrupts. This page uses polite.
No size disables the button
The order is { drink: "tea" } and size is missing. Set button.disabled to true. The button stays visible. The click listener does not run.
const order = { drink: "tea" };
const button = document.querySelector("button");
if (!order.size) {
button.disabled = true;
}
The button is still in the page, and it does not place the order. Do not remove the element.
Leave focus on the button
The person who activated the button is already there. Write the line, then call button.focus(). Do not move focus to the paragraph, and do not hide the outline.
const button = document.querySelector("button");
const line = document.querySelector("#line");
button.addEventListener("click", () => {
line.textContent = "tea / regular";
button.focus();
});
Focus stays on the button. The line does not need tabindex. The outline stays visible.
Four habits
Each row is one decision for this order control.
📊 Accessible order control
| Habit | Use | Avoid |
|---|---|---|
| Action | button with type="button" |
a div that only listens for click |
| Status | aria-live="polite" on the line |
a silent text swap |
| Unavailable | button.disabled = true |
removing the button |
| Focus | button.focus() and a visible outline |
line.focus() or outline: none |
A button takes the action. The live line speaks the result. disabled keeps a control that cannot run. The outline shows where focus is.
The page line
The page wires one button to the live line. Nothing is thrown.
<!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>
After the click, the line reads tea / regular. Enter and Space do the same. caught / missing size belonged to the errors page.
At the counter
- Click the button. The line reads tea / regular.
- Press Enter on the same button. The listener runs again.
- Put aria-live="polite" on the line so the new text is announced.
- With no size, set button.disabled to true. The button stays, and click does not run.
- After a successful click, call button.focus(). Do not call line.focus().
Common misses
A div click is not a keyboard control. disabled is not the same as deleting the button.
- Using a
divfor the order action - Updating the line and forgetting
aria-live - Removing the button when
sizeis missing - Calling
line.focus()after a successful order - Hiding the focus outline
- Reading the line as caught / missing size
Keep this
- A
buttonruns the order action from mouse, Enter, and Space aria-live="polite"announcestea / regularwithout interrupting- No
sizesetsbutton.disabledtotrueand leaves the button in the page - Focus stays on the button
- The page line is tea / regular
🧠 Test Your Knowledge
Test Your Knowledge
Challenge yourself with this interactive quiz and see how well you understand the topic
📝 Instructions
- Read each question carefully
- Select the best answer for each question
- You can retake the quiz as many times as you want
- Your progress will be shown at the top