Accessibility Engineering

Quiz: Is This Accessible?

intermediate12 min read

Think Like an Accessibility Auditor

Every question below shows you a real code pattern you will encounter in production. Your job: figure out if it is accessible, and if not, identify the specific barrier.

These are not trick questions. They are real bugs that ship to production every day, affecting millions of users who rely on assistive technology. If you get fewer than 9 out of 12, revisit the earlier accessibility lessons. If you nail all 12, you are thinking like a professional accessibility engineer.

Mental Model

Picture yourself navigating a website with your eyes closed, using only a keyboard and a screen reader that announces what it "sees" in the DOM. Every time you encounter a silent element, a trapped focus, or a meaningless announcement, that is a wall. Accessibility engineering is about tearing down those walls before your users hit them.

Key Rules
  1. 1Semantic HTML is the foundation. ARIA is a repair tool, not a replacement.
  2. 2If you can see it, a screen reader must be able to announce it. If you can click it, a keyboard must be able to activate it.
  3. 3Color alone must never be the only way to convey information.
  4. 4Every interactive element needs a visible focus indicator and a meaningful accessible name.
  5. 5aria-hidden removes content from the accessibility tree entirely. Use it with extreme caution.

Question 1: The Clickable Div

<div class="btn" onclick="submit()">
  Submit Order
</div>
Quiz
Is this submit button accessible?

Question 2: The Icon Button

<button onClick={toggleMenu}>
  <svg viewBox="0 0 24 24">
    <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" />
  </svg>
</button>
Quiz
A screen reader user clicks this button. What do they hear?

Question 3: The Color-Only Error

<label for="email">Email</label>
<input id="email" type="email" style="border-color: red;" />
Quiz
The input border turns red when validation fails. Is this accessible?

Question 4: The Decorative vs. Informative Image

<img src="/chart-q3-revenue.png" />
Quiz
This image shows a revenue chart with important data. Is it accessible?

Question 5: The Heading Hierarchy

<h1>Learn JavaScript</h1>
<h3>Variables and Types</h3>
<h3>Functions</h3>
<h5>Arrow Functions</h5>
<h3>Objects</h3>
Quiz
What is wrong with this heading structure?

Question 6: The Focus Trap Modal

function Modal({ children, onClose }) {
  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content" onClick={e => e.stopPropagation()}>
        {children}
      </div>
    </div>
  )
}
Quiz
A keyboard user opens this modal. What accessibility problem will they encounter?

Question 7: The aria-hidden Mistake

<nav aria-hidden="true">
  <a href="/home">Home</a>
  <a href="/courses">Courses</a>
  <a href="/profile">Profile</a>
</nav>
Quiz
What happens to screen reader users when this navigation has aria-hidden='true'?

Question 8: The Missing Live Region

function SearchResults({ results }) {
  return (
    <div>
      <p>{results.length} results found</p>
      {results.map(r => (
        <div key={r.id}>{r.title}</div>
      ))}
    </div>
  )
}
Quiz
A user types a search query and results update dynamically. What is the accessibility problem?

Question 9: The Fake Checkbox

<div class="checkbox" onclick="toggle(this)">
  <span class="checkmark">&#10003;</span>
  I agree to the terms
</div>
Quiz
What barriers does this custom checkbox create?

Question 10: The Auto-Playing Announcement

<div role="alert">
  Welcome to our platform! Explore our courses and start learning today.
</div>
Quiz
This welcome message has role='alert'. What is wrong?
<a href="/premium" style="opacity: 0.5; pointer-events: none;">
  Premium Content
</a>
Quiz
This link looks disabled but is it actually inaccessible?

Question 12: The Tooltip Without a Home

function InfoIcon({ tooltip }) {
  const [show, setShow] = useState(false)
  return (
    <span
      onMouseEnter={() => setShow(true)}
      onMouseLeave={() => setShow(false)}
    >
      <svg>/* info icon */</svg>
      {show && <div className="tooltip">{tooltip}</div>}
    </span>
  )
}
Quiz
This tooltip appears on hover. How many accessibility barriers does it have?

Scoring Guide

ScoreAssessment
12/12You think like a professional accessibility engineer. Ship with confidence.
9-11Strong foundation. Review the patterns you missed and test with a real screen reader.
6-8You catch the obvious issues but miss the nuanced ones. Revisit ARIA and keyboard patterns.
0-5Accessibility fundamentals need more work. Go through the module from the beginning and practice with assistive technology.
What developers doWhat they should do
Using div or span for interactive elements
Native elements provide role, keyboard support, and focus management for free. Recreating all of that with ARIA and JavaScript is error-prone and rarely complete.
Use native button, a, input, and select elements
Relying on color alone to indicate state
Color vision deficiency affects roughly 1 in 12 men. WCAG 1.4.1 requires a non-color indicator for all information conveyed visually.
Combine color with text labels, icons, or patterns
Adding aria-hidden to interactive elements
aria-hidden removes the entire subtree from assistive technology while keeping keyboard focusability, creating ghost elements that trap and confuse users.
Only use aria-hidden on decorative or duplicated content
Using role='alert' for non-urgent messages
role='alert' maps to aria-live='assertive' and interrupts the user immediately. Reserve it for errors or time-critical warnings.
Use role='status' for polite announcements
Related Topics
11/11