Top 30 Accessibility Interview Questions and Answers
30 multiple-choice questions on Accessibility, drawn from 30 bites out of the 134 tagged Accessibility on Tezvyn. Answer them here or read straight down. Every question carries the correct option, why it is correct, and a link to the bite it came from.
30 questions. Pick an answer, or open “Show the answer” to read it.
Answers are graded in your browser. Nothing is saved, and no XP or streak is earned here. The app keeps score.
Question 1 of 30
What is the primary benefit of using createUseFetch over ad-hoc useFetch wrappers?
Show the answer
Answer: c · It lets you bake baseURL, interceptors, and server flags into reusable, fully typed composables that remain SSR-compatible.
createUseFetch is designed to cut API boilerplate by embedding baseURL, interceptors, and server flags into reusable, fully typed composables that remain SSR-safe. Distractor B describes the Vue Router v5 upgrade's impact on dev-server performance, not fetch factories.
Read the full bite: Nuxt 4.4 Adds Custom Fetch Factories and Router v5
Question 2 of 30
According to the article, how does introducing the eight personas during design critiques apply Nielsen's sixth heuristic to creators?
Show the answer
Answer: b · It embeds recognition cues into the workflow so designers spot exclusion without memorizing WCAG rules
The article explicitly reframes Nielsen's sixth heuristic for creators, using personas as recognition cues during critiques rather than expecting designers to memorize vast accessibility rules. B is tempting because the card discusses shifting away from WCAG memorization, but wrong because the goal is recognition during workflow, not substituting one memorization task for another.
Read the full bite: 8 Free Personas Spot Accessibility Issues in Design
Question 3 of 30
Why is Angular v22's stabilization of Signal Forms, Angular Aria, and Asynchronous Reactivity APIs considered more significant than a routine version bump for large teams?
Show the answer
Answer: a · It provides production-ready primitives that reduce custom accessibility work and create clear migration targets away from legacy reactive forms
Stabilization means these APIs are now maintained long-term and safe to adopt, giving teams a clear path away from legacy reactive forms while reducing custom accessibility boilerplate. Distractor B is tempting because stable APIs imply safety, but the card emphasizes future maintenance and reduced risk, not that every preview API remained unchanged.
Read the full bite: Angular v22 stabilizes Signal Forms, Aria, Asynchronous Reactivity APIs
Question 4 of 30
In which scenario would color theory be less suitable than color science?
Show the answer
Answer: a · Specifying exact color values for consistent product manufacturing.
Color theory guides aesthetic and psychological choices in design, like brand identity and user interaction. However, for objective precision in physical color reproduction, such as manufacturing, color science with its measurement-based rules is required.
Read the full bite: Color Theory: Harmony, Contrast, and Meaning in UI
Question 5 of 30
Which combination of practices is most crucial for optimizing the readability of body text in a user interface?
Show the answer
Answer: b · Left-aligning text and maintaining line lengths between 45 and 90 characters.
The card emphasizes left-alignment for a consistent starting point and line lengths between 45 and 90 characters to prevent eye strain. Justified text (Option D) is explicitly discouraged on the web due to poor browser rendering.
Question 6 of 30
Which factor does the concept of affordance prioritize when selecting a native button over a styled div?
Show the answer
Answer: b · Built-in keyboard support, focus handling, and screen reader semantics
Affordance centers on the built-in behavioral contracts of native elements, such as keyboard activation and screen reader announcements, rather than just appearance. Option D is tempting because developers often assume role='button' is sufficient, but that ignores the manual keyboard and focus management a div still requires.
Read the full bite: How does affordance guide choosing a native button over a styled div?
Question 7 of 30
When styling a news article, how should line-height and letter-spacing differ between body text and headings?
Show the answer
Answer: b · Give body text at least 1.5 line-height with minimal letter-spacing, and use tighter line-height with slight negative letter-spacing for headings.
Body text needs generous vertical rhythm (at least 1.5x) and minimal letter-spacing for comfortable reading, while headings can tolerate tighter values because they are scanned quickly. Option D is a tempting red flag because treating both elements identically confuses vertical rhythm with horizontal spacing and harms readability.
Question 8 of 30
When creating lighter and darker shades of a single brand color, why is HSL typically preferred over HEX?
Show the answer
Answer: a · HSL separates lightness from hue, allowing you to adjust shade with one value.
HSL keeps hue and saturation separate from lightness, so you can darken or lighten a color by adjusting a single percentage. Option D is a common misconception—modern HEX supports transparency in eight-digit notation, and D ignores that HSL reorganizes color data to make lightness adjustments intuitive.
Read the full bite: Set paragraph text blue and background light grey, compare HEX, RGB, HSL
Question 9 of 30
You calculate a 4.499:1 contrast ratio for normal-sized body text. Which action best follows WCAG 2.1 rules and collaborative design practice?
Show the answer
Answer: d · Flag the failure since WCAG thresholds are strict, then propose a darker tint that preserves the original hue.
WCAG 2.1 treats 4.5:1 as a strict threshold with no rounding, so 4.499:1 fails; the best practice is to preserve the designer's intent by darkening the tint while keeping hue rather than defaulting to pure black. Option B is a tempting distractor because the value is close, but rounding up is explicitly non-compliant.
Read the full bite: Assess WCAG AA contrast for light grey text on off-white
Question 10 of 30
Why should typography tokens bundle font-size with properties like line-height, letter-spacing, and weight?
Show the answer
Answer: d · It creates complete, platform-agnostic presets that prevent inaccessible, cramped text
The card explains that composite tokens bundle size, leading, tracking, and weight into platform-agnostic presets because a scale is unusable if text collides or weights clash. Option C describes the role of the base size and ratio token, not the purpose of bundling properties into composites.
Read the full bite: Implement a typographic scale using design tokens and accessible properties
Question 11 of 30
Which of the following text elements is generally exempt from the WCAG 4.5:1 contrast requirement?
Show the answer
Answer: d · A button label that is currently disabled
The card states that "incidental text, such as text on a disabled button," is exempt from the contrast requirement. Navigation links, body text, and normal-sized headlines (like 16px bold, which is not considered 'large text') are all intended to convey information and thus require a 4.5:1 contrast ratio.
Read the full bite: WCAG Color Contrast: The 4.5:1 Rule for Readability
Question 12 of 30
What makes rem more predictable than em when sizing text in nested components?
Show the answer
Answer: a · rem references the root font size and avoids parent-level compounding
rem is always calculated from the root font-size, preventing nested elements from multiplying their size as em does. Distractor D is tempting but wrong because em references its direct parent, not the root, leading to unpredictable compounding in nested trees.
Read the full bite: Explain em, rem, px and why rem is preferred for font sizing
Question 13 of 30
Under WCAG AA guidelines, in which scenario is a 3:1 color contrast ratio considered sufficient?
Show the answer
Answer: a · For large-scale text or critical graphical components like icons.
The card states that large text (18pt+ or 14pt bold+) and important graphics (like icons and input borders) require a 3:1 ratio under WCAG AA. Text within a logo or brand name is explicitly exempt from contrast requirements, not subject to a 3:1 ratio.
Read the full bite: WCAG Color Contrast: A Readability Score, Not an Opinion
Question 14 of 30
Which set of roles and attributes correctly wires a tab to its panel per the W3C pattern?
Show the answer
Answer: a · tab has aria-controls pointing to the panel id; tabpanel has aria-labelledby pointing to the tab id
The W3C pattern requires aria-controls on the tab to reference its panel and aria-labelledby on the panel to reference its tab, establishing a bidirectional programmatic link. Option B reverses these attributes, which is a common mistake that severs the intended relationship and confuses assistive technologies.
Read the full bite: What WAI-ARIA attributes and keyboard interactions make Tabs accessible?
Question 15 of 30
Which combination of values is the minimum required to define a single text-shadow?
Show the answer
Answer: b · x-offset and y-offset
The card explicitly states that 'Each shadow is defined by at least two required length values: offset-x and offset-y.' While blur-radius and color are frequently used, they are optional parameters.
Read the full bite: CSS text-shadow: Adding Depth and Legibility to Text
Question 16 of 30
What most distinguishes a headless Combobox from a merely unstyled one?
Show the answer
Answer: b · The headless version renders no markup, exposing state and prop-getters for the consumer to build the UI
Headless means it owns behavior, state, and accessibility while rendering no UI, so the consumer supplies all markup. Unstyled components still dictate DOM; headless deliberately avoids that and never skips accessibility.
Read the full bite: Headless components and a headless Combobox
Question 17 of 30
Which scenario most appropriately demonstrates the use of WAI-ARIA?
Show the answer
Answer: b · Implementing role="tab" and aria-selected on <div> elements styled to function as a tab in a custom tabbed interface.
WAI-ARIA is designed for custom interactive components that lack native HTML equivalents, like a tabbed interface built from generic <div>s. Options A, B, and D violate the first rule of ARIA use: if a native element exists for your purpose (e.g., <button>, alt attribute, <h1>-<h6>), use it instead of ARIA.
Read the full bite: WAI-ARIA: A Script for Custom UI Accessibility
Question 18 of 30
When is a render prop preferable to the children prop for passing content into a Modal?
Show the answer
Answer: c · When the content needs access to modal-provided state, like a close function
A render prop can hand modal state such as close to the content, which is useful for self-closing forms. For static content, the simpler children prop is preferred.
Read the full bite: Designing a Modal with controlled open state
Question 19 of 30
According to the card, what is the primary purpose of a modal dialog's "focus trap"?
Show the answer
Answer: d · To ensure that keyboard navigation (Tab, Shift+Tab) cycles only through elements within the modal.
The card explicitly states that a "focus trap" means "all keyboard interactions, like Tab and Shift + Tab, are confined within its boundaries." While other options describe aspects of modal behavior, the focus trap specifically manages keyboard navigation. Preventing clicks outside the modal is a general modal characteristic, not the specific function of the 'focus trap' pattern.
Question 20 of 30
When designing a globally scalable, accessible video platform, which item is an architecturally significant non-functional requirement that must shape the initial system design?
Show the answer
Answer: b · Defining latency targets and data residency rules before choosing infrastructure
Latency targets and data residency rules are architecturally significant NFRs that must drive infrastructure choices from day one. Planning to go multi-region only after the MVP is a common mistake that treats scalability as an expensive afterthought.
Read the full bite: What NFRs would you identify for a globally scalable, accessible service?
Question 21 of 30
When a user increases their browser's default font size without zooming, why do rem and em outperform px?
Show the answer
Answer: b · rem and em scale with font metrics, so text and spacing adjust automatically, while px remains fixed.
rem and em are relative to font metrics, so they adjust when a user changes their browser default font size, whereas px is absolute and does not. Option A is tempting because it uses the right vocabulary but incorrectly swaps rem and em, which is a common misconception the card explicitly warns against.
Read the full bite: Explain advantages of rem and em over px in responsive design
Question 22 of 30
According to the card, what is the primary role of accessibility documentation for a reusable UI component?
Show the answer
Answer: c · To guide component consumers on how to provide necessary context and props to preserve accessibility.
The card emphasizes that accessibility documentation bridges the gap between component authors and consumers by clarifying the consumer's responsibility to provide necessary props and context. Option A describes a secondary benefit, but not the primary role of ensuring correct usage by consumers.
Read the full bite: Writing Accessibility Docs for Your Components
Question 23 of 30
For a staggered CSS fade-in where the number of list items is determined at runtime, which approach best scales the delay calculation without JavaScript?
Show the answer
Answer: d · Apply an inline --index custom property and use calc() for animation-delay
An inline --index with calc() lets the browser derive delays for any number of items declaratively. B is a workable fallback but cannot handle an arbitrary runtime count, while A is unmaintainable and D incorrectly uses transitions that require a state change trigger.
Read the full bite: Create a staggered list fade-in using only CSS
Question 24 of 30
What must be added to a red-versus-green status indicator to satisfy WCAG 1.4.1 for colorblind users?
Show the answer
Answer: b · Distinct icons or shapes plus visible text labels alongside the colors
WCAG 1.4.1 requires a redundant visual channel, so pairing colors with distinct icons and visible text ensures colorblind users can perceive the status without relying on hue. Increasing contrast alone is insufficient because users with deuteranopia or protanopia may still see the two states as indistinguishable tones.
Read the full bite: What is the accessibility problem with color-only status and two fixes?
Question 25 of 30
What primary problem did the viewport meta tag solve for early mobile browsers?
Show the answer
Answer: c · It prevented mobile browsers from automatically scaling down desktop-sized pages, making text unreadable.
The card explains that early mobile browsers would render pages at a default desktop width and then shrink them, leading to unreadably tiny text. The viewport meta tag was created to override this behavior by setting the page width to the device's width. Disabling user zoom (option B) is explicitly mentioned as a critical accessibility failure and misuse, not the primary problem the tag solves.
Read the full bite: The Viewport Meta Tag: Your First Responsive Step
Question 26 of 30
A heading uses 14pt bold type. What is the minimum WCAG AA contrast ratio it must meet against its background?
Show the answer
Answer: a · 3:1, because 14pt bold meets the WCAG AA large text definition
WCAG AA defines large text as at least 14pt bold or 18pt regular, which requires a 3:1 ratio. Option D is tempting because 14pt sounds like normal text, but the bold weight qualifies it as large text, so 4.5:1 does not apply here.
Read the full bite: Minimum WCAG AA contrast for normal vs large text and Figma checks
Question 27 of 30
Which pattern best respects prefers-reduced-motion while preserving essential functional feedback?
Show the answer
Answer: a · Make decorative motion opt-in with the media feature and convert functional motion to instant state changes or static equivalents
The correct strategy scopes decorative motion inside @media (prefers-reduced-motion: no-preference) so it is opt-in, while preserving functional cues by making them instant or replacing them with static indicators. Option C is tempting because wrapping in no-preference is correct for decorative motion, but suppressing all visual changes removes essential feedback like loading states.
Read the full bite: How should you adapt animations for prefers-reduced-motion?
Question 28 of 30
What is a potential drawback of implementing a purely fluid layout without additional constraints?
Show the answer
Answer: b · Content might become unreadably wide or awkwardly cramped at extreme screen sizes.
The card states that purely fluid layouts can lead to unreadably long text lines on very wide screens or squished columns on very narrow screens. Options A and B describe problems that fluid layouts are designed to prevent, not cause.
Read the full bite: Fluid Layouts: Adapting Content to Any Screen
Question 29 of 30
After a user closes a modal dialog with the keyboard, where should focus go to meet accessibility expectations?
Show the answer
Answer: a · Back to the element that triggered the modal
Returning focus to the trigger restores the user's context where they left off. Sending focus to the page top, the body, or another modal disorients keyboard and screen reader users, violating the dialog pattern.
Read the full bite: Managing keyboard focus in an accessible Modal
Question 30 of 30
When implementing focus trapping inside a modal dialog, which keyboard behavior is required by the WAI-ARIA dialog pattern?
Show the answer
Answer: b · Tab moves forward through focusable elements and wraps from last to first, while Shift+Tab moves backward and wraps from first to last.
The pattern requires Tab to cycle forward and wrap from last to first, and Shift+Tab to cycle backward and wrap from first to last, preventing escape into the inert background. Option A represents the common mistake of letting Shift+Tab break the trap, while B leaves users stuck at the boundaries.
Read the full bite: Design the keyboard interaction flow for a modal dialog
Could you explain these out loud?
That is what an interview actually tests. Tezvyn gives you questions like these with what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.