Q315- Button has visibility hidden or display none. How does accessibility work?

When a button has visibility: hidden or display: none, accessibility behavior is different, and this is a very common interview question.

---

🔍 1️⃣ display: none

button {
  display: none;
}

❌ Accessibility Behavior

• ❌ Button is removed from the DOM layout
• ❌ Screen readers cannot detect it
• ❌ Keyboard users cannot tab to it
• ❌ Treated as if it does not exist

📌 Use Case

• Completely removing UI elements
• Conditional rendering

---

🔍 2️⃣ visibility: hidden

button {
  visibility: hidden;
}

❌ Accessibility Behavior

• ❌ Button is not visible
• ❌ Not announced by screen readers
• ❌ Not focusable via keyboard
• ❌ Space is still reserved in layout

📌 Use Case

• Temporarily hiding UI without shifting layout

---

🆚 Key Difference (Accessibility View)

Property	Visible	Screen Reader	Keyboard Focus	Layout Space
display: none	❌	❌	❌	❌
visibility: hidden	❌	❌	❌	✅

---

⚠️ Important Accessibility Rule

If an element is not visible, it should usually not be accessible.

So both properties correctly remove the button from accessibility tools.

---

✅ How to Hide Visually but Keep Accessible

If you want the button to be available to screen readers but not visible, use visually hidden CSS:

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

<button class="visually-hidden">Submit</button>

✔ Screen readers can read it
✔ Keyboard users can reach it
✔ Not visible on screen

---

🎯 Short Interview Answer

Both display: none and visibility: hidden remove the element from screen readers and keyboard navigation.
display: none also removes it from layout, while visibility: hidden keeps its space.
To hide visually but keep accessibility, use a visually-hidden technique instead.

---

⭐ One-line summary

Hidden UI is also hidden from assistive technologies—unless you intentionally preserve accessibility.