Standards in this Framework
| Standard | Description |
|---|---|
| 1.1.1A | Place the HTML5 declaration <!DOCTYPE html> at the very top of every page. |
| 1.1.1B | Use a single root <html lang="…"> element that wraps all content, with language set appropriately. |
| 1.1.1C | Include a <head> section for metadata (character encoding, viewport, title) and a <body> for visible content. |
| 1.1.1D | Ensure the basic skeleton is correctly ordered and closed to avoid quirks mode and parsing errors. |
| 1.1.2A | Set character encoding and viewport: <meta charset="utf-8">, <meta name="viewport" content="width=device-width, initial-scale=1">. |
| 1.1.2B | Provide a concise, unique <title> and a descriptive <meta name="description"> for search and sharing. |
| 1.1.2C | Add social preview metadata, favicons, and <meta name="robots"> directives when needed. |
| 1.1.2D | Keep metadata inside <head> only; avoid deprecated or duplicate tags. |
| 1.1.3A | Use proper nesting and close all non-void elements; quote attribute values and avoid duplicate IDs. |
| 1.1.3B | Prefer semantic, standards-compliant elements; avoid obsolete tags and inline presentation. |
| 1.1.3C | Escape special characters (&, <, >) where required. |
| 1.2.1A | Use <header> for introductory or navigational content and <nav> for primary sets of links. |
| 1.2.1B | Structure pages with <main> (one per page), grouping related content with <section> and standalone pieces with <article>. |
| 1.2.1C | Complement with <aside> for tangential content and <footer> for page or section endings. |
| 1.2.2A | Reserve <table> for tabular data; include <caption>, <thead>, <tbody>, <tfoot>, and scope on <th>. |
| 1.2.2B | Use <ul>/<ol> with <li> for lists and <dl>, <dt>, <dd> for term-definition pairs. |
| 1.2.2C | Write text in <p> paragraphs and avoid using tables or multiple <br> for layout or spacing. |
| 1.2.3A | Use a logical heading hierarchy (<h1> to <h6>), typically one <h1> per page. |
| 1.2.3B | Apply <hr> for thematic shifts between sections and <br> for meaningful single line breaks (e.g., addresses, poetry). |
| 1.3.1A | Provide informative alt text for images; use width/height to reduce layout shift and srcset/sizes for responsiveness. |
| 1.3.1B | Wrap media in <figure> with <figcaption> when a caption is needed. |
| 1.3.1C | Enable controls for <video>/<audio>, add captions/subtitles via <track kind="captions">, and provide fallback text. |
| 1.3.1D | Use appropriate loading strategies (e.g., loading="lazy" for images) and consider performance of media assets. |
| 1.3.2A | Include a descriptive title attribute for <iframe> content and allow fullscreen where appropriate. |
| 1.3.2B | Apply security-related attributes like sandbox and referrerpolicy as needed. |
| 1.3.2C | Make embeds responsive using CSS (e.g., aspect-ratio or a wrapper that preserves proportions). |
| 1.3.3A | Choose appropriate native controls – <input> (e.g., email, number, date, file), <select>/<option>/<optgroup>, <textarea>, and <button type="submit|reset|button"> – with meaningful name and id attributes. |
| 1.3.3B | Use <datalist> for suggestions and <output> for computed values. |
| 1.3.3C | Associate each control with a <label> (via for/id or by wrapping), group related fields with <fieldset> and a descriptive <legend>, and link help/error text using aria-describedby. |
| 1.3.3D | Configure the <form> with the appropriate method (GET for idempotent queries, POST for data changes), action, and enctype (e.g., multipart/form-data for file uploads); set autocomplete and use novalidate only when justified. |
| 1.3.3E | Leverage native HTML5 constraints (required, pattern, min, max, step, minlength/maxlength, multiple) and entry aids (inputmode, placeholder) to improve data integrity without scripting. |
| 1.3.4A | Use clear, descriptive link text within <a href>. |
| 1.3.4B | Organize site navigation with lists inside <nav>, add breadcrumb and skip links where appropriate. |
| 1.3.4C | Use meaningful and human-readable URLs. |
| 1.3.4D | Use relative and absolute links appropriately. |
| 1.3.4E | Apply rel="noopener noreferrer" when using target="_blank" to improve security and performance. |
| 2.1.1A | Write valid declarations using the pattern selector { property: value; } and end each rule with a semicolon. |
| 2.1.1B | Use common selectors (type, class, ID, attribute, pseudo-classes, pseudo-elements) appropriately and avoid overly broad matches. |
| 2.1.1C | Apply core properties for the Box Model, typography, colors, and sizing with consistent units (rem, em, %, px). |
| 2.1.2A | Explain how source order, specificity, and !important determine the final computed style. |
| 2.1.2B | Calculate specificity for compound selectors and reduce it when possible to prevent conflicts. |
| 2.1.2C | Leverage inheritance for text properties and override intentionally with explicit rules. |
| 2.1.2D | Adopt naming conventions (e.g., BEM) to minimize collisions and improve predictability. |
| 2.1.3A | Style text with font families, sizes, weights, line heights, and spacing for readability. |
| 2.1.3B | Control colors, backgrounds, borders, and basic spacing using margin and padding. |
| 2.1.3C | Use the Box Model intentionally, including box-sizing: border-box; for layout consistency. |
| 2.1.3D | Create simple utility classes for common patterns (e.g., visually hidden, text centering). |
| 2.2.1A | Control display contexts with display, intrinsic sizing, overflow, and aspect ratio. |
| 2.2.1B | Use modern sizing and spacing techniques (min(), max(), clamp(), logical properties) for responsive designs. |
| 2.2.1C | Enhance presentation with shadows, rounded corners, filters, and blend modes judiciously. |
| 2.2.1D | Apply custom properties (CSS variables) to centralize design tokens and reduce repetition. |
| 2.2.2A | Create smooth state changes with transition on opacity, transform, and color. |
| 2.2.2B | Animate with @keyframes and animation while preserving accessibility and performance. |
| 2.2.2C | Use transform (translate, scale, rotate) and will-change when appropriate to improve rendering. |
| 2.2.2D | Respect user preferences such as prefers-reduced-motion to reduce motion effects. |
| 2.2.3A | Differentiate between static, relative, absolute, fixed, and sticky positioning. |
| 2.2.3B | Use offsets (top, right, bottom, left) intentionally and understand containing blocks. |
| 2.2.3C | Manage stacking contexts and z-index to resolve overlap predictably. |
| 2.3.1A | Include framework CSS correctly and use the grid system, utilities, and components as designed. |
| 2.3.1B | Override framework styles with minimal, scoped additions to preserve upgradability. |
| 2.3.1C | Customize themes via variables/tokens and build steps when available. |
| 2.3.2A | Organize styles into partials and use imports to structure large codebases. |
| 2.3.2B | Use variables, nesting, mixins, and functions to encapsulate reusable patterns. |
| 2.3.2C | Leverage extends/placeholders carefully to avoid unintended selector bloat. |
| 2.3.2D | Configure build pipelines to compile, autoprefix, and generate source maps. |
| 2.3.3A | Minify and concatenate assets, employ HTTP caching, and defer noncritical CSS (e.g., critical CSS inlining). |
| 2.3.3B | Reduce unused CSS with audits, pruning, and tree-shaking tools where safe. |
| 2.3.3C | Limit selector complexity and depth to improve rendering performance. |
| 3.1.1A | Link external CSS with <link rel="stylesheet" href="css/styles.css" media="all"> placed in <head>, and order files from base to components to utilities. |
| 3.1.1B | Embed internal CSS with a single <style> block in <head> for page-specific rules or prototypes. |
| 3.1.1C | Understand precedence: inline > internal/external (by source order) > user agent, with specificity and !important further affecting the cascade. |
| 3.1.1D | Use media queries on links (e.g., media="print") and prefer external files for caching and maintainability. |
| 3.1.2A | Reserve inline styles for one-off overrides, email templates, or dynamic values injected by scripts. |
| 3.1.2B | Recognize that inline styles increase specificity, can hinder reuse, and complicate theming. |
| 3.1.2C | Avoid overusing style="" and prefer utility classes or tokens for consistency. |
| 3.1.2D | Remove temporary inline styles during refactors to restore a clean cascade. |
| 3.1.3A | Adopt naming conventions (e.g., BEM) and design tokens (CSS custom properties) to standardize decisions. |
| 3.1.3B | Reduce specificity by favoring class selectors over IDs and deep descendants. |
| 3.1.3C | Establish a layered stylesheet order (base → layout → components → utilities) to control overrides. |
| 3.1.3D | Avoid !important except for utilities or accessibility fixes, and document any use clearly. |
| 3.1.4A | Organize assets into predictable folders such as /css, /js, /img, /fonts, and /assets. |
| 3.1.4B | Use relative paths consistently (e.g., href="../css/app.css") and avoid fragile deep nesting. |
| 3.1.4C | Separate source and build outputs (e.g., /src and /dist) when using tooling. |
| 3.1.4D | Document path conventions and entry points (e.g., index.html) for team consistency. |
| 3.2.1A | Lay out forms with CSS Grid or Flexbox, align labels and inputs, use gap for spacing, and let fields wrap on small screens. |
| 3.2.1B | Keep forms readable with consistent typography and spacing; avoid fixed heights and prefer low-specificity class selectors. |
| 3.2.1C | Reuse styles with CSS custom properties for colors, spacing, and font sizes. |
| 3.2.2A | Use native HTML5 validation first; add small scripts only to prevent submit and show clear messages when needed. |
| 3.2.2B | Show errors near fields and style :invalid/:valid states without causing layout shift. |
| 3.2.2C | Move focus to the first error and announce a brief summary via an aria-live or role="alert" region. |
| 3.2.3A | Use semantic controls (buttons for actions, links for navigation) and clear visual states (:hover, :focus-visible, :disabled). |
| 3.2.3B | Ensure full keyboard access with a logical tab order and a visible focus indicator; avoid hover-only interactions. |
| 3.2.3C | Provide comfortable touch targets and sufficient contrast, and keep motion subtle while respecting @media (prefers-reduced-motion). |
| 3.3.1A | Run documents through HTML and CSS validators to catch syntax issues early. |
| 3.3.1B | Confirm correct doctype, character encoding, and closing/nesting of elements. |
| 3.3.1C | Use autoprefixing and linting tools to improve cross-browser robustness and consistency. |
| 3.3.2A | Inspect computed styles and specificity to identify the winning rule and unintended overrides. |
| 3.3.2B | Simplify or restructure selectors, reduce depth, and reorder files to resolve conflicts. |
| 3.3.2C | Replace !important with proper architecture and utilities where possible. |
| 3.3.2D | Test across breakpoints and themes to ensure fixes do not create regressions. |
| 3.3.3A | Leverage the Elements panel to edit rules live, toggle properties, and examine the Box Model. |
| 3.3.3B | Use layout overlays, grid/flex inspectors, and responsive design mode to diagnose layout problems. |
| 3.3.3C | Profile rendering and paint events when animating or handling large DOM trees. |
| 3.3.3D | Persist fixes back to source files and commit with clear, focused messages. |
| 4.1.1A | Adopt a mobile-first approach, then layer breakpoints with media queries such as @media (min-width: 640px). |
| 4.1.1B | Build fluid grids using percentages, fr units, and functions like min(), max(), and clamp(). |
| 4.1.1C | Make images flexible with max-width: 100%;, and serve responsive sources using srcset and sizes. |
| 4.1.1D | Use consistent spacing scales and type scales that adapt across breakpoints. |
| 4.1.2A | Set the viewport meta tag for proper scaling: <meta name="viewport" content="width=device-width, initial-scale=1">. |
| 4.1.2B | Provide touch-friendly targets (about 44×44 px), adequate spacing, and clear focus states. |
| 4.1.2C | Avoid hover-only interactions; offer visible toggles and keyboard-accessible controls. |
| 4.2.1A | Use Flexbox for one-dimensional alignment, gap management, and content reordering when appropriate. |
| 4.2.1B | Use CSS Grid for two-dimensional layouts with grid-template, auto-fit/auto-fill, and minmax(). |
| 4.2.1C | Leverage gap instead of margins for clean, consistent spacing between items. |
| 4.2.1D | Combine grid areas and utility classes to keep markup semantic and styles maintainable. |
| 4.2.2A | Test across common breakpoints using responsive design tools and real devices. |
| 4.2.2B | Apply progressive enhancement and feature queries with @supports for fallbacks. |
| 4.2.2C | Prevent overflow and layout shifts by setting intrinsic sizes and using content wrapping wisely. |
| 4.2.2D | Use autoprefixing and conservative CSS features where necessary to support older browsers. |
| 4.3.1A | Enable native lazy loading with loading="lazy" and defer non-critical assets. |
| 4.3.1B | Serve optimized images (correct dimensions, compression, and modern formats like WebP/AVIF). |
| 4.3.1C | Minify and bundle CSS, and inline critical CSS for faster first paint. |
| 4.3.1D | Leverage caching, preconnect/preload hints, and a performance budget to maintain speed. |
| 5.1.1A | Provide text alternatives for non-text content with informative alt text, captions, and transcripts, and use semantic landmarks like <main>, <nav>, and <footer>. |
| 5.1.1B | Ensure keyboard navigation and visible focus, manage focus order, and offer skip links for bypassing repetitive content. |
| 5.1.1C | Meet color-contrast guidelines (e.g., 4.5:1 for body text) and do not convey meaning with color alone. |
| 5.1.1D | Associate labels with form controls, provide clear error messages via aria-live, and respect motion preferences with @media (prefers-reduced-motion). |
| 5.1.2A | Design clear information architecture with descriptive labels, consistent navigation, and breadcrumbs where appropriate. |
| 5.1.2B | Use readable typography, adequate spacing, and scannable headings to improve comprehension. |
| 5.1.2C | Provide predictable interactions, helpful empty states, and clear feedback for loading, success, and errors. |
| 5.1.2D | Conduct lightweight usability reviews or tests and iterate based on observed friction points. |
| 5.2.1A | Separate structure, presentation, and behavior by keeping HTML semantic, CSS modular, and JavaScript focused on interactions. |
| 5.2.1B | Adopt reusable components, design tokens (CSS custom properties), and naming conventions (e.g., BEM) for consistency. |
| 5.2.1C | Organize files into predictable folders, document conventions, and use version control with clear commit messages. |
| 5.2.2A | Validate HTML and CSS, and audit accessibility, internationalization, and print styles. |
| 5.2.2B | Define a browser/device support matrix and use feature queries (@supports) and progressive enhancement for fallbacks. |
| 5.2.2C | Measure core performance metrics (e.g., LCP, CLS, INP) and maintain a performance budget. |
| 5.3.1A | Write unique, descriptive <title> and <meta name="description"> tags and use a logical heading hierarchy. |
| 5.3.1B | Use semantic HTML, internal linking with descriptive anchor text, and meaningful image alt attributes. |
| 5.3.1C | Provide sitemaps and robots directives, use canonical URLs, and consider structured data where appropriate. |
| 5.3.1D | Improve technical SEO with fast loading, mobile-friendly design, and stable layouts. |
| 5.3.2A | Define KPIs and events that reflect business goals (e.g., sign-ups, purchases, or task completion). |
| 5.3.2B | Implement pageview and event tracking with clear naming, parameters, and UTM conventions for campaigns. |
| 5.3.2C | Segment reports by channel, device, geography, and cohort to identify patterns and opportunities. |
| 5.3.2D | Respect privacy and consent requirements, anonymize data where needed, and iterate based on insights. |
