HTML Accessibility Interview
Interview Q&A on inclusive HTML for keyboard users, screen readers, and better usability.
1What is web accessibility?easy
Answer: Designing content so all users, including disabled users, can perceive and operate it.
2Why is
alt text important?easyAnswer: Provides image meaning for screen reader users and fallback contexts.
3Label-input association method?easy
Answer: Use
<label for="id"> with matching input id.4Why keyboard accessibility matters?medium
Answer: Many users cannot use a mouse; all functionality must work via keyboard.
5What is ARIA used for?medium
Answer: Adds accessibility roles/states where native semantics are insufficient.
6Color-only error indication issue?medium
Answer: Not accessible for color-blind users; include text/icons too.
7Why heading order matters for accessibility?medium
Answer: Screen reader users navigate by heading levels; logical hierarchy is critical.
8What are landmarks in HTML?medium
Answer: Regions like header/nav/main/footer that improve structural navigation.
9Disabled vs hidden accessibility impact?medium
Answer: Hidden content may be removed from accessibility tree; disabled controls remain visible but non-interactive.
10Interview best-practice summary?medium
Answer: Prefer semantic HTML, accessible names, keyboard support, and clear feedback.
Tricky Q&A (10 Questions)
11Which attribute links a visible label to a custom control via id?tricky
Answer: Correct answer: for. label for=id connects label text to form controls.
12Which ARIA attribute names an element when no visible label exists?tricky
Answer: Correct answer: aria-label. aria-label provides an accessible name.
13Skip links primarily help users who:tricky
Answer: Correct answer: Navigate by keyboard/screen reader. Skip links let keyboard users bypass repetitive navigation.
14Decorative images should use:tricky
Answer: Correct answer: alt='' (empty alt). Empty alt tells assistive tech to ignore decorative images.
15Which heading pattern is best for accessibility?tricky
Answer: Correct answer: One logical h1 then nested levels. Logical heading hierarchy aids navigation.
16aria-live='polite' is used for:tricky
Answer: Correct answer: Non-urgent dynamic updates. Live regions announce updates without interrupting.
17Which element is a landmark by default?tricky
Answer: Correct answer: <main>. <main> exposes a main landmark without extra ARIA.
18Color contrast requirements mainly support:tricky
Answer: Correct answer: Users with low vision. Sufficient contrast improves readability for many users.
19tabindex='0' means:tricky
Answer: Correct answer: Focusable in natural tab order. 0 inserts element into sequential focus navigation.
20Which is NOT a reliable substitute for semantic HTML?tricky
Answer: Correct answer: ARIA roles alone. Prefer native semantics; ARIA alone is not a full replacement.