▸case-06 Third-party ad banners and dynamically loaded recommendations are injected into our news site articles asynchronously, causing Cumulative Layout Shift (CLS). The current plan is to let the container collapse to 0 height and expand whenever the ad script responds. Explain how container dimensions should be configured. | pass→pass | 13,573 | 10,838 | -20% | 1 | 1 | 0% | 2,334 | 1,747 | -25% | 0 | 0 | — |
▸case-01 We are implementing native lazy loading on our e-commerce product gallery images using `loading="lazy"` to optimize initial page load. A developer suggested omitting the `alt` attribute on lazy-loaded images until they scroll into view to save HTML payload size. Review this practice for our Web Content Accessibility Guidelines compliance strategy and specify how image text alternatives should be handled. | pass→pass | 14,654 | 15,599 | +6% | 1 | 1 | 0% | 2,401 | 2,634 | +10% | 0 | 0 | — |
▸case-02 To speed up image rendering performance, we are using lazy loading for responsive banner images. The team wants to use generic un-sized zero-pixel container placeholders until the image asset loads via JavaScript. Provide the layout sizing requirement for these image placeholders to prevent accessibility and layout issues. | pass→pass | 15,003 | 12,284 | -18% | 1 | 1 | 0% | 2,503 | 2,148 | -14% | 0 | 0 | — |
▸case-03 An infinite scroll feed lazily fetches and appends 10 new article cards as the user reaches the bottom of the viewport. How should screen readers be informed when new lazy-loaded items arrive dynamically? | pass→pass | 12,636 | 12,666 | +0% | 1 | 1 | 0% | 2,247 | 2,237 | -0% | 0 | 0 | — |
▸case-04 Our dashboard uses animated gray skeleton loader elements to represent individual loading text paragraphs and user avatar circles while fetching profile data. How should these visual skeleton elements themselves be marked up for assistive technologies? | fail→pass | 11,101 | 10,069 | -9% | 1 | 1 | 0% | 2,020 | 1,902 | -6% | 0 | 0 | — |
▸case-05 During initial asynchronous data fetching, a user profile section displays animated placeholder cards. What ARIA attribute should be set on the parent container while data fetching is actively in progress? | pass→pass | 5,291 | 4,293 | -19% | 1 | 1 | 0% | 873 | 857 | -2% | 0 | 0 | — |
▸case-07 A user opens a dynamic search auto-suggest menu and moves keyboard focus to the first suggestion item. Mid-keystroke, an async promotional alert updates above the input field, shifting the focus target visually down the page. What accessibility rule governs dynamic content insertion relative to currently focused elements? | pass→pass | 12,421 | 12,159 | -2% | 1 | 1 | 0% | 1,985 | 2,078 | +5% | 0 | 0 | — |
▸case-08 We split our React application routes using dynamic imports (`React.lazy`). While a route bundle downloads over slow 3G networks, the app renders `null` as the Suspense fallback. How should the pending loading state be rendered for screen reader users? | pass→pass | 14,266 | 12,068 | -15% | 1 | 1 | 0% | 2,452 | 2,364 | -4% | 0 | 0 | — |
▸case-09 When a user activates a navigation link to a code-split route, the URL changes and the bundle chunk loads dynamically. Screen readers currently remain silent during and after the chunk load. What action must occur upon completion of a dynamic route transition? | pass→pass | 7,604 | 7,091 | -7% | 1 | 1 | 0% | 1,300 | 1,385 | +7% | 0 | 0 | — |
▸case-10 We are re-architecting a public web form. A recommendation was made to require client-side JavaScript for basic form submission and validation to reduce server loads. Describe the progressive enhancement requirement for core application functionality when JavaScript is unavailable. | pass→pass | 14,841 | 18,303 | +23% | 1 | 1 | 0% | 2,435 | 2,987 | +23% | 0 | 0 | — |
▸case-11 Our Single Page Application renders a blank white screen until client JavaScript fetches the initial state payload from the REST API. How should server-side rendering (SSR) handle the initial page markup for performance and accessibility? | pass→pass | 17,743 | 17,569 | -1% | 1 | 1 | 0% | 2,993 | 2,918 | -3% | 0 | 0 | — |
▸case-12 Our web application features continuous smooth scrolling animations and moving hero graphics. Provide the CSS media query standard used to honor user OS preferences regarding motion sensitivity. | pass→pass | 3,194 | 6,352 | +99% | 1 | 1 | 0% | 520 | 1,228 | +136% | 0 | 0 | — |
▸case-13 A landing page uses heavy parallax background scrolling effects to create visual depth. Users who experience vestibular motion disorders are struggling to read the page content. What requirement must be met for parallax background scrolling? | pass→pass | 6,780 | 6,505 | -4% | 1 | 1 | 0% | 1,155 | 1,194 | +3% | 0 | 0 | — |
▸case-14 To optimize core web vitals, an engineer wants to delay loading accessibility tree helpers, custom focus ring CSS, and skip-link styles until after deferred analytics and marketing scripts load. How should critical accessibility resources be prioritized relative to non-essential scripts? | pass→pass | 13,975 | 13,139 | -6% | 1 | 1 | 0% | 2,169 | 2,258 | +4% | 0 | 0 | — |
▸case-15 Custom web fonts block text rendering for up to 3 seconds on slow connections (FOIT - Flash of Invisible Text), making content unreadable for screen reader and visual users alike during load. What CSS `@font-face` descriptor standard fixes this performance and readability issue? | pass→pass | 3,723 | 7,151 | +92% | 1 | 1 | 0% | 688 | 1,311 | +91% | 0 | 0 | — |
▸case-16 We are lazy loading third-party embedded video `<iframe>` elements lower on the page using `loading="lazy"`. The markup currently omits the `title` attribute to shave bytes off the initial document load. Evaluate this implementation for screen reader accessibility. | pass→pass | 12,703 | 14,682 | +16% | 1 | 1 | 0% | 2,113 | 2,466 | +17% | 0 | 0 | — |
▸case-17 When rendered on screen, skeleton placeholders display looping animated gradients. Should screen readers read out text descriptions such as 'Loading element placeholder...' for each of the 15 skeleton cards on the page? | pass→pass | 9,316 | 6,646 | -29% | 1 | 1 | 0% | 1,615 | 1,219 | -25% | 0 | 0 | — |
▸case-18 When custom web fonts finish downloading, text reflows across multiple lines, causing layout shifts that misalign user target click areas. How should font loading be configured to minimize shift while maintaining readability? | pass→pass | 14,188 | 12,201 | -14% | 1 | 1 | 0% | 2,506 | 2,159 | -14% | 0 | 0 | — |
▸case-19 A promotional background video plays automatically on the homepage hero section to showcase product usage. What interactive control must be provided to satisfy accessibility standards for autoplaying visual content? | pass→pass | 5,790 | 6,664 | +15% | 1 | 1 | 0% | 965 | 1,183 | +23% | 0 | 0 | — |
▸case-20 We are designing a dark mode theme for our web application. What minimum WCAG 2.1 Level AA color contrast ratio is required for normal body text against its background? | pass→pass | 3,299 | 5,220 | +58% | 1 | 1 | 0% | 555 | 964 | +74% | 0 | 0 | — |
▸case-21 When users navigate our site via the Tab key, what CSS property design principles ensure visible focus indicators meet accessibility guidelines without relying solely on default browser outlines? | pass→pass | 14,544 | 14,020 | -4% | 1 | 1 | 0% | 2,537 | 2,475 | -2% | 0 | 0 | — |
▸case-22 What is the minimum recommended physical touch target size in CSS pixels for interactive buttons on mobile interfaces according to WCAG 2.2 guidelines? | pass→pass | 5,224 | 5,848 | +12% | 1 | 1 | 0% | 904 | 1,099 | +22% | 0 | 0 | — |