Front-End Checklist

The Front-End Checklist provides a set of actionable rules to ensure web applications are accessible, performant, and user-friendly. The rules are categorized by priority levels to help developers focus on critical issues first.

Priority Levels

• Critical: Essential for preventing harm (e.g., seizures) or ensuring basic usability (e.g., heading hierarchy, zoom reflow).
• High: Important for significant user groups (e.g., screen reader users, users with motor impairments).
• Medium: Enhances usability and provides better context (e.g., ARIA names for specific elements).
• Low: Minor improvements or preference-based options (e.g., smooth scroll).

Key Accessibility Rule Categories

Visual & Motion

• Prevent seizure-triggering flashing content: Content must not flash more than three times per second.
• Respect reduced motion preferences: Animations should respect user motion preferences and avoid excessive motion.
• Provide alternatives to parallax effects: Parallax effects must have reduced-motion alternatives.

Screen Reader & Semantic Markup

• Provide accessible names: Ensure buttons, interactive elements, <select> elements, tooltips, and ARIA command elements have discernible names.
• Use semantic HTML: Use correct structures for lists (<ul>, <ol>, <dl>), tables, and landmarks (<main>, <nav>, <footer>).
• Heading Hierarchy: Use a logical, sequential structure (h1 through h6).
• ARIA Integrity: Use only allowed ARIA attributes for specific roles and ensure IDs used for ARIA references are unique.

Content & Interaction

• Text Resizing & Reflow: Support text resizing up to 200% and ensure content reflows at 400% zoom without horizontal scrolling.
• Touch Targets: Ensure interactive elements are large enough for touchscreen users.
• Inclusive Language: Use non-discriminatory and plain language.

The Front-End Checklist is organized into several key technical categories. You can use these categories to audit specific aspects of your web application. The available categories include:

• HTML: Semantic markup, metadata, forms, and document structure.
• CSS: Layout, typography, responsive design, and styling.
• JavaScript: Logic, interactivity, and language features.
• Performance: Loading speeds, resource optimization, and runtime efficiency.
• Accessibility: Compliance with standards for users with disabilities.
• SEO: Search engine optimization and discoverability.
• Security: Protection against common web vulnerabilities.
• Images: Optimization, formats, and responsive image handling.
• Testing: Unit, integration, and end-to-end testing practices.
• Privacy: Data handling and user privacy compliance.
• Internationalization: Support for multiple languages and locales (i18n).

For a full, interactive experience, you can browse the complete ruleset at frontendchecklist.io.

To prevent bugs related to shared state and to enable features like time-travel debugging and efficient change detection (via reference comparison), avoid mutating objects or arrays in place. Instead, treat data as immutable by creating new copies whenever a change is required.

Implementation Guidelines

• Objects and Arrays: Use the spread operator (...) to create modified copies rather than direct assignment.
• Array Transformations: Prefer non-mutating methods like map(), filter(), and reduce() over mutating methods like push(), splice(), or direct index assignment.
• Configuration: Use Object.freeze() for configuration objects that must remain constant throughout the application lifecycle.
• State Management: Immutability is critical when working with state management libraries such as Redux, Zustand, or Signals to ensure the framework can detect changes via reference equality.

Text images are acceptable in the following specific scenarios, provided they are handled correctly:

1. Logos: Use an alt attribute that contains the company name.
2. Purely Decorative Text: Use alt="" and role="presentation" for ornamental calligraphy that provides no semantic value.
3. Screenshots for Documentation: Use a <figure> with an <img> and a <figcaption> to describe the content of the screenshot.
4. Complex Layouts: If an image contains complex text layouts (like a menu), wrap it in a div with role="img" and an aria-label containing the text content.

<!-- ✅ OK: Logo with company name -->
<img src="logo.png" alt="Acme Corporation">

<!-- ✅ OK: Decorative calligraphy that's purely visual -->
<img src="ornamental-text.png" alt="" role="presentation">

<!-- ✅ OK: Screenshot showing text (for documentation) -->
<figure>
  <img src="error-screenshot.png" alt="Error message showing 'File not found'">
  <figcaption>The error message appears when the file is missing.</figcaption>
</figure>

<!-- For complex text layouts -->
<div role="img" aria-label="Menu: Appetizers $8-12, Entrees $18-25, Desserts $6-9">
  <img src="menu-design.png" alt="">
</div>

To achieve smooth 60fps animations, use transform and opacity properties. These are 'compositor-only' properties that allow the browser to skip the Style, Layout, and Paint steps of the rendering pipeline, running the animation directly on the GPU compositor thread. This prevents animations from competing with JavaScript on the main thread.

Property Categories

• Compositor-only (Optimal): transform (translate, scale, rotate, skew), opacity, filter (on composited layers).
• Paint-triggering (Acceptable, but not ideal): color, background-color, box-shadow, border-color, outline, text-shadow.
• Layout-triggering (Avoid animating): width, height, margin, padding, top, left, right, bottom, border-width, font-size, display, position.

/* Compositor-only properties (optimal for animation) */
/* transform (translate, scale, rotate, skew) */
/* opacity */
/* filter (on composited layers) */