# Accessibility Quiz

## Question 1

What does the "P" in POUR stand for?

A) Performance
B) Perceivable
C) Portable
D) Progressive

<!-- ANSWER: B -->
<!-- EXPLANATION: POUR stands for Perceivable, Operable, Understandable, Robust. Perceivable means information and UI must be presentable in ways users can perceive—e.g., text alternatives, captions, color not as the only indicator. -->

## Question 2

What is the minimum contrast ratio for normal body text at WCAG AA?

A) 3:1
B) 4.5:1
C) 7:1
D) 2:1

<!-- ANSWER: B -->
<!-- EXPLANATION: WCAG AA requires 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt+ bold). AAA requires 7:1 for normal text. 3:1 is for large text and UI components. -->

## Question 3

When should you use ARIA?

A) Always—it makes everything accessible
B) Only when native HTML doesn't provide the needed semantics or behavior
C) Never—ARIA is deprecated
D) Only for custom components

<!-- ANSWER: B -->
<!-- EXPLANATION: Use native HTML first (e.g., <button>, <label>). Add ARIA only when HTML isn't enough—e.g., for custom widgets, live regions, or complex interactions. Redundant or incorrect ARIA can hurt accessibility. -->

## Question 4

For a decorative image (e.g., a background pattern or spacer), what should the alt attribute be?

A) "Decorative image"
B) "Image"
C) Empty: alt=""
D) Omit the alt attribute entirely

<!-- ANSWER: C -->
<!-- EXPLANATION: Decorative images should have alt="" (empty string) so screen readers skip them. Omitting alt entirely can cause the filename or URL to be announced. "Decorative image" or "Image" is redundant noise. -->

## Question 5

What percentage of accessibility issues can automated tools reliably catch?

A) About 90%
B) About 50%
C) About 30%
D) Nearly 100%

<!-- ANSWER: C -->
<!-- EXPLANATION: Automated tools catch roughly 30% of accessibility issues. Many problems—keyboard traps, confusing focus order, unclear labels, cognitive overload—require manual testing with keyboard and screen readers. -->

## Question 6

Which element is best for a button that triggers an action?

A) <div role="button" tabindex="0">
B) <a href="#">Click here</a>
C) <button>Submit</button>
D) <span class="button">Submit</span>

<!-- ANSWER: C -->
<!-- EXPLANATION: <button> is native, focusable, keyboard-operable (Enter/Space), and announced correctly by screen readers. Div/span with role="button" requires manual keyboard handlers and focus management. Links are for navigation, not actions. -->

## Question 7

<!-- VISUAL: quiz-matching -->

Match each POUR principle to an example:

A) Perceivable → 1) Alt text for images, captions for video
B) Operable → 2) Keyboard accessible, no keyboard traps
C) Understandable → 3) Clear labels, consistent navigation
D) Robust → 4) Valid HTML, works across assistive technologies

<!-- ANSWER: A1,B2,C3,D4 -->
<!-- EXPLANATION: Perceivable = present info in ways users can perceive (alt text, captions). Operable = keyboard access, no traps. Understandable = clear, consistent UI. Robust = works with assistive tech. -->

## Question 8

<!-- VISUAL: quiz-matching -->

Match each WCAG conformance level to its description:

A) Level A → 1) Minimum; essential for basic accessibility
B) Level AA → 2) Enhanced; addresses major barriers; common target
C) Level AAA → 3) Highest; addresses most barriers; not required for all content

<!-- ANSWER: A1,B2,C3 -->
<!-- EXPLANATION: Level A is the minimum baseline. Level AA is the common target for most sites. Level AAA is the highest and not achievable for all content types. -->