Accessibility
134 bites tagged Accessibility — interview questions with model answers, and 60-second explainers.
Semantic HTML: Structure as Accessibility Infrastructure
Semantic HTML assigns real roles to page elements so screen readers can navigate them. Use buttons for actions, headings for outline, and tables for data. The footgun is using divs with click handlers as buttons; they are invisible to keyboard and screen…
Motion Tokens Turn Timing into a System
Motion tokens standardize animation like color tokens standardize palettes. A team can retime an entire product from one file. The footgun is naming tokens after CSS curves instead of intent, locking implementation details into your design language.
How should you adapt animations for prefers-reduced-motion?
Scope motion to no-preference, swap scaling for opacity or instant cuts, keep functional changes visible. Vestibular accessibility and media ergonomics. Ignoring the setting or using JS instead of CSS media features.
Create a staggered list fade-in using only CSS
Tests CSS animation orchestration via keyframes and delay strategies. Great answers use :nth-child or --index variables for scalable staggering, set fill-mode forwards, and honor prefers-reduced-motion.
Explain advantages of rem and em over px in responsive design
This tests cascading font scaling and accessibility. Strong answers mention user zoom, root-level rem control, component em scaling, and avoiding px fragmentation. Red flag: claiming px handles all user preferences automatically.
Explain em, rem, px and why rem is preferred for font sizing
This tests CSS unit semantics and accessibility. px is absolute; em compounds against its parent; rem is root-relative and predictable. rem respects user browser font settings without nesting issues.
Set paragraph text blue and background light grey, compare HEX, RGB, HSL
Set color and background-color; HEX is compact, RGB is explicit, HSL is intuitive for lightness/hue. CSS color syntax and tradeoffs between HEX, RGB, and HSL. Claiming HEX lacks transparency or equating RGB and HSL.
How would you enforce WCAG 2.1 AA compliance across CI/CD?
Layer axe-core in unit tests, Playwright Axe in CI, visual regression for focus states, and gate deploys on severity. Layered a11y automation across build and deploy. One post-build audit, not distributed checks.
Accessibility pitfalls in SPAs and programmatic fixes
Cover route-change focus reset, ARIA live regions, semantic landmarks in dynamic markup, and keyboard trap prevention. SPAs lose native page-load cues, breaking screen reader context.
What HTML attributes and elements make a banner accessible to screen readers?
This tests semantic HTML for decorative and informative images. A strong answer names img alt, heading levels, and a landmark region such as aside with aria-label. A red flag is relying on CSS or divs without text alternatives.
Figma Accessibility Annotations: Spec for Developers
Accessibility annotations embed a11y specs directly into your Figma file, translating visual design into build instructions. They're used during handoff to specify screen reader order and roles. The footgun is inconsistency; use a plugin or a system.
Designing for Reduced Motion
Treat UI animations as an enhancement some users must disable for comfort. The `prefers-reduced-motion` media query lets you respect system-level accessibility settings, preventing vestibular triggers.
Screen Readers: Designing for a Non-Visual UI
A screen reader navigates your UI's invisible DOM structure, not its visual layout. Think of it as a text adventure where headings are rooms and links are doors. This is essential for all web UIs, checked via alt text and keyboard focus.
Touch Target Size: Bigger is Better, Spacing is Key
A button's clickable area is more than its visible pixels; it includes the space to avoid fat-fingering neighbors. WCAG requires targets to be at least 24x24 CSS pixels for users with motor impairments.
Accessible Form Design: A Conversation, Not an Interrogation
Think of a form not as a data bucket, but a structured conversation. Every field is a question needing a clear prompt. This is vital for logins and checkouts, especially for users with screen readers. The footgun: using placeholder text as a label.
Semantic HTML: Use the Right Element for the Job
Think of HTML tags as pre-built components, not just style containers. Using `<button>` instead of a styled `<div>` gives you keyboard navigation and screen reader support for free. The biggest mistake is using generic `<div>`s for interactive elements.
Focus Order: The Keyboard's Path Through Your UI
Focus order is the path a user takes through your UI using only a keyboard. It's crucial for accessibility, letting users navigate forms and menus without a mouse.
Alt Text: Giving Images a Voice for Everyone
Alt text gives an image a voice when it can't be seen. It's read by screen readers for accessibility and displayed if an image breaks. The footgun is writing "image of..." or leaving it blank; instead, describe the image's content and purpose.
POUR: The Four Pillars of Web Accessibility
POUR is a mental model for web accessibility. It asks: can users Perceive content, Operate the interface, Understand the information, and use it with Robust tools? It applies to all UI design.
WCAG Color Contrast: A Readability Score, Not an Opinion
WCAG color contrast is a mathematical ratio ensuring text is readable for people with vision impairments. Use it for all text and UI elements. The footgun is only testing on a good monitor or forgetting that large text has a lower 3:1 requirement.
UI Typography for Readability
Good typography isn't about fancy fonts; it's about making content effortless to read by controlling size, spacing, and alignment. It's crucial for body copy, headings, and labels. The footgun is using justified text or lines over 90 characters long.
Color Theory: Harmony, Contrast, and Meaning in UI
Color theory is a system for using contrast, harmony, and symbolism to guide user experience. It's applied in UI to create visual hierarchy, evoke brand emotions, and ensure readability.
PixelRatio: Bridge Layout Units to Physical Pixels
PixelRatio is your app's translator, converting abstract layout units into physical pixels and respecting the user's chosen font size. Use it to fetch correct image sizes and make fonts accessible. Ignoring `getFontScale()` creates a fixed, inaccessible UI.
Shift-Left Accessibility: Build It In, Don't Bolt It On
Shift-left accessibility treats accessibility as a core feature, not a last-minute fix. It integrates checks throughout the development lifecycle, from design to deployment, preventing costly rework. The footgun is treating it as just an earlier QA step.
Get Accessibility bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.