正在加载项目…
Front-End-Checklist
资源合集🗂 The essential checklist for modern web development, for humans and AI agents
thedaviddiasGitHub 公开资源索引
74,273 GitHub Stars392 项组成内容Stars 同步于 2026年9月26日
正在读取官方项目说明…
正在加载项目…
🗂 The essential checklist for modern web development, for humans and AI agents
正在读取官方项目说明…
内容来自 GitHub 原始文件，由原作者维护。在 GitHub 查看
Front-End Checklist is the open-source front-end quality system for humans and AI agents. It turns front-end best practices into a practical review workflow you can browse on the web, run through with MCP-compatible tools, or work through directly in this README.
Companion project: UX Patterns for Devs helps developers choose the right UI pattern before using Front-End Checklist to verify implementation quality.
[!IMPORTANT] Use the website for browsing and filtering, the MCP server for agent workflows, and this README when you want the checklist in one place.
385 English rules across 11 active categories11 MCP tools exposed by the hosted server
means site-breaking, compliance-sensitive, or security-sensitive issues that should be fixed first.
means issues with major impact on user experience, accessibility, performance, or discoverability.
means strong best practices that should be part of normal frontend quality review.
means useful improvements that are situational or lower urgency.Front-End Checklist helps you review implementation quality. If you are still deciding what interface to build, use UX Patterns for Devs to compare common UI patterns, understand tradeoffs, and find practical guidance for forms, navigation, data display, feedback states, authentication, and AI interfaces.
pnpm installpnpm devpnpm validate:rule-structurepnpm score:rulespnpm generate:skills and pnpm generate:readmeConnect an MCP-capable agent to Front-End Checklist for frontend code review, structured rule lookup, audits, and remediation workflows across React, Next.js, HTML, CSS, JavaScript, accessibility, performance, SEO, security, images, privacy, i18n, and testing.
[!TIP] Best first use: point an MCP-capable agent at a real component, page, or public URL and explicitly ask it to use the Front-End Checklist MCP for the highest-confidence frontend findings first. Some clients discover installed MCP tools lazily, so naming the server in the prompt helps.
packages/mcp/src/cli.tsWhat you can do:
Agent usage guidance:
review_code first for pasted HTML, CSS, JavaScript, React, or Next.js codesearch_rules before making frontend accessibility, performance, SEO, security, or image recommendationsget_workflow or get_checklist_rules for launch, accessibility, SEO, security, and performance auditsaudit_url for public https:// pagesExample prompts:
Use the Front-End Checklist MCP to review this React component and report the highest-confidence findings first.Use the Front-End Checklist MCP to audit https://example.com for accessibility, performance, and SEO issues.Use the Front-End Checklist MCP to explain the canonical URL rule and suggest a fix with code examples.Install Front-End Checklist skills when you want reusable audit workflows or focused rule-specific guidance in tools that support them.
Install:
npx skills add frontendchecklist/skills
npx skills add frontendchecklist/skills --skill https
Useful entry points:
skills/frontend-checklist-global/SKILL.mdskills/https/SKILL.mdExample uses:
https for security review on one concern25 rules. Semantic markup, metadata, forms, and document structure rules.
Browse HTML on frontendchecklist.io
: Use Subresource Integrity (SRI) hash attributes on external scripts and stylesheets loaded from CDNs to ensure the content hasn't been tampered with.: HTML5 video elements should have a poster attribute providing a thumbnail image displayed before the video loads or is played.: A custom 404 error page is designed with helpful navigation options for lost users.: The charset (UTF-8) is declared correctly as the first element in the head.: All ID attributes are unique within the document. No duplicate IDs exist on the page.: Breadcrumb navigation is implemented with proper semantic markup and ARIA attributes for accessibility.32 rules. Layout, typography, responsive design, and styling rules.
Browse CSS on frontendchecklist.io
: Use Flexbox for one-dimensional layouts with the right properties, avoiding common mistakes like overusing flex:1, ignoring min-width:0, and misunderstanding flex-basis.: Embedded and inline CSS are avoided except for critical CSS and performance optimization.: Full-screen interstitials (pop-ups, overlays, cookie banners) that block the main content on mobile are a ranking penalty signal and accessibility barrier. Use non-intrusive alternatives.: The viewport meta tag must not set user-scalable=no or maximum-scale=1 as these prevent users from zooming in to read content, violating WCAG 2.1 SC 1.4.4 (Resize Text).: A print stylesheet is provided and correctly optimized for printed pages.: Critical CSS (above-the-fold content) is inlined in the head for faster initial render.26 rules. Client-side behavior, async patterns, and runtime quality rules.
Browse JavaScript on frontendchecklist.io
: Use strict equality (===), explicit type conversion, and Number/String/Boolean constructors to avoid JavaScript's implicit type coercion producing unexpected results.: Inline JavaScript is avoided. JavaScript is kept in external files for caching and maintainability.: Replace TypeScript's any type with unknown, proper generics, or narrowed type assertions to preserve type safety without sacrificing expressiveness.: Use debounce or throttle for high-frequency events like scroll, resize, and input to improve performance.: Enable noUncheckedIndexedAccess in tsconfig.json to make array and object index access return T | undefined, forcing explicit null checks that prevent out-of-bounds runtime errors.: Enable "strict": true in tsconfig.json to activate the full suite of TypeScript type-checking flags and catch the most common runtime bugs at compile time.43 rules. Loading speed, rendering, optimization, and Core Web Vitals rules.
Browse Performance on frontendchecklist.io
: Page performance is analyzed with WebPageTest to identify loading bottlenecks and optimization opportunities.: Detects JavaScript resources that return 3XX redirects to reduce latency: Detects ES5 polyfills and legacy JavaScript code to reduce bundle size and improve execution: Large animated GIFs are replaced with more efficient video formats like MP4 or WebM to reduce page weight.: Detects lazy loading on likely above-fold images to improve Largest Contentful Paint (LCP): Checks for render-blocking CSS and JavaScript that prevent the initial page render95 rules. Keyboard, screen reader, ARIA, and inclusive UX rules.
Browse Accessibility on frontendchecklist.io
: The accessible name of a control should contain its visible label text.: Users should be able to paste content into form fields to improve usability and reduce errors.: Dynamic content updates are announced to screen readers using appropriate ARIA live regions.: Form inputs must have programmatically associated labels.: Form fields do not use the autofocus attribute which can disorient screen reader users and cause unexpected page behavior.: Audio and video content does not autoplay, or provides immediate controls to pause or stop playback.94 rules. Crawlability, metadata, structured data, and search visibility rules.
Browse SEO on frontendchecklist.io
: Checks for sitemap URLs that return 4XX HTTP status codes, indicating broken or removed pages.: Checks for favicon presence and correct link element configuration: Checks for appropriate disclaimers on sensitive content types such as medical, legal, financial, and affiliate pages: Validates FAQPage JSON-LD structured data for question-and-answer content: Validates that key pages receive adequate internal links from other site pages: Detects pages with no internal links pointing to them: Validates LocalBusiness schema for local SEO22 rules. Headers, transport, safe linking, and frontend security rules.
Browse Security on frontendchecklist.io
: Checks for HTML elements and CSS classes that would be hidden by common adblockers, causing layout breaks or missing functionality for users with ad blocking enabled.: Dependencies are regularly scanned for known security vulnerabilities using automated tooling, and critical findings are remediated before deployment.: An HTTPS page that loads resources over HTTP has mixed content — browsers block or warn about these requests, breaking functionality and undermining transport security.: Links and resources pointing to known tracking or advertising domains may be blocked by adblockers, breaking navigation and functionality for a significant portion of users.: Links that open in a new tab using target='_blank' must include rel='noopener noreferrer' to prevent the opened page from accessing the opener's window context.: A Content Security Policy is implemented to prevent XSS attacks and control resource loading.25 rules. Formats, responsive delivery, optimization, and media quality rules.
Browse Images on frontendchecklist.io
: All images are compressed without significant quality loss to reduce file sizes.: No images return 404 errors or display broken-image icons to users.: Broken images are handled gracefully with fallback images or placeholder content.: Images use srcset and sizes attributes for responsive delivery across devices.: Individual image files are compressed to reasonable sizes to avoid wasted bandwidth and slow load times, especially on mobile networks.: Images below the visible viewport use loading="lazy" to defer download until the user scrolls near them, reducing initial page load time.13 rules. Unit, integration, E2E, monitoring, and quality assurance rules.
Browse Testing on frontendchecklist.io
: Define measurable performance thresholds (bundle size, Lighthouse scores, Core Web Vitals) and fail CI builds automatically when they're exceeded.: Use mocks strategically to isolate units under test without over-mocking.: Consumer-driven contract tests (Pact) define and verify the API contracts between the frontend consumer and backend provider, catching integration mismatches before they reach production.: Use E2E testing frameworks like Playwright or Cypress to test critical user journeys.: Automate accessibility testing with tools like axe-core, jest-axe, or Playwright's accessibility testing.: A real-time error monitoring service captures, groups, and alerts on unhandled exceptions and promise rejections in production so issues are discovered before users report them.5 rules. Consent, tracking, retention, and user data rights rules.
Browse Privacy on frontendchecklist.io
: Third-party cookies set by external domains track users across sites without their knowledge. Modern browsers are phasing them out, and regulations like GDPR and CCPA require consent before setting them.: Limit data collection to only what is strictly required for the stated purpose, in line with GDPR Article 5(1)(c) data minimisation principles.: Provide users with a clear way to request deletion of their personal data, fulfilling GDPR Article 17 (right to erasure / right to be forgotten).: Websites that collect any personal data must publish a privacy policy and link to it prominently — this is a legal requirement under GDPR, CCPA, and most other privacy regulations.: Websites that set non-essential cookies must obtain prior, informed user consent under GDPR, CCPA, and similar privacy regulations before cookies are placed.5 rules. Localization, RTL, language handling, and translation workflow rules.
Browse Internationalization on frontendchecklist.io
: Hreflang tags indicate language and regional variations for multilingual sites.: Ensure that layouts use flexible sizing so that translated text — which can be 30–50% longer than English — does not overflow, clip, or break the UI.: Select the correct grammatical plural category for every language using Intl.PluralRules or an ICU-aware i18n library instead of simple singular/plural branching.: Format monetary values, numbers, and dates using the browser's built-in Intl.NumberFormat and Intl.DateTimeFormat APIs instead of manual string manipulation.: Default to abstract, culture-neutral icons and illustrations, and supply locale-specific image variants only when visual content carries meaning that differs across regions.| Area | Purpose |
|---|---|
apps/web | Public website, rule pages, checklists, and MCP HTTP entrypoints |
packages/content | Source MDX content for rules and checklists |
packages/mcp | MCP server and tool definitions |
packages/rules | Public rules package for external consumers |
packages/design-system | Shared UI primitives and custom components |
packages/auth, packages/data-layer, packages/schemas, packages/types | Shared auth, data, schema, and type infrastructure |
pnpm dev - Run local development taskspnpm build - Build all apps and packages with Turborepopnpm lint - Run Biome lintingpnpm typecheck - Run TypeScript checks across the repopnpm test - Run the test suitepnpm validate:rule-structure - Validate rule heading structurepnpm score:rules - Score the rule corpus against the quality gatepnpm generate:skills - Regenerate installable skills from the rulespnpm generate:readme - Regenerate the root README checklist and the generated catalog copyMost content work happens in packages/content/rules/en. A typical rule-editing flow is:
pnpm score:rules.pnpm validate:rule-structure.pnpm validate:sources when source metadata changes.pnpm generate:skills.pnpm generate:readme if rule titles or descriptions changed.See AGENTS.md, scripts/README.md, and docs/generated/rules-catalog.md for repo conventions, script docs, and the generated standalone catalog copy.
Thanks goes to these wonderful people (emoji key):
: Include a Web App Manifest (manifest.json) linked from the HTML head to enable Progressive Web App features like home screen installation, standalone display, and splash screens.: Prevent JavaScript from blocking HTML parsing by using defer, async, or type=module attributes on script tags so the browser can continue building the DOM while scripts download.: Custom elements must implement ARIA reflection via ElementInternals, keyboard interaction, and form association so that screen readers and assistive technologies can interpret them correctly.: File upload components are accessible with proper labels, file type restrictions, and progress feedback.: Pagination controls are accessible with proper ARIA labels, keyboard navigation, and current page indication.: Search functionality is accessible with proper input type, label, role, and autocomplete suggestions.: Videos have captions, audio descriptions, transcripts, pause controls, and avoid autoplay for users with hearing, vision, or cognitive impairments.: The web app satisfies the browser's minimum PWA installability requirements: a valid web app manifest, a registered service worker, HTTPS, and maskable icons.: A noscript tag provides fallback content for users with JavaScript disabled.: Unnecessary code, comments, and debug elements are removed before deploying to production.: The dir attribute is used for languages that read right-to-left (RTL) or mixed content.: The element must have a lang attribute with a valid BCP 47 language code so screen readers, translation tools, and search engines know the primary language of the page.: The viewport meta tag is declared correctly for responsive design.: HTML5 Semantic Elements are used appropriately (header, section, footer, main, article, aside...).: Set the correct type attribute on input elements to trigger the right mobile keyboard, enable browser validation, and improve autofill accuracy.: The HTML5 doctype declaration must appear as the first line of every HTML document to trigger standards mode rendering in all browsers.: Forms provide clear validation feedback with accessible error messages and proper ARIA attributes.: HTML markup is validated against W3C standards for cross-browser compatibility.: All CSS/SCSS files are linted with Stylelint to detect errors and enforce standards.: Non-critical CSS is loaded asynchronously to avoid blocking DOM rendering.: All CSS files are minified to reduce file size and improve page load performance.: Web fonts use modern formats (WOFF2, WOFF) with proper fallbacks and loading strategies.: All CSS files are loaded before JavaScript files to prevent render blocking.: Web pages must not require horizontal scrolling at standard viewport widths. Horizontal overflow breaks responsive layouts and makes content inaccessible to low-vision users who zoom in.: Ensure all interactive elements have a clearly visible focus indicator for keyboard navigation — never just remove the default outline without providing a better alternative.: Use @property to register CSS custom properties with a type, initial value, and inheritance control — enabling animation of custom properties and providing compile-time validation for design tokens.: Unused CSS is removed to reduce bundle size and improve performance.: Implement dark mode using the prefers-color-scheme media query and CSS custom properties so the site automatically adapts to the user's system preference.: Use the CSS :has() relational pseudo-class to select and style an element based on what it contains, replacing JavaScript DOM manipulation for many common styling scenarios.: CSS Cascade Layers (@layer) are used to give the codebase explicit, predictable control over specificity and cascade order, eliminating the need to fight specificity with !important.: A CSS reset or normalize is used to ensure consistent styling across browsers.: Adopt a consistent class naming methodology (BEM, CUBE CSS, or a team-agreed pattern) to make class names self-documenting and prevent style conflicts.: Use CSS container queries to make components respond to their own container's size rather than the viewport, enabling truly reusable responsive components.: Apply the contain property to components to tell the browser they are independent from the rest of the page, enabling rendering optimizations that reduce repaint and reflow scope.: Define design system values (colors, spacing, typography) as CSS custom properties on :root to enable consistent theming, dynamic updates, and dark mode support.: Use CSS Grid when you need to control both rows and columns simultaneously, such as page layouts, card grids, and complex component arrangements.: Use CSS logical properties (margin-inline, padding-block, border-inline-start) instead of physical properties (margin-left, padding-top) to support right-to-left languages automatically.: Use grid-template-columns: subgrid (or subgrid for rows) to make nested grid items participate in the parent grid's tracks, solving the card-content alignment problem without JavaScript height matching.: Colour values in the design system use oklch() or oklab() colour functions to produce perceptually uniform palettes where equal numeric steps produce equal perceived lightness changes.: Text must be large enough to read without zooming on mobile devices. Using relative units (rem/em) allows browser font size preferences to be respected.: Use rem, em, %, vw, vh, and clamp() instead of fixed px values to build layouts that scale with user font size preferences and viewport dimensions.: The View Transitions API is used to animate between page states or navigations with cross-fade or custom animations, providing a native-app quality transition without JavaScript animation libraries.: Animate with CSS transform and opacity properties to keep animations running on the GPU compositor thread at 60fps, avoiding layout-triggering properties like top, left, width, and height.: Use CORS correctly, validate message origins with postMessage, and understand the Same-Origin Policy to prevent cross-origin attacks.: Use try-catch blocks and error boundaries to gracefully handle errors in async operations and UI components.: JavaScript code is linted with ESLint to detect errors and enforce coding standards.: All JavaScript files are minified to reduce file size and improve loading performance.: Batch DOM reads and writes separately to avoid layout thrashing — the performance problem caused by alternating between reading and writing layout properties.: Avoid eval(), new Function(), setTimeout/setInterval with string arguments, and innerHTML with untrusted content — they execute arbitrary code and create critical XSS vulnerabilities.: Always wrap JSON.parse() in try/catch and validate the parsed structure before use, as invalid JSON or unexpected data shapes cause runtime errors.: Use block-scoped const and let declarations instead of function-scoped var to avoid hoisting bugs and unintended variable mutations.: Use spread operators, Object.assign, and array methods that return new values instead of mutating objects and arrays in place, to make data flow predictable and debugging easier.: Identify and avoid the most common JavaScript memory leak sources: forgotten event listeners, retained DOM references, closures holding large objects, and uncleared timers.: Remove or disable console.log, console.debug, and other console statements before deploying to production.: Use dynamic imports and route-based code splitting to break large bundles into smaller chunks that load on demand, reducing initial page load time.: Use native ES module syntax for imports and exports instead of CommonJS require() to enable static analysis, tree-shaking, and better tooling support.: Attach event listeners to stable parent elements rather than individual dynamic children to reduce memory usage and handle elements added to the DOM after page load.: Use the import type syntax for imports that are only needed as TypeScript types, ensuring they are fully erased at compile time with zero runtime cost.: Use ES2015+ array methods (map, filter, reduce, find, flatMap) and object methods (Object.entries, Object.fromEntries, structuredClone) for cleaner, more expressive code.: Break up tasks longer than 50 ms by yielding to the browser with scheduler.yield() or a MessageChannel fallback so that user input is never blocked.: Use localStorage and sessionStorage with proper serialization, error handling, and security awareness to avoid data corruption and storage quota errors.: Use Zod or Valibot to validate data from API responses, form inputs, localStorage, and environment variables — TypeScript types are erased at runtime and cannot protect against unexpected shapes.: Translation strings use message format patterns (ICU or similar) rather than string concatenation, and correctly handle pluralisation, gender, and variable interpolation.: Use modern HTTP protocols to enable request multiplexing and reduce network latency.: Compress text resources (HTML, CSS, JS) using Gzip or Brotli to reduce data transfer size.: Adjust Google Tag behavior based on user consent to comply with privacy regulations and maintain data insights.: Images and heavy resources below the fold are lazy loaded to improve initial performance.: Page fully loads in under 3 seconds on a standard connection.: Total page weight including all resources is under 1500KB (ideally under 500KB).: Defer JavaScript modules, widgets, and third-party code until the user signals intent through a click, focus, hover, or similar interaction.: Use viewport-aware loading to fetch components, embeds, and feature code shortly before they become visible instead of shipping them on first load.: Reduce the number and depth of dependent resource requests that block the initial rendering of the page.: Page maintains visual stability with a CLS score below 0.1, preventing unexpected content shifts during load.: HTTP requests are minimized by combining files, using sprites, and HTTP/2.: Keep individual CSS files small and remove unused styles to accelerate the critical rendering path.: First content renders within 1.8 seconds, providing quick visual feedback that the page is loading.: Configure Google Tag Manager efficiently to minimize its impact on page load speed and main-thread blocking.: Page responds to user interactions within 200ms, ensuring good responsiveness.: Checks for JavaScript files that exceed recommended size limits to ensure fast interaction: The largest content element loads within 2.5 seconds for a good user experience.: Pages avoid back/forward cache blockers such as unload listeners and restore state correctly when a browser resumes them from memory.: Load third-party scripts asynchronously to prevent blocking the main thread and improve page performance.: Use efficient font formats and loading strategies to prevent layout shifts and invisible text.: Conduct performance audits in a full browser environment to capture accurate runtime metrics and layout shifts.: When the network is unavailable, users are shown a custom offline fallback page rather than the browser's generic error screen.: Checks for source map availability and configuration to ensure easier debugging: Keep the DOM tree small and shallow to improve memory usage and rendering performance.: Measures and optimizes server response time (TTFB) to ensure a fast initial response: A service worker is registered to intercept network requests, cache critical assets, and enable offline functionality for your web application.: Detect and consolidate duplicate JavaScript libraries to reduce bundle size and prevent version conflicts.: Loading indicators provide feedback during asynchronous operations to keep users informed of progress.: Use HTTP chunked transfer encoding and React renderToPipeableStream (or ReadableStream) to begin delivering HTML to the browser as soon as the first bytes are available, reducing Time to First Byte and First Contentful Paint.: Static assets are served from a CDN for reduced latency and faster delivery.: The fetchpriority attribute is applied to critical images, scripts, and preload links to help the browser prioritise the most important resources and defer lower-priority ones.: Checks for preconnect hints to critical third-party origins to reduce connection latency: Implement preload, prefetch, and preconnect hints to optimize resource loading priority.: Detects JavaScript libraries and checks for known vulnerabilities: The Speculation Rules API is used to declaratively prefetch or prerender likely next pages, making navigation feel near-instant without the overhead of a full client-side router.: Render only the visible subset of rows or cards in large collections to reduce DOM size, memory usage, and scroll-time rendering work.: Real text is used instead of images containing text, except for logos or when specific visual presentation is essential.: Meta refresh redirects can disorient users and cause accessibility issues by refreshing the page unexpectedly.: Information already provided earlier in a multi-step flow is auto-populated or available for selection instead of being typed again.: Alternative text should not contain redundant words like 'image' or 'photo'.: Natural scroll behavior is preserved without custom scroll speeds, directions, or hijacked scroll events.: Instructions do not rely solely on sensory characteristics like color, shape, size, location, or sound.: Checks for deprecated or abstract ARIA roles to ensure long-term compatibility.: Tooltips are accessible to keyboard users and screen readers with proper ARIA attributes and focus handling.: Checks that data tables have proper headers: Ensures the document body is not set to aria-hidden, which would hide the entire page from screen readers.: All interactive elements are accessible via keyboard with logical focus order and hidden elements excluded from tab sequence.: Checks that accesskey values are unique to avoid shortcut conflicts.: Checks that input fields have accessible names so screen reader users know what data each field expects.: All ARIA attributes must be valid and exist in the WAI-ARIA specification.: Checks that elements with certain roles have required parent roles: Elements with certain ARIA roles must contain the required child roles or the widget structure will be broken for assistive technologies.: Content structure, instructions, and primary tasks remain understandable and operable when author CSS is disabled or replaced by user styles.: Checks that dialog elements have accessible names to orient screen reader users.: All heading elements (h1-h6) must have visible, descriptive content.: Links with the same text must point to the same destination or be distinguishable.: Tab focus order follows the visual layout and logical reading sequence of the page.: Checks that table headers have associated data cells: Checks that data tables have unique accessible names: All links contain accessible text content and do not lead to broken destinations.: Decorative images and visual elements are hidden from screen readers using aria-hidden or empty alt attributes.: Checks for bypass mechanisms for keyboard navigation: A skip navigation link is provided to allow keyboard users to bypass repetitive content and navigate directly to main content.: Checks that elements have required ARIA attributes for their roles: Sticky headers, footers, banners, and overlays must not fully hide the element that currently has keyboard focus.: When help or support mechanisms appear on multiple pages in the same flow, they stay in the same relative order so users can find them predictably.: Checks that td headers attribute references valid th ids: Heading levels should follow a sequential, hierarchical order.: Accordion components use proper ARIA attributes and keyboard interactions for screen reader accessibility.: Carousels and sliders are accessible with pause controls, keyboard navigation, and proper ARIA attributes.: Drag and drop interfaces provide keyboard alternatives and proper ARIA attributes for accessibility.: Links within blocks of text must be distinguishable from surrounding non-link text by more than color alone.: Modal dialogs are accessible with proper focus trapping, ARIA attributes, and keyboard dismissal.: Toast notifications and alerts are announced to screen readers using ARIA live regions and appropriate roles.: Tab components implement the ARIA tabs pattern with proper roles, states, and keyboard navigation.: Focus is programmatically managed during dynamic interactions like modals, page transitions, and content updates.: The lang and xml:lang attributes on the html element must have identical values to avoid conflicting language signals across HTML and XML parsers.: Text and background colors must have sufficient contrast to be readable by users with low vision or color blindness.: List item elements (li) must always be direct children of a list container (ul, ol, or menu) to maintain valid HTML structure and correct screen reader announcements.: Users are warned before session expiry, can extend time when appropriate, and can re-authenticate or resume work without losing entered data.: Content does not flash more than three times per second to prevent seizures in users with photosensitive epilepsy.: Authentication flows avoid unnecessary cognitive tests and support assistive mechanisms such as password managers, paste, OTP autofill, and passkeys.: Checks that interactive elements have accessible names for clear navigation.: Checks that command elements like buttons and links have accessible names for screen reader support.: All buttons must have a discernible, descriptive accessible name for screen readers.: Checks that meter elements have accessible names to provide context for measurements.: Checks that progressbar elements have accessible names: All <select> elements must have an associated label or an accessible name to be correctly identified by screen readers.: Checks that toggle fields (checkbox, radio, switch) have accessible names: Checks that tooltip elements have accessible names: All elements with role="treeitem" must have a descriptive accessible name so screen reader users can navigate hierarchical tree widgets.: Input elements of type='image' must have a descriptive alt attribute.: The <object> element must contain alternative content to ensure accessibility for users who cannot view the primary content.: Parallax scrolling effects have reduced-motion alternatives or can be disabled by users.: Videos with important visual content include audio descriptions that narrate visual information for blind users.: Prerecorded video with audio must have synchronized captions. Live video must have real-time captions. This is required by WCAG 2.1 SC 1.2.2 and SC 1.2.4.: Smooth scroll animations to anchor links respect motion preferences or provide an instant alternative.: Interactive elements must have large enough touch targets so users with motor impairments can activate them accurately on touchscreen devices.: iframes and frames must have a title attribute to describe their content.: Ensures aria-hidden elements do not contain focusable content to avoid "ghost" focus.: Animations respect user motion preferences, avoid seizure-triggering flashing, and include warnings for excessive motion.: Content and functionality work in both portrait and landscape unless a specific orientation is essential to the activity.: Content reflows when zoomed to 400% without requiring horizontal scrolling or loss of functionality.: Text can be resized up to 200% without loss of content or functionality using browser settings.: Pages must be tested with actual screen reader software (NVDA, JAWS, VoiceOver, TalkBack) to verify announcements, focus order, and widget behavior beyond what automated tools can detect.: Form fields should have exactly one associated element for maximum clarity.: Checks for appropriate tabindex values: Definition lists (<dl>) must only contain valid <dt> and <dd> elements.: Lists (ul, ol) should only contain list item elements (li) to ensure they are correctly interpreted by assistive technology.: Link text clearly describes the destination or purpose without relying on surrounding context.: Each page must have one and only one main landmark.: Content uses inclusive, non-discriminatory language that welcomes all users regardless of ability, gender, race, or background.: Proper landmark regions (main, nav, footer) help users navigate the page more efficiently.: Headings follow a sequential structure (h1 to h6) that reflects the content hierarchy without skipping levels.: Page navigation uses nav elements with proper ARIA labels to distinguish multiple navigation regions.: Checks that ARIA attributes are allowed on their elements to ensure valid accessibility trees.: Groups of related items use ul, ol, or dl elements so screen readers announce list context and item count.: Data tables use proper semantic markup with headers, captions, and scope attributes for screen reader accessibility.: All focusable or active elements must have a unique ID attribute.: IDs referenced by ARIA attributes must be unique to ensure correct accessibility relationships.: Checks for valid ARIA role values: Checks for valid values in ARIA attributes: Description terms (<dt>) and details (<dd>) must be contained within a <dl> element.: Content uses clear, simple language that is easy to understand for users with cognitive disabilities and non-native speakers.: Validates Organization schema for brand presence: Pages with no outgoing internal links, potentially trapping users and crawlers: Validates Product schema for e-commerce: Validates that pages include outgoing links to authoritative external sources where appropriate: Validates Review and AggregateRating schema on product, service, and business pages to enable star-rating rich results.: Checks for social sharing buttons on articles, blog posts, and other shareable content pages.: Schema.org structured data (JSON-LD) is implemented for rich search results.: Validates Twitter (X) Card meta tags for correct card type, image dimensions, and required fields.: Checks for VideoObject structured data on pages containing video content to enable video rich results in Google Search.: Lists and reviews all pages blocked from indexing to ensure critical content is accessible.: Detects and reviews content that appears to be primarily AI-generated to ensure quality.: Detects conflicting signals between robots.txt, meta robots, X-Robots-Tag headers, and canonical tags: Checks for duplicate meta descriptions across the site: Detects excessive keyword repetition in content, titles, or meta tags that signals manipulative SEO: Detects multi-hop redirect chains that waste crawl budget: Flags internal links with rel=nofollow: Detects pages preventing search engine snippets: Ensures that canonical tags point directly to the final destination URL without intermediate redirects.: Checks content length on key pages to identify thin content that may underperform in search results.: All links are tested and none are broken. Links redirect to intended destinations.: Checks for citations to reputable external websites to back up factual claims and build trust.: Checks for a dedicated contact page with multiple methods for users to reach out.: Checks for a dedicated about or company page with meaningful content.: An XML sitemap is available at /sitemap.xml and includes all important pages.: Checks for visible physical address information: Checks for visible author names on content pages to establish transparency and trust.: Detects links from HTTPS pages to HTTP destinations, which trigger mixed content warnings and lose ranking signals: Detects malformed, empty, or syntactically invalid link formats on the page: Ensures that the HTML document is well-formed with correctly nested and closed tags.: Detects and resolves external links that return error codes or have timed out.: Checks for geographic meta tags for local or regional targeting: Checks for author bios and credentials to establish expertise and trust.: Detects Your Money or Your Life (YMYL) content that is subject to Google's elevated E-E-A-T quality standards.: Uses structured data to provide machine-readable metadata about content authors.: Validates that articles use the correct Schema.org properties for improved search visibility.: Adds structured data to breadcrumb navigation for better site hierarchy and search appearance.: Checks for canonical-url, indexable pages that are missing from the XML sitemap.: Checks if URL slugs contain descriptive, keyword-relevant words instead of IDs, random strings, or vague terms.: Checks HTML document size against Googlebot crawl limits: Checks linked PDF sizes against Googlebot 60MB truncation limit: Checks for consistent Name, Address, Phone across site: Checks that the tag is unique across all pages of the site to avoid duplicate title SEO issues.
: Checks that all URLs in the sitemap belong to the same domain and protocol as the sitemap itself.: Checks URL length for optimal crawlability and usability: Validates sitemap XML structure against the sitemaps.org protocol, URL limits, and encoding requirements.: Checks for excessive URL parameters: Detects URLs that redirect and links pointing to redirects: Checks for links to the organization's social media profiles to help search engines connect the site to its social entity and build E-E-A-T signals.: Analyzes how well LLMs can parse and understand the content: Identifies important pages blocked from search engine indexing by noindex, robots.txt, or other directives: Detects meta tags incorrectly placed in document body: Detects Content-Type header mismatches with file extensions: Checks for noindexed pages listed in sitemap: Checks og:image meets recommended size (1200x630): Checks that og:url matches canonical URL: Validates Open Graph meta tags for social sharing: Ensures articles have a healthy balance of internal and external links relative to their length.: Checks for affiliate and sponsored content disclosures to maintain transparency.: Checks if robots.txt exists at the root, is accessible, and contains valid directives.: Checks for editorial and content policy pages that demonstrate site-wide trustworthiness: LLM-based content quality analysis for SEO: Offer an optional llms.txt index that points AI tools to high-value documentation pages and, when useful, a fuller llms-full.txt companion.: Detects and fixes internal links that return 404 or 5xx errors to improve user experience.: Detects pages blocked by robots.txt that also carry noindex meta tags, creating a paradox where the directive is never read.: Detects pages that carry rich result schema markup but are blocked from indexing via noindex or robots.txt.: Checks for properly structured service-area or location pages for businesses serving multiple geographic regions.: A canonical URL tag is present to prevent duplicate content issues.: Checks robots meta tag for valid indexing directives in the page head.: Checks for last-modified and published date signals that help Google assess content currency: Checks for published and modified dates on content pages: Checks for trust badges, certifications, client logos, testimonials, and social proof on high-conversion pages.: Ensures consistency between HTML rel="canonical" tags and HTTP Link canonical-url headers.: Validates that phone numbers use the tel: scheme and email addresses use the mailto: scheme for one-click contact on mobile devices.: Checks for problematic special characters in URL paths that can cause crawling, parsing, or canonicalization issues.: Flags common stop words in URL slugs that add length without improving keyword relevance.: Validates that each page has exactly one H1 tag containing a descriptive, keyword-relevant heading: Checks that paginated pages have proper canonicals: Checks for descriptive, keyword-rich anchor text that provides context for users and search engines.: Checks that URL slugs use hyphens as word separators, not underscores or spaces: Checks that URLs are lowercase: Checks for consistent trailing slash usage across all URLs to avoid duplicate content and canonicalization issues.: Validates JSON-LD structured data for syntax correctness, required properties, and schema.org compliance: Detects pages with very few dofollow internal links pointing to them, indicating poor link equity distribution and crawl discoverability.: Checks for WebSite schema with SearchAction to enable the Sitelinks Searchbox in Google Search results.: Validates page title presence and length: Validates meta description presence and length: Analyzes content readability using Flesch-Kincaid: Checks for exposed API keys, tokens, passwords, and other secrets embedded in HTML source, JavaScript bundles, or client-accessible files.: Websites offering services to users should publish Terms of Service and link to them from every page — this establishes the legal agreement governing use of the service.: Production error responses never include stack traces, internal file paths, framework internals, or other debugging detail that could aid an attacker (OWASP A09).: Public forms that accept user input without authentication must include bot protection to prevent spam, credential stuffing, and automated abuse.: All HTTP requests must be permanently redirected (301) to HTTPS to prevent users from accessing your site over an insecure connection.: Password fields implement security best practices including proper autocomplete, show/hide toggle, and strength indicators.: Every page and resource on your site must be delivered over HTTPS to protect user data in transit and enable modern browser features.: The Permissions-Policy header lets servers restrict which browser features (camera, microphone, geolocation, etc.) can be used in a page or its embedded iframes.: The Referrer-Policy header controls how much referrer information is sent when navigating from your site to another, protecting user privacy and preventing leaking sensitive URL parameters.: The Strict-Transport-Security response header tells browsers to always use HTTPS for your domain, preventing protocol downgrade attacks and cookie hijacking.: The X-Frame-Options header controls whether your page can be embedded in an iframe, frame, or object — preventing clickjacking attacks.: All session and authentication cookies are issued with the Secure, HttpOnly, and an appropriate SameSite flag to prevent interception, JavaScript exfiltration, and cross-site request forgery.: The X-Content-Type-Options: nosniff header prevents browsers from MIME-sniffing a response away from the declared Content-Type, blocking a class of drive-by download and XSS attacks.: Sensitive authentication tokens are stored in httpOnly cookies rather than localStorage or sessionStorage to prevent theft via cross-site scripting attacks (OWASP A07).: All HTML form actions must point to HTTPS URLs to ensure form data is encrypted in transit and cannot be intercepted by network attackers.: Sensitive or high-capability applications use COOP, COEP, and CORP deliberately, audit third-party embeds, and verify cross-origin isolation in the browser before relying on it.: All images are compressed and metadata-stripped before deployment, removing unnecessary bytes without visible quality loss.: Images are optimized with appropriate formats, compression, and modern techniques.: SVG files are optimized with SVGO to remove unnecessary metadata and reduce size.: Hero and above-the-fold images are preloaded with high fetch priority for LCP.: Every informative image has a descriptive alt attribute; decorative images use alt="" to be ignored by screen readers.: Images are not significantly larger than their display dimensions—serving a 2000px image for a 400px container wastes bandwidth and hurts LCP.: Images are served from a CDN with automatic optimization, resizing, and format conversion.: All elements have explicit width and height attributes so browsers can reserve space before the image loads, preventing layout shift.: High-resolution images (2x, 3x) are provided for retina and high-DPI displays.: Images with visible captions are wrapped in with a child, creating a semantic association between image and caption.: Every : Images support AVIF format for superior compression with proper browser fallbacks.: Image filenames are descriptive and human-readable, using lowercase letters, hyphens as separators, and meaningful words that reflect the image content.: Small images and icons use sprites or SVG to reduce HTTP requests.: Images are served in modern formats (WebP or AVIF) instead of legacy JPEG/PNG where browser support allows, reducing file size without visible quality loss.: JPEG images use progressive format for better perceived loading performance.: Images wider than 100px use the srcset attribute to offer multiple resolution variants, letting the browser download the optimal size for the user's viewport and device pixel ratio.: Images are served in WebP format with fallbacks for older browsers.: Set and enforce minimum code coverage thresholds to ensure adequate test coverage.: Website works correctly across major browsers (Chrome, Firefox, Safari, Edge).: Verify your application on real mobile devices and browser DevTools device emulation to catch touch interaction issues, viewport bugs, and mobile-specific rendering problems.: Run Stryker mutation testing on critical business logic to verify that your test suite will actually catch real bugs, not just achieve line coverage.: Capture screenshots of components and pages, then automatically compare them against approved baselines to detect unintended visual changes before they reach production.: Test how multiple units of code work together — API routes with their database queries, form submissions with validation, and component trees with their state management.: Critical functionality has unit tests with good coverage for reliability.