demo-app

intent: Text below 24 px (or 18.67 px bold) requires a minimum 4.5:1 contrast ratio against its background to be readable by users with moderate low vision.

intent: Joining translated fragments ('Hello, ' + name) breaks word order for many languages and produces ungrammatical output.

intent: Rapidly flashing content can trigger photosensitive seizures in users with photosensitive epilepsy.

intent: A focus trap outside a modal dialog prevents keyboard users from leaving a widget, effectively locking them into it.

intent: Flashing above the 3 Hz threshold can trigger photosensitive seizures, which are life-threatening.

intent: A password field without type=password is visible in plain text and not treated as a credential by browsers, password managers, or AT.

intent: Query strings appear in server logs, referrer headers, and browser history; secrets or identifiers there leak to third parties.

intent: Text at or above 24 px regular (or 18.67 px bold) benefits from a relaxed 3:1 threshold because larger letterforms are easier to discern at lower contrast.

intent: Borders, icons, chart lines, and control boundaries that convey meaning must be distinguishable from their surroundings by users with low vision.

intent: Keyboard users need a visible focus ring; a low-contrast or hidden outline makes the focused element indistinguishable, blocking navigation.

intent: Approximately 8% of men and 0.5% of women have color-vision deficiency; information communicated only by hue is lost to them.

intent: If inline links differ from body text only by color and the contrast between the two colors is below 3:1, color-blind users cannot identify them.

intent: Red–green color blindness (deuteranopia/protanopia) is the most common form; error and success states in red/green without a secondary cue exclude those users.

intent: A palette that meets contrast in light mode may invert into low-contrast combinations in dark mode if dark tokens are not independently verified.

intent: A photo background has unpredictable luminance; text placed over it without a scrim or solid overlay can fail contrast at any point in the image.

intent: Chart palettes chosen for visual appeal often produce indistinguishable hues for deuteranopic or protanopic users, destroying the information the chart conveys.

intent: Informational icons that are too light to see clearly against their background fail low-vision users who rely on them for navigation or status.

intent: A status color verified only in light mode may collapse below the threshold in dark mode where background luminance is very different.

intent: Generic phrases like 'click here' or 'read more' are meaningless out of context. Screen-reader users who navigate by links hear only the link text.

intent: Vague errors like 'Something went wrong' leave users stranded. A good error identifies the problem and offers a concrete next step.

intent: Using placeholders as the only label disappears on input, leaving users without a reminder of what the field requires.

intent: 'Are you sure?' tells the user nothing; 'This will permanently delete 3 files — this cannot be undone' lets them make an informed decision.

intent: Hard-coded concatenation ('Hello, ' + name + '!') breaks in languages with different word order and prevents proper translation.

intent: Users need to know the current state of the system at all times. Hiding progress, status, or outcome leaves them confused about whether their action was received.

intent: Responses that take longer than ~1s break the user's flow and feel unresponsive. Immediate acknowledgement preserves the sense of direct manipulation.

intent: Keyboard and switch-access users navigate with Tab; without a visible focus ring they cannot tell which element is active.

intent: Opaque error messages ('Something went wrong') give users no path forward. Clear explanations with next steps reduce abandonment.

intent: Irreversible actions (delete, clear, overwrite) without a confirmation step cause unrecoverable mistakes that erode trust.

intent: Toasts, inline errors, and status changes that update visually are invisible to screen-reader users unless exposed via an ARIA live region.

intent: Red asterisks with no text label fail users who are colour-blind or who use non-visual AT.

intent: Error text placed near an input visually is not associated with it for AT unless aria-describedby connects them.

intent: Errors that appear silently after blur or submit are never heard by screen-reader users whose focus stays on the offending field.

intent: Placeholder disappears on input, leaving users with no reminder of what the field expects; it also has insufficient contrast.

intent: Individual radio buttons read in isolation ('Yes / No') lose the question context; fieldset/legend groups them with their shared prompt.

intent: A misclick on 'Delete account' or 'Cancel order' with no confirmation causes unrecoverable harm, especially for motor-impaired users.

intent: Hard-coded strings in source code cannot be translated without modifying code, making localisation expensive and error-prone.

intent: English has two plural forms; Arabic has six. Hard-coded '1 item / N items' logic fails in most other languages.

intent: Hard-coded formats (MM/DD/YYYY, 1,000.00) are wrong or ambiguous in most non-US locales and cannot be localised without code changes.

intent: Languages like Arabic and Hebrew read right-to-left; an LTR-only layout mirrors the reading direction and damages comprehension.

intent: Translating visible text while leaving alt attributes and aria-labels in the source language produces a bilingual screen-reader experience.

intent: Text inside image files cannot be extracted by translation tools or screen readers; it must be updated manually for each locale.

intent: Non-UTF-8 encodings corrupt characters in many scripts (CJK, Arabic, Cyrillic) and are rejected by modern tools.

intent: Parallax scrolling involves large-scale motion that triggers vestibular symptoms in sensitive users.

intent: Large viewport-scale motion (zoom-based parallax, scroll-jacking) causes nausea in vestibular-sensitive users.

intent: Auto-play carousels move content without user intent; users with cognitive or motor disabilities can't keep up.

intent: Keyboard and screen-reader users must tab through the entire navigation on every page without a skip link, which is exhausting on navigation-heavy sites.

intent: SPAs that manipulate state without updating the history stack break the back button — a top user complaint.

intent: Hamburger menus that are only mouse-operable exclude keyboard-only users and can be difficult for touch users with motor impairments.

intent: SPA route changes replace content without a page reload; without explicit focus management, screen-reader users are stranded at the old position.

intent: A mega-menu that can only be opened by hovering excludes keyboard-only users; one that traps focus prevents them from escaping.

evidence: styles.css:2:16

intent: Keyboard users navigate by watching where focus is; outline:none without a custom replacement leaves them disoriented.

intent: Keyboard users must Tab through every header item on every page load without a mechanism to skip to main content.

intent: A focused element hidden behind a sticky banner or cookie bar is invisible, making the current keyboard position unknown.

intent: Pinch-to-zoom or two-finger swipe gestures are unusable for people who operate the device with one pointer.

intent: When the accessible name differs from the visible label, voice-control users cannot activate the control by speaking what they see.

intent: Dragging is difficult or impossible for users with tremors; a drop target with a button-based pick-and-place is required.

intent: Auto-expiring sessions and timed forms cut off users who need more time — including those using screen readers or switch access.

intent: When a dialog closes, focus dropping to the body or top of the page forces keyboard users to re-navigate the entire page.

intent: Keyboard users expect Escape to dismiss overlays; widgets that ignore it trap users who have no other exit.

intent: Replaced-element controls (select, checkbox, radio) with custom CSS often lose their native focus ring, leaving keyboard users without position cues.

intent: A button showing only an icon (✕, ☰) is nameless to AT unless an aria-label or visually-hidden text is supplied.

intent: Low-vision users zoom; fixed pixel containers can clip or overlap text when they do.

intent: At a 320px-equivalent width, two-dimensional scrolling forces painful side-to-side reading.

intent: CSS background images are invisible to AT; essential content there is simply lost.

intent: LCP measures when the largest above-fold element becomes visible. Exceeding 2.5 s means users wait noticeably before seeing meaningful content, increasing bounce rate.

intent: INP captures how quickly the page responds to all user interactions. Values above 200 ms feel sluggish and erode trust in the UI.

intent: Shipping every route's code in a single bundle forces users to parse JavaScript they do not need on the current page, delaying interactivity.

intent: Reading layout properties (offsetHeight, getBoundingClientRect) immediately after DOM writes forces the browser to synchronously flush styles, stalling the main thread and worsening INP.

intent: Rendering thousands of DOM nodes at once inflates memory, slows layout, and makes scrolling janky. Windowing renders only the visible slice, keeping the DOM small.

intent: Tasks longer than 50 ms block user interactions, directly increasing INP. Long tasks should be broken up or moved off the main thread.

intent: AT cannot describe a custom widget — its purpose, state, or current value — unless the correct ARIA semantics are present.

intent: When an aria-labelledby or aria-describedby id points to a nonexistent element, the association is silently broken and AT reads nothing.

intent: Orphaned ARIA roles (option without listbox, row without rowgroup/grid) violate the ownership rules and break AT tree parsing.

intent: A focusable element inside an aria-hidden subtree is reachable by keyboard but invisible to AT, creating a phantom focus state.

intent: A role that doesn't match the widget's behaviour (e.g. role=slider on something that isn't a slider) gives AT users wrong instructions.

intent: An AT user reaching an unnamed button or link hears only 'button' or 'link' with no indication of purpose.

intent: A widget whose visual state changes (expanded, selected, disabled) but whose ARIA attributes are not updated is invisible to AT users.

intent: Controls smaller than 24px are reliably difficult to hit with a finger; WCAG 2.2 requires a minimum of 24 × 24px.

intent: Two-dimensional scrolling is painful on mobile; all content should reflow into a single scrollable column.

intent: Forcing portrait or landscape prevents users who have their device mounted in a fixed orientation from using the page.

intent: Interactions exposed only on :hover (e.g. edit buttons inside cards) are inaccessible on touchscreens.

intent: If reading the page requires zooming in and panning side to side, the responsive design has failed.

intent: Users of screen readers navigate via landmarks; without <header>, <nav>, <main>, and <footer> they must read linearly through every page.

intent: A list of links wrapped in a <div> is not recognised as navigation; users relying on landmark shortcuts can't jump to it.

intent: Without <th> and scope, screen readers can't associate cells with their headers, making tabular data impossible to comprehend.

intent: Clickable <div>s and <span>s have no native keyboard or AT semantics; users who don't use a mouse can't activate them.

intent: A visible label adjacent to an input but not programmatically linked is invisible to screen readers and voice-input users.

intent: Without horizontal padding on small viewports, text and controls touch the screen edge and become hard to tap or read.

intent: Overlapping text or controls obscure each other and can make content unreadable or controls untappable.

intent: Without a loading indicator, users do not know whether their action was registered or the app is frozen, increasing uncertainty and retry clicks.

intent: When an operation fails, users need to know what went wrong and how to recover. A bare error message with no action dead-ends the interaction.

intent: Allowing double-submission or concurrent conflicting actions during a pending request leads to race conditions and inconsistent server state.

intent: An unhandled rendering error in one component can crash the entire React tree. Error boundaries isolate the failure to the affected subtree.

intent: A dead-end page or state — one with no navigation, help, or action — strands the user. Every failure view should offer at least one meaningful exit.

intent: Accidental deletions or irreversible operations cause data loss and erode trust. A confirmation step gives users a chance to reconsider.

evidence: ProductList.jsx:8:12

intent: Setting innerHTML, dangerouslySetInnerHTML, or document.write with untrusted data is the primary vector for stored and reflected XSS.

intent: HTTP resources on an HTTPS page are mixed content: browsers block or warn on them, undermining both security and trust.

intent: Loading analytics, advertising, or fingerprinting scripts before consent violates GDPR, PECR, and similar regulations and erodes user trust.

intent: Pre-checked boxes, equal-prominence accept/reject buttons hidden behind layers, or no reject option are deceptive dark patterns that undermine informed consent.

intent: Hidden costs, forced continuity, roach motel subscriptions, and misdirection undermine user autonomy and create legal liability.

intent: A form whose action points to an HTTP URL, an unvalidated third party, or a non-existent handler silently discards or exposes user data.

intent: CSP is the most effective mitigation against XSS by whitelisting approved content sources and blocking inline injection.

intent: Unrestricted iframes can execute scripts, submit forms, or access top-level navigation; sandbox limits what embedded content can do.

intent: CDN-hosted scripts can be tampered with; SRI ensures the browser refuses to execute a script whose hash doesn't match the expected value.

intent: Unexpected navigation or form submission on tab-focus disorients screen-reader and keyboard users who are merely exploring.

intent: Auto-submitting a form when a select changes removes users' agency and surprises those using AT who didn't intend to submit.

intent: A generic 'form has errors' message forces users to hunt; AT users have no way to navigate to the problem field.

intent: Placeholder text disappears on input and provides no label for AT; users with cognitive impairments forget what a field is for.

intent: Irreversible actions submitted by mistake can cause serious real-world harm; users need a chance to check and correct.

intent: Puzzles, memory tasks, or CAPTCHA without alternatives block users with cognitive or visual disabilities.

intent: Accidental deletions or permanent actions without confirmation cause data loss and cannot be undone by the user.

intent: Multiple equally-prominent CTAs force users to decide between options of unclear relative importance, slowing decisions and increasing abandonment.

intent: A primary message or action that blends into the page background fails to attract attention, undermining the intended hierarchy.

intent: Two equally-weighted primary buttons on one page create the paradox of choice, slowing or preventing user action.

intent: When the element the user should act on first appears below a less important element, they may never reach it, or reach it disoriented.

intent: Users decide whether to engage within seconds; if the headline and primary CTA require scrolling, many will not reach them.

intent: Placeholder text at low contrast is mistaken for already-entered data and is unreadable for low-vision users.

intent: Custom ::selection colors must meet 3:1 contrast so selected text remains readable when users copy or review highlighted content.

intent: Interactive states that darken or lighten a button or link can push contrast below thresholds, making hovered states unreadable.

intent: Using the 'danger' token for some errors and a raw red hex for others means contrast is only verified at the token level, not at the point of use.

intent: A gradient applied to text may start accessible at one end but dip below threshold at the midpoint or opposite end, depending on the background.

intent: Raw brand colors are chosen for visual identity, not legibility; using them as text foregrounds often produces insufficient contrast, especially on white.

intent: Custom one-off components diverge from the design system, creating visual inconsistencies and duplicating maintenance burden for every future design change.

intent: Arbitrary pixel values for margins and padding produce visually inconsistent layouts that feel misaligned. A shared spacing scale ensures harmonious rhythm.

intent: Mixing icon libraries (e.g., outlined icons from one set and filled icons from another) creates visual noise that signals a lack of design polish.

intent: Buttons with inconsistent sizes, colors, or border radii make the UI appear unfinished and force users to re-learn affordances on each page.

intent: Calling the same concept by different names on different screens (e.g., 'Delete' vs 'Remove' vs 'Discard') confuses users and increases cognitive load.

intent: Seeing 'Jan 5, 2025' on one screen and '05/01/25' on another disrupts trust and can cause genuine misreading of dates in international contexts.

intent: Pages with differing header positions, sidebar widths, or content widths make the app feel disjointed and increase the learning curve for navigation.

intent: If hover reveals a tooltip on one card but opens a popover on another visually identical card, users are surprised and distrustful of the interface.

intent: Bespoke loading spinners and error messages for each feature add visual noise and increase maintenance; a shared pattern set makes the app cohesive.

intent: Duplicated color or spacing values across multiple files diverge over time, causing subtle inconsistencies that are expensive to track down and fix.

intent: Ad-hoc z-index values (z-index: 9999) create stacking conflicts between modals, tooltips, and toasts that are hard to debug and resolve.

intent: Different components breaking at different pixel values (768 px in one, 780 px in another) produce layouts that partially break at certain viewport widths.

intent: Users on a given platform (macOS, iOS, Android, Windows) have deeply ingrained expectations for scrollbars, checkboxes, and date pickers. Violating these conventions increases friction.

intent: Forms with varying label positions (above vs inline), field widths, and button placements force users to re-orient on every form they encounter.

intent: Multiple stylesheets that define conflicting rules for the same element produce unpredictable rendering and make refactoring dangerous.

intent: Verb-first labels ('Save changes', 'Delete account') set clear expectations; noun labels ('OK', 'Submit') leave users guessing what will happen.

intent: Technical or insider jargon raises the cognitive load for all users and excludes those unfamiliar with the domain.

intent: Switching between synonyms ('cart' / 'basket', 'log in' / 'sign in') forces users to re-map concepts and erodes trust.

intent: A blank list or dashboard with no copy leaves users confused about whether it's a bug or an expected state.

intent: Blame ('You entered an invalid date') raises anxiety and damages trust. Neutral phrasing ('The date wasn't recognised') removes judgement.

intent: Ambiguous formats like '04/05/06' mean different things in different regions, causing data-entry errors and mistrust.

intent: A price of '99' or a duration of '30' is meaningless without its unit — users in different regions will assume different values.

intent: Text clipped with ellipsis can hide critical information; users need a way to see the full string.

intent: Copy that exceeds the reading level of the audience reduces comprehension and creates barriers, especially for users with cognitive disabilities.

intent: Headings are the primary scanning aid; decorative or vague headings force users to read all body text to find what they need.

intent: Internal code names or database field names surfaced in the UI require users to translate them — increasing cognitive load.

intent: Icon meaning is rarely universal; an icon-only control forces users to guess its function, increasing errors.

intent: A CTA that says 'Get started' for a 10-step signup flow misleads users and causes drop-off when they discover the true commitment.

intent: A hover state signals interactivity. Without it, users can't confirm an element is clickable before committing to the click.

intent: Disabled elements that look identical to enabled ones waste user effort. AT must also know the element is unavailable, not just styled differently.

intent: Operations lasting more than ~2s without progress indication feel frozen, causing users to abandon or retry unnecessarily.

intent: Without explicit confirmation users are unsure their action (save, send, upload) succeeded, leading to repeated submissions.

intent: Disabling a button and showing its own spinner ties the loading feedback to the user's point of action and prevents double-submission.

intent: Field focus styling (border colour change, glow) confirms to sighted users that their keyboard input will land in that field.

intent: Icon buttons without labels leave sighted users who don't recognise the icon unable to determine the control's purpose.

intent: Drag-and-drop without visual affordance or drop-zone highlighting is a hidden interaction that users fail to discover or complete.

intent: Users scanning a list of options need an unambiguous signal for what is currently selected or checked, both visually and semantically.

intent: Without autocomplete tokens browsers can't offer saved credentials or address data, increasing effort for motor-impaired and cognitively impaired users.

intent: Generic type=text forfeits browser-supplied validation, mobile keyboard optimisation, and AT cues for email, URL, and numeric data.

intent: Fixing errors one-by-one discovered by Tab-walking is slow; an error summary gives immediate context to all errors.

intent: Clearing all fields on error forces re-entry of correct data, creating significant friction for motor-impaired users.

intent: Double-clicking a slow form can create duplicate records or charges; users with tremors are especially at risk.

intent: Tiny checkboxes and radio buttons are difficult to activate for users with motor impairments or on touch devices.

intent: When tabindex rearranges focus or a visual layout places fields out of DOM order, keyboard-only users traverse a confusing sequence.

intent: Silent success after submitting leaves users unsure whether the action worked, causing resubmission and anxiety.

intent: A disabled submit button with no explanation leaves users guessing which fields are incomplete.

intent: Automatic focus jumps (e.g. after 3-digit phone segment) break reading flow and disorient screen-reader users mid-announcement.

intent: A visible character counter not linked to the input is silent to screen-reader users, who then exceed the limit unknowingly.

intent: '$99' is ambiguous across USD, CAD, AUD, and dozens of other dollar currencies; users in the wrong locale misread prices.

intent: Physical properties (margin-left, padding-right) do not flip automatically for RTL; logical properties (margin-inline-start) do.

intent: Mixing RTL and LTR text (e.g. an Arabic page with an English URL) can corrupt visual order without explicit bidi isolation.

intent: Translations of English strings are typically 30–50% longer in German and French; fixed-width containers clip or overflow translated text.

intent: JavaScript's default sort() uses Unicode code points, producing incorrect alphabetical order in many languages (e.g. Swedish å, ä, ö).

intent: Users whose browser language differs from the default need a reachable mechanism to select their preferred language without losing context.

intent: Screen readers use the lang attribute to select the correct pronunciation engine; unmarked foreign text is mispronounced.

intent: Displaying a time without a time zone causes confusion for users in different regions and is a frequent source of scheduling errors.

intent: Forms that require a US-style 5-digit ZIP code or two-character state code reject users from most countries.

intent: A font that lacks characters for a locale (e.g. missing CJK or Arabic glyphs) causes the browser to fall back to mismatched system fonts.

intent: When a key is missing in the active locale, an untranslated fallback (or a blank string) is worse than displaying the source language string.

intent: Durations below 150ms feel abrupt; above 400ms they feel sluggish and obstruct the user from proceeding.

intent: Persistent looping animation distracts users and can prevent focus for those with attention disorders.

intent: Simply removing animation duration can leave UI in broken intermediate states; a well-designed fallback shows the end state immediately.

intent: Animating layout-triggering properties (width, height, top, left) forces reflow on every frame, causing jank on low-end devices.

intent: CSS scroll-behavior: smooth causes long animated scrolls that disorient vestibular-sensitive users.

intent: Users lose their bearings when the active page or section is not clearly signalled; both sighted users and AT users need this anchor.

intent: In sites with more than two levels of depth, breadcrumbs let users understand where they are and step back without losing context.

intent: Moving the primary navigation between pages forces users to re-locate it on every visit and breaks their spatial memory.

intent: Navigation hierarchies deeper than three levels overwhelm users and increase time-to-task; logical grouping reduces scanning effort.

intent: Users who know what they want prefer direct search over browsing menus; without search on large sites they abandon.

intent: Internal product names or technical terms as nav labels require users to guess their meaning, increasing scanning time and errors.

intent: A dead-end 404 page causes abandonment; actionable links (homepage, search, categories) help users recover gracefully.

intent: Orphan pages are invisible to users navigating the site and are often missed by search indexers, wasting content investment.

intent: Underlines and colour are the canonical link affordances; removing both makes links invisible to users scanning for actions.

intent: Without a visible active/selected state, users cannot tell which tab, menu item, or filter is currently active.

intent: Users who scroll a long list and open a detail page expect to return to the same scroll position, not the top of the list.

intent: The <title> is the first thing a screen reader announces on page load and the text shown in browser tabs and history.

intent: ARIA landmark roles let screen-reader users jump directly to the navigation, main content, or footer without tabbing through everything.

intent: When focus moves in a visually illogical order, keyboard users lose their place and the experience becomes disorienting.

intent: Targets smaller than 24 × 24 CSS px are hard to hit for users with motor impairments or on touch screens.

intent: Activating actions on pointerdown prevents users from aborting accidental touches by moving the pointer away.

intent: Shake, tilt, or gyroscope-based features cannot be used by people who have mounted devices or have limited movement.

intent: Single-key shortcuts fire accidentally for speech-input users and people with motor conditions who brush keys.

intent: Carousels, tickers, and live feeds distract users with attention or cognitive disorders and interfere with screen readers.

intent: Tabbing into every cell of a data grid or every item in a listbox creates an exhausting, counter-intuitive keyboard experience.

intent: Windows High Contrast and forced-colours modes strip CSS backgrounds/box-shadows; focus rings relying on them become invisible.

intent: Screen-reader users navigate by headings; a missing or misordered heading hierarchy makes long pages difficult to scan.

intent: Blind users miss on-screen action that isn't narrated; audio description fills that gap.

intent: Podcasts and audio clips are inaccessible to deaf users without a readable transcript.

intent: A one-line alt can't convey a chart; users need the underlying data or a longer description.

intent: 'Click the round button on the right' fails users who can't perceive shape, size, or position.

intent: When CSS reorders content visually, AT still follows DOM order; a mismatch garbles meaning.

intent: Some users force larger line/letter/word spacing; rigid containers then clip text.

intent: Tooltips/popovers that vanish or can't be dismissed trap low-vision and motor users.

intent: Unexpected audio competes with screen readers and startles users.

intent: Live streams without captions exclude deaf users from time-sensitive content.

intent: An untitled <iframe> is announced as 'frame' with no hint of its contents.

intent: Toasts and inline status need a live region, or AT users never hear them.

evidence: index.html:10:5

intent: Images without explicit dimensions cause the browser to reflow the page once they load, degrading CLS. Reserving space via width/height attributes or CSS aspect-ratio eliminates that shift.

intent: Unexpected layout shifts frustrate users who mis-click on moved content. A CLS score above 0.1 indicates the page is visually unstable during load.

intent: WebP and AVIF deliver equivalent visual quality at 25–50 % smaller file sizes compared to JPEG/PNG, directly reducing LCP time and data usage.

intent: Serving a single large image to all devices forces mobile users to download far more bytes than they display. srcset lets the browser pick the optimal resolution.

intent: DNS lookup, TCP handshake, and TLS negotiation each add latency before the first byte of a cross-origin resource. A preconnect hint pays that cost early.

intent: The browser discovers the LCP image late in the waterfall. A preload hint starts the fetch as early as possible, directly reducing LCP time.

intent: Dead code and unminified output inflate JS payload, increasing parse time and INP. Tree-shaking and minification can cut bundle size by 30–60 %.

intent: Compressed HTML, CSS, and JS transfer 60–80 % fewer bytes over the network, reducing both LCP and TTFB for users on slow connections.

intent: Static assets with content-hashed filenames never change, so a max-age of one year eliminates repeat download latency for returning users.

intent: Unbounded JS growth silently degrades INP and TTI. A size budget enforced in CI prevents regressions before they reach users.

intent: Analytics, chat widgets, and ad scripts that block the parser delay FCP and LCP. Deferring or async-loading them keeps the critical path unobstructed.

intent: Render-blocking stylesheets prevent the browser from painting until they download. Inlining above-fold critical CSS eliminates that block for the first paint.

intent: Scroll, resize, and input events fire hundreds of times per second. Unthrottled handlers that do heavy work block the main thread and directly increase INP.

intent: Every third-party script is an uncontrolled dependency that can block the main thread, increase CLS, and introduce security risk. Fewer scripts mean faster, safer pages.

intent: Components that re-render when their props and state have not meaningfully changed waste CPU cycles and can push INP over budget in complex UIs.

intent: Pure client-rendered pages show nothing until JS downloads, parses, and executes. SSR or streaming HTML lets the browser paint meaningful content immediately, improving TTFB and LCP.

intent: Dynamic status (save confirmation, cart count, error toast) is never announced to AT unless wrapped in a live region.

intent: Native elements (<button>, <input>, <select>) carry built-in semantics and behaviour; ARIA overrides add complexity and risk mistakes.

intent: Abstract roles (command, composite, input, landmark, range, roletype, section, sectionhead, select, structure, widget, window) are taxonomy nodes, not assignable roles.

intent: Assigning role=presentation or role=none to a native semantic element strips its semantics, removing keyboard and AT affordances.

intent: Invalid attribute values (aria-checked="yes", aria-expanded="0") are either ignored or misinterpreted by AT.

intent: Two unlabelled <nav> or <aside> landmarks are indistinguishable in the AT landmark list, confusing users who rely on landmark navigation.

intent: Invalid nesting (e.g. <p> inside <a>, <div> inside <p>) causes browser parsing differences and breaks AT tree construction.

intent: Fixed-column grids break at unanticipated widths; fluid units let the grid adapt continuously.

intent: Images without a width constraint overflow their container on narrow viewports, causing horizontal scrolling.

intent: Hiding significant content on mobile deprives those users of information available on desktop.

intent: On notched phones, content that ignores safe-area-inset-* is obscured by the notch or home indicator.

intent: Wide tables overflow narrow viewports without a scroll wrapper, causing double horizontal scrolling.

intent: A sticky header that is 25%+ of the viewport on a phone leaves little room for content and makes the page feel cramped.

intent: A full-page modal that overflows a 375px screen forces users to scroll inside a scroll, which is disorienting.

intent: Serving a 2000px image to a 375px phone wastes bandwidth and slows load; srcset lets the browser pick the right size.

intent: On mobile browsers, 100vh includes the address bar and causes content to be clipped; 100dvh or a JS fallback gives the actual visible height.

intent: Multiple <main> elements (or role=main) confuse the 'skip to main content' target and disorient screen-reader users.

intent: Skipping from h2 to h4 breaks the implicit document tree; screen-reader users navigating by heading lose orientation.

intent: Screen readers announce list semantics (count, position) only when real list elements are used; divs masquerading as lists lose that.

intent: Layout tables confuse the table-navigation shortcuts of screen readers and expose non-semantic row/column relationships.

intent: Related controls (radio groups, address blocks) without a fieldset/legend lose their shared context when navigated individually by screen readers.

intent: An unlabelled or unordered breadcrumb trail loses the implied sequence and isn't announced as navigation by AT.

intent: ARIA roles on <div> are a fragile shim; native elements supply role, state, and keyboard behavior in one; a missing script leaves a roleless div.

intent: Two unlabelled <nav> elements are announced identically, leaving AT users no way to distinguish primary from secondary navigation.

intent: A shared base-4 or base-8 scale ensures visual harmony; arbitrary spacing values create visual inconsistency across the UI.

intent: Token-driven spacing lets the entire scale update from one place, avoiding drift between design and code.

intent: Inconsistent column/row gaps make layouts feel unplanned and break visual alignment across sections.

intent: Uneven vertical spacing between headings, paragraphs, and sections disrupts reading flow and looks unpolished.

intent: Off-grid alignment creates a visually noisy page; a column grid ensures elements line up across sections.

intent: Related items should be closer together than unrelated ones; mismatched spacing inverts the perceived grouping.

intent: Lines longer than ~75 characters are harder to read; an unconstrained max-width degrades long-form readability.

intent: Page sections with erratic vertical spacing feel unfinished; a consistent between-section gap creates a satisfying page rhythm.

intent: Controls placed too close together or made too small cause mis-taps, particularly on touch screens.

evidence: ProductList.jsx:5:8

intent: React and similar frameworks use keys to identify which list items changed. Unstable or index-based keys cause unnecessary unmounts and remounts, losing component state and triggering jarring UI flashes.

intent: Skeleton screens set correct layout expectations before data arrives, making loading feel faster than a blank area or spinner alone.

intent: A blank screen with no explanation when there is no data leaves users confused. A helpful empty state explains the situation and guides the next action.

intent: Users on unreliable connections lose network mid-session. Without offline handling the app silently fails; with it, users understand the situation and can resume when connected.

intent: Applying a mutation immediately (optimistic update) makes the UI feel instant. Providing rollback ensures the UI stays consistent if the server rejects the change.

intent: Without success confirmation, users are unsure whether their action took effect and may repeat it or feel uncertain about the app's reliability.

intent: Network errors are often transient. Giving users a one-click retry path is more helpful than asking them to refresh the entire page.

intent: A generic server 404 page with no branding or context disorients users. A custom 404 maintains trust and guides users to valid content.

intent: A form whose submit button stays active and unchanged during submission invites duplicate submissions and gives no feedback that the request is processing.

intent: Without a visible indicator at the bottom of an infinite list, users scroll into empty space and do not know whether more content is coming or the list is exhausted.

intent: Showing the same blank UI for 'no results found' and 'request failed' misleads users — one invites refining the query, the other requires a retry or support contact.

intent: A new user who sees an empty dashboard with no guidance may think the product is broken. A first-run empty state teaches the product's value and the first action to take.

intent: An undo affordance is less disruptive than a confirmation dialog but still prevents accidental data loss. Users trust apps that let them correct mistakes.

intent: A request that hangs indefinitely with no feedback looks like a freeze. Surfacing a timeout message with a retry path keeps users informed and in control.

intent: The autocomplete attribute signals to browsers and password managers how to auto-fill correctly, reducing user friction and mis-filling.

intent: Users who don't understand why data is collected cannot give meaningful consent, and may abandon forms out of distrust.

intent: Manufactured countdown timers and false 'Only 2 left!' claims are manipulation patterns that damage trust when users see through them.

intent: Users who can't find legal documents distrust the product; regulators require them to be accessible from every page.

intent: Burying unsubscribe behind multiple steps or dark patterns violates CAN-SPAM/GDPR and destroys the trust of users who have lost interest.

intent: Browser permission prompts (camera, location, notifications) shown without context and explanation are almost universally denied.

intent: Users on shared devices need to terminate their session; a missing or hidden sign-out leaves them unable to protect their account.

intent: Collecting data beyond what is strictly needed for the stated purpose is a GDPR violation and increases breach impact.

evidence: styles.css:4:10

intent: Text below 16 px (1 rem) is difficult for many users to read and fails WCAG resize requirements when the browser default is overridden with px units.

intent: Lines shorter than 45 characters cause disruptive eye movement; lines longer than 75 make it hard to track to the next line, both slowing reading speed.

intent: Tight line-height forces lines too close together, making it hard to track from the end of one line to the start of the next.

intent: All-caps text reduces reading speed by ~10–25% because readers lose word-shape cues; it is appropriate only for short labels or headings.

intent: Fixed px sizes ignore the user's browser font-size preference, preventing zoom-based text scaling required by WCAG 1.4.4.

intent: CSS text-align: justify creates uneven word spacing ('rivers') that disrupts reading flow, particularly at narrow column widths.

intent: At 320–375 px screen widths, full-width prose can drop to 25–35 characters per line, well below the 45-character minimum for comfortable reading.

intent: Headings that jump erratically in size (H2 larger than H1, or H3 the same size as H2) destroy the information hierarchy they're supposed to communicate.

intent: Negative letter-spacing on small body text collapses inter-character space below legibility thresholds, especially for users with dyslexia.

intent: Relocating the main menu or changing link order between pages forces users to relearn the site on every view.

intent: When a 'Delete' icon uses a different label or icon on two screens, users — especially those with cognitive impairments — cannot reliably predict behavior.

intent: Saying a field is invalid without explaining the expected format leaves users guessing, which is especially harmful for those with cognitive impairments.

intent: Requiring users to re-enter name, address, or other data they already provided increases cognitive load and error rate.

intent: Widgets that look standard but behave unexpectedly violate user mental models, causing errors and frustration.

intent: Instructions like 'fill in the red fields' or 'click the icon below' fail for users who cannot see colour, shape, or position.

intent: Discovering format requirements only after an error forces an extra round-trip and extra cognitive effort, particularly for users with memory impairments.

intent: If required fields are not labelled, users miss them; inconsistent indicators (asterisk on some, 'Required' on others) add confusion.

intent: When primary and secondary buttons share the same visual weight, users can't quickly identify the recommended action, leading to hesitation or errors.

intent: A typographic scale that varies size and weight communicates structure at a glance, reducing the cognitive load of parsing a page.

intent: Relying on a single visual dimension (color alone, or size alone) to signal importance makes hierarchy fragile for users with color-vision deficiencies or in different display contexts.

intent: Gestalt proximity means users perceive nearby elements as belonging together; misaligned spacing creates false groupings and confusion.

intent: When many elements are bold, large, or brightly colored at once, none of them reads as important — the emphasis is meaningless.

intent: Items at the same conceptual level (navigation items, cards in a grid) should look equal so the hierarchy doesn't mislead users about their relative importance.

intent: Eye-tracking research shows users scan in predictable F or Z shapes; placing key content off these paths means it will be missed.

intent: Surfacing every option at once overwhelms users; revealing detail only as needed keeps the interface approachable.

intent: A hero crammed with competing headlines, graphics, and CTAs causes fixation loss — users leave having absorbed nothing.

intent: Developer dashboards tolerate high density; consumer homepages require breathing room — forcing a single density across all contexts impairs usability.

intent: Heavy borders, background fills, and excessive iconography around data can overshadow the actual numbers or content, inverting the intended hierarchy.

evidence: styles.css:4:33 styles.css:4:54 styles.css:5:12

intent: Hard-coded hex values scattered through component files make it impossible to verify or change contrast consistently across the product.

intent: Users who select dark mode at the OS level expect applications to follow suit automatically; ignoring the preference is jarring and can cause eye strain at night.

intent: Disabled controls should not vanish entirely; users need to see what exists (even if inert) to understand the available interface.

evidence: ProductList.jsx:9:8

intent: TODO and FIXME comments in production code signal unfinished work and can inadvertently reveal internal implementation details or security issues.

intent: Inconsistent naming (e.g., UserCard vs CardUser vs user-card) makes it harder to discover existing components and increases the chance of duplication.

intent: Ad-hoc box-shadow values produce an inconsistent sense of depth — elements at the same logical level appear at different elevations, breaking the visual hierarchy.

intent: Components with mismatched border-radius values (some sharp, some rounded, some pill) appear cobbled together rather than designed as a system.

intent: Mixing Title Case, sentence case, and ALL CAPS for labels and headings looks accidental and undermines the sense of craft in the product.

intent: Components with mismatched animation durations and easing curves feel inconsistent — some snappy, some sluggish — undermining the sense of a coherent product.

intent: Links that look like buttons on one page and underlined text on another, or that have different hover colors, confuse users about what is clickable.

intent: Icons rendered at arbitrary sizes (some 16 px, some 18 px, some 24 px on the same page) look misaligned and unprofessional.

intent: Title case every word slows reading speed; all-caps impedes legibility. Sentence case (capitalise only the first word and proper nouns) matches natural reading.

intent: Wordy labels and instructions slow task completion and clutter the visual hierarchy. Every word should earn its place.

intent: Generic confirmations ('Done!') don't reassure users about what state change actually occurred.

intent: Tonal inconsistency — formal in one screen, casual in another — erodes brand trust and creates a disjointed experience.

intent: An active state gives immediate tactile-like feedback confirming the interaction was registered, reducing double-taps and uncertainty.

intent: The CSS pointer cursor is a system-level affordance for clickability. Custom click targets that use default cursor confuse pointer users.

intent: A silent clipboard write gives users no evidence it worked, leading to frustrated repeated attempts or blind pastes.

intent: Validating only on submit forces users to re-locate errors; real-time feedback on fields like email or password strength speeds correct completion.

intent: If a tooltip or popover appears on hover but its trigger hides the underlying information the user is consulting, comprehension is interrupted.

evidence: index.html:14:5

intent: A <button> without a type defaults to type=submit inside a form, accidentally submitting on Enter or click.

intent: Without inputmode, numeric or phone inputs on mobile show a full QWERTY keyboard, slowing and frustrating entry.

intent: Users who must enter a strong password with no visibility feedback make more errors; show-password lowers cognitive load.

intent: Hints placed below an input are often missed before users start typing, leading to formatting errors that require correction.

intent: Leaving all fields blank forces users to remember and type values that could be reasonably pre-filled, increasing effort for everyone.

intent: Distance in miles, weight in pounds, and temperature in Fahrenheit are unfamiliar to most of the world and create comprehension errors.

intent: A thumbs-up is offensive in some cultures; red means danger in the West but luck in China — culturally specific choices alienate global users.

intent: Decorative animation without purpose adds visual noise; every animation should inform the user about a state change or spatial relationship.

intent: Linear animation feels mechanical; physics-based easing (ease-out for entrances, ease-in for exits) mirrors natural motion and feels polished.

intent: Abrupt appearance and disappearance of modals, drawers, and tooltips is disorienting; subtle enter/exit transitions provide spatial context.

intent: Over-animated micro-interactions (large bounces, long ripples) draw attention away from content and feel toy-like.

intent: Slow hover transitions make the UI feel unresponsive; hover feedback should be near-instant.

intent: A focus ring that appears or disappears too slowly is hard to track; one that flashes distracts sighted users.

intent: Long staggered list animations make users wait for content that is already loaded; total stagger should feel snappy.

intent: A spinner that flashes on sub-100ms loads creates unnecessary visual noise; delaying it by 200–300ms avoids flicker.

intent: Scattered hard-coded durations and easing curves are hard to update consistently and lead to drift across components.

evidence: index.html:1

intent: A concise meta description helps search engines surface the page and gives users a preview before they visit.

intent: Footer links (Contact, Privacy, Terms, Sitemap) are expected locations for utility content; their absence frustrates users who scroll to find them.

intent: The logo-to-homepage convention is one of the web's strongest learned affordances; violating it disorientsusers.

intent: Purely decorative images announced by AT add noise and slow comprehension for screen-reader users.

intent: Images of text don't scale, recolor, or translate, and bloat the page.

intent: Captions that omit who's speaking or key non-speech sounds lose meaning.

evidence: index.html:10:5

intent: Loading images outside the initial viewport wastes bandwidth and delays LCP for visible content. Native lazy loading defers those requests until needed.

evidence: ProductList.jsx:2:3

intent: console.log and debugger statements left in production code slow execution, clutter DevTools output, and may inadvertently leak sensitive data.

intent: When the next user destination is predictable (e.g., clicking a product link), prefetching its document and assets makes the navigation feel instant.

intent: Full font files often include thousands of glyphs the UI never uses. Subsetting to the required Unicode ranges cuts font payload, improving FCP and LCP.

intent: Without <!DOCTYPE html>, browsers enter quirks mode, causing parsing inconsistencies that break accessibility tree construction.

evidence: styles.css:1:8

intent: Hard-coded widths wider than the viewport force horizontal scrolling and break fluid layouts on small screens.

intent: Mobile-first CSS adds complexity only as the viewport grows, producing leaner stylesheets that load faster on mobile.

intent: Hard-coded font sizes at each breakpoint require many media queries; clamp() scales text smoothly between bounds.

intent: Device-named breakpoints (iphone, ipad) become stale; content-driven breakpoints remain valid as device landscape evolves.

intent: On desktop, 100vw includes the scrollbar width while 100% does not; a 100vw element can cause a subtle horizontal scroll.

intent: Actions at the top of a tall screen require an uncomfortable stretch; bottom-of-screen or mid-screen placement improves one-handed usability.

intent: Spacing that is fixed while typography scales fluidly creates proportion mismatches; both should scale together.

intent: Unnamed <article> and <section> elements create unlabelled landmarks that can't be distinguished during landmark navigation.

intent: Bold/italic via <b>/<i> without meaning, or via CSS alone on a <span>, gives AT no cue that the text is emphasised.

intent: Machine-readable dates enable calendar apps, time-zone adjustment, and screen-reader disambiguation of ambiguous date formats.

intent: An image followed by a caption paragraph has no semantic association unless wrapped in <figure>/<figcaption>.

intent: Generic <p> or <div> contact blocks carry no semantic marker; <address> signals to AT and search engines that the content is contact info.

intent: Key-value or term/definition content expressed in plain paragraphs loses its relational semantics and AT cannot convey the pairing.

intent: Wrapping primary content in <aside> makes it sound supplementary to AT users and disrupts the page outline.

intent: Quotations styled as blockquotes via CSS on a <div> carry no semantic weight; AT can't identify them as quotations.

intent: One-off values like 13px or 37px cannot be maintained consistently and signal an ad-hoc layout rather than a designed system.

intent: gap applies uniformly between items without collapsing or double-counting; ad-hoc sibling margins create fragile edge-case code.

intent: Buttons, cards, and badges within the same family should share padding proportions; discrepancies feel accidental.

intent: Mixing arbitrary radius values (3px, 6px, 9px, 12px) makes the UI feel inconsistent; a scale (none/sm/md/lg/full) provides coherence.

intent: Height, min-width, and padding that varies arbitrarily across similar controls signals inconsistent implementation.

intent: Inconsistent gaps between icons and their adjacent labels look unpolished and imply different components.

intent: Cards with inconsistent internal padding across the same page look like different components and break visual rhythm.

intent: Lists with varying row gaps look unfinished and make scanning harder when the eye can't rely on a stable rhythm.

intent: Displaying cached data without labeling it as potentially stale can mislead users into acting on outdated information.

intent: autocomplete=off prevents browsers and password managers from helping users, increasing friction and error rates on fields where assistance is beneficial.

intent: Security badges, recognised payment logos, and HTTPS indicators reduce cart abandonment by reassuring users before they enter payment details.

intent: Large headings with the same 1.5 line-height as body text appear visually disconnected across lines; reducing it to ~1.1–1.3 keeps multi-line headings cohesive.

intent: Each additional typeface adds a network request, visual noise, and potential brand inconsistency; more than three families rarely improves communication.

intent: Ad-hoc sizes (17 px, 22 px, 27 px) lack mathematical coherence; a ratio-based scale (1.25×, 1.333×) produces sizes that feel visually related and proportional.

intent: Without sufficient inter-paragraph spacing, blocks of text appear as one undifferentiated mass, making scanning difficult.

intent: If a web font fails to load, a fallback to a generic sans-serif family prevents invisible or mismatched text on slow connections.

intent: All-caps text at normal tracking appears crowded because capitals are designed for sentence case; positive letter-spacing opens it up for readability.

intent: Without hyphenation, long technical terms or URLs overflow or force text to break awkwardly in narrow columns and at mobile widths.

intent: Proportional numerals have varying widths so columns of numbers don't align; tabular (monospaced) figures keep decimals and digits in vertical columns.

intent: When a bold or italic weight is unavailable, browsers synthesise it by slanting or fattening glyphs, producing poor-quality letterforms that erode visual polish.

intent: Bold or semi-bold weight signals emphasis more accessibly than italics or color alone, and remains effective in greyscale and for color-blind users.

intent: An orphaned word at the end of a paragraph creates an awkward visual gap and a short, easily-missed line that disrupts reading rhythm.

intent: Inline phrases in a different language are mispronounced if the screen reader is not told to switch voice/pronunciation.

intent: Help links or chat widgets that move between pages are hard to find for users with cognitive or memory impairments.

intent: Technical or unnecessarily complex prose excludes users with lower literacy, cognitive impairments, or non-native language skills.

intent: Jargon and unexplained acronyms are barriers for screen-reader users, non-native speakers, and people with cognitive disabilities.

intent: Exposing internal system names or technical codes in error messages and UI copy confuses non-technical users and erodes trust.

intent: Arbitrary pixel offsets produce a restless, unpolished feel and obscure the intended reading order.

intent: Generous space between sections allows the eye to rest and signals boundaries between topics without needing extra dividers.

intent: Cards use surface contrast, shadow, or border to communicate that contained items belong together, reducing the need for users to infer grouping.

intent: Overuse of horizontal rules, borders, and separators creates visual noise that competes with actual content hierarchy.

intent: Inconsistent H2 or H3 styling across a product signals randomness rather than system, eroding trust and confusing hierarchy.

intent: Timestamps, author names, tags, and other supplemental data shown at full body contrast compete with primary content for attention.

intent: Maximum contrast (21:1) can cause halation and visual fatigue in sensitive users and on OLED screens; softened near-black on near-white is more comfortable at equivalent perceived clarity.

intent: Showing the expected outcome immediately (before the server confirms) makes the UI feel fast without hiding risk, as long as the action can be reversed on failure.

intent: Pseudo-locales (e.g. Ḟoo̊ ʙàr̃) reveal hard-coded strings, clipped containers, and bidi problems before any real translation begins.

intent: Skeleton placeholders maintain spatial context and reduce perceived wait time compared to a full-page spinner.

intent: A sitemap gives users and search engines a complete view of the site's content, improving discoverability for both.

intent: Applying role=button to <button> or role=link to <a> is harmless but creates maintenance confusion and review noise.

intent: Viewport breakpoints cannot adapt a component embedded in a sidebar; container queries let components respond to their own available width.

intent: Breakpoints only catch regressions if the design is verified at representative widths; gaps between breakpoints can hide layout bugs.

intent: Cramped layouts increase cognitive load; generous, balanced white space makes content easier to scan and understand.

intent: Full-weight font files can exceed 400 KB per variant; subsetting to the character set in use (latin, latin-ext) significantly reduces transfer size.

intent: Discrete breakpoint-based font sizes jump abruptly; clamp() produces a smooth interpolation between a minimum and maximum, maintaining proportion at every viewport width.