Standards in this Framework
| Standard | Description |
|---|---|
| 1.1.1A | Place <!DOCTYPE html> at the top to ensure standards mode and predictable rendering. |
| 1.1.1B | Wrap all content in a single element with appropriate language. |
| 1.1.1C | Separate metadata in <head> (e.g., <meta charset="utf-8">, title) from content in <body>. |
| 1.2.1A | Differentiate default layout behavior: block elements create new lines; inline elements flow within text. |
| 1.2.1B | Recognize common examples (block: <div>, <p>; inline: <span>, <a>) and choose based on meaning. |
| 1.3.1A | Escape reserved characters with entities such as &, <, >, ", '. |
| 1.3.1B | Use non-breaking space only when needed; prefer CSS for spacing. |
| 1.3.1C | Ensure entities render correctly across encodings and user agents. |
| 1.3.2A | Specify UTF-8 early in <head> with <meta charset="utf-8"> to avoid mojibake. |
| 1.3.2B | Keep editor, server, and document encodings consistent to prevent corruption. |
| 1.3.2C | Test pages with multilingual content and special symbols. |
| 1.4.1A | Use <!-- comment --> to explain structure or intent without affecting layout. |
| 1.4.1B | Avoid exposing secrets, credentials, or debug notes in shipped HTML. |
| 1.4.1C | Keep comments concise and relevant to future maintenance. |
| 1.5.1A | Provide a unique, descriptive <title> per page for usability and SEO |
| 1.5.1B | Place metadata, icons, and styles in <head>; present page content within <body>. |
| 1.5.1C | Validate the basic skeleton to avoid parsing and rendering issues. |
| 2.1.1A | Use semantic emphasis (<strong>, <em>) to convey meaning, not just style. |
| 2.1.1B | Apply <del>, <u>, <mark>, <sup>, <sub> where appropriate and avoid overuse. |
| 2.1.1C | Style the visual appearance with CSS rather than misusing tags. |
| 2.2.1A | Create a logical outline with a single page-level <h1> and nested headings. |
| 2.2.1B | Use headings to label sections for screen readers and in-page navigation. |
| 2.2.1C | Avoid skipping levels purely for visual size; use CSS for sizing. |
| 2.2.2A | Wrap each idea in a distinct <p> and avoid empty paragraphs for spacing. |
| 2.2.2B | Control flow and spacing with CSS rather than multiple <br> tags. |
| 2.2.2C | Use inline semantics for quotes, code, and emphasis within paragraphs. |
| 2.2.3A | Insert <br> for meaningful single line breaks (e.g., addresses, poetry), not layout. |
| 2.2.3B | Use <hr> to indicate thematic shifts between sections. |
| 2.2.3C | Prefer CSS margins and borders for visual spacing. |
| 2.3.1A | Mark long quotations with <blockquote> and inline quotes with <q>. |
| 2.3.1B | Provide sources with <cite> and expansions with <abbr title="…" >. |
| 2.3.1C | Retain quotation punctuation as content, not styling. |
| 2.3.2A | Wrap code fragments with <code> and preserve whitespace with <pre> when needed. |
| 2.3.2B | Indicate user input with <kbd> and program output with <samp>. |
| 2.4.1A | Choose list types that reflect meaning and keep nesting clear and minimal. |
| 2.4.1B | Use <dl> with paired <dt>/<dd> for term-definition content. |
| 2.4.2A | Use <table> for data, add <caption>, and group rows with <thead>, <tbody>, <tfoot>. |
| 2.4.2B | Provide header scope via <th scope="col|row"> and merge cells with colspan/rowspan sparingly. |
| 3.1.1A | Provide informative alt text or empty alt for decorative images. |
| 3.1.1B | Use srcset/sizes and intrinsic width/height to improve responsiveness and stability. |
| 3.1.1C | Consider lazy loading with loading="lazy" for non-critical images. |
| 3.2.1A | Use clear, descriptive link text and valid href values (e.g., mailto:, tel:). |
| 3.2.1B | Open new windows sparingly and add rel="noopener noreferrer" with target="_blank". |
| 3.2.1C | Provide anchor links for in-page navigation and skip links for accessibility. |
| 3.3.1A | Include controls and provide multiple <source> formats for compatibility. |
| 3.3.1B | Add captions/subtitles via <track kind="captions"> and a poster for video. |
| 3.3.1C | Size media responsively and avoid autoplay unless essential and muted. |
| 3.4.1A | Define accurate coordinates and meaningful alt/aria-label for clickable regions. |
| 3.4.1B | Ensure keyboard accessibility and provide text alternatives for regions. |
| 3.4.1C | Test image maps across devices and resolutions. |
| 3.5.1A | Wrap related visuals in <figure> with a concise <figcaption>. |
| 3.5.1B | Keep captions close to media for context and accessibility. |
| 3.6.1A | Provide a descriptive title and consider security attributes like sandbox and referrerpolicy. |
| 3.6.1B | Maintain aspect ratio responsively via CSS or the aspect-ratio property. |
| 3.6.1C | Defer non-critical iframes and avoid performance bottlenecks. |
| 3.7.1A | Wrap images or icons in <a> with clear alternative text describing the destination. |
| 3.7.1B | Provide focus styles and large tap targets for linked media. |
| 3.7.1C | Ensure linked media is distinguishable from decorative content. |
| 3.8.1A | Link appropriate icon formats and sizes in <head> (e.g., ico, png, svg). |
| 3.8.1B | Provide a web app manifest where applicable. |
| 3.8.1C | Verify appearance in tabs, pinned tiles, and bookmarks. |
| 4.1.1A | Choose appropriate controls (input, textarea, button) and types (text, email, url, number, password, checkbox, radio, submit, reset). |
| 4.1.1B | Assign meaningful name/id values and associate labels for accessibility. |
| 4.1.1C | Provide helpful placeholders and helper text without replacing proper labels. |
| 4.1.2A | Use GET for idempotent queries and bookmarkable results |
| 4.1.2B | Use POST for data creation or changes. |
| 4.1.2C | Set action, choose enctype when needed (e.g., file uploads), and consider autocomplete. |
| 4.1.2D | Handle server responses and errors gracefully. |
| 4.1.3A | Group related inputs within <fieldset> and label groups with a clear <legend>. |
| 4.1.3B | Apply attributes such as value, placeholder, disabled, and readonly appropriately. |
| 4.1.4A | Leverage built-in constraints (required, min, max, maxlength, pattern, step) before scripting. |
| 4.1.4B | Provide clear inline messages and preserve user input on errors. |
| 4.1.4C | Respect user privacy and avoid exposing sensitive data in URLs. |
| 4.1.5A | Group related options with <optgroup> and provide a meaningful default. |
| 4.1.5B | Use multiple and size attributes when appropriate and ensure keyboard operability. |
| 4.1.5C | Pair selects with labels and helper text for clarity. |
| 4.2.1A | Embed small page-specific rules in <style> and reserve inline styles for one-off overrides. |
| 4.2.1B | Prefer external stylesheets for reuse, caching, and maintainability. |
| 4.2.1C | Keep specificity low and avoid overusing !important. |
| 4.2.2A | Use classes for reusable patterns and IDs for unique elements that require anchors or scripting. |
| 4.2.2B | Avoid styling by ID alone; prefer class-based selectors for flexibility. |
| 4.2.2C | Adopt consistent naming conventions. |
| 4.3.1A | Set readable typography (family, size, weight, line height) and establish a type scale. |
| 4.3.1B | Apply color and background color with sufficient contrast for accessibility. |
| 4.3.1C | Use CSS custom properties to centralize tokens for color and typography. |
| 4.3.2A | Use <span> for inline semantics and <div> for block-level grouping when no semantic element fits. |
| 4.3.2B | Prefer semantic HTML5 elements over generic containers when meaning exists. |
| 4.3.2C | Keep markup lean and avoid unnecessary wrappers. |
| 4.3.3A | Control spacing with the box model and consider box-sizing: border-box; for predictable layouts. |
| 4.3.3B | Use logical properties (e.g., margin-inline, padding-block) for internationalization. |
| 4.3.3C | Apply consistent spacing scales to improve rhythm and maintainability. |
| 5.1.1A | Apply POUR principles (Perceivable, Operable, Understandable, Robust) to content and UI. |
| 5.1.1B | Provide alternatives, keyboard access, visible focus, and sufficient contrast. |
| 5.1.1C | Document accessibility acceptance criteria during development. |
| 5.1.2A | Use ARIA to enhance semantics only when native elements cannot express behavior. |
| 5.1.2B | Apply roles and states (e.g., role="dialog", aria-expanded, aria-hidden) correctly and update them dynamically. |
| 5.2.1A | Organize documents with <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>. |
| 5.2.1B | Provide skip links and landmark regions for efficient navigation. |
| 5.2.1C | Pair structure with headings for a clear document outline. |
| 5.3.1A | Annotate content with microdata. |
| 5.3.1B | Use consistent properties (e.g., itemprop, itemscope) and validate structured data. |
| 5.3.1C | Consider microformats when required by legacy tools or contexts. |
| 5.4.1A | Request location via the Geolocation API with explicit user consent and graceful fallbacks. |
| 5.4.1B | Store small key-value data with localStorage/sessionStorage and handle quota and privacy. |
| 5.4.1C | Avoid blocking the UI and handle permission errors robustly. |
| 5.4.2A | Embed SVG inline for styling and accessibility, and set appropriate roles and titles when needed. |
| 5.4.2B | Style with CSS and manage icon systems via <symbol> and <use>. |
| 5.5.1A | Keep markup semantic, minimal, and consistently formatted. |
| 5.5.1B | Defer non-critical resources, minimize blocking assets, and audit performance regularly. |
| 5.5.1C | Use version control and code reviews to sustain quality. |
| 5.6.1A | Explain how to run automated checks and fix common issues. |
| 5.6.1B | Perform manual keyboard and screen reader spot checks on key flows. |
| 5.6.1C | Document findings and regressions as part of the release process. |
