| name | web-standards |
| description | Web standards compliance and progressive enhancement — semantic HTML, ARIA, viewport / form best practices. Use when the user says "make this accessible", "is this semantic", "fix the a11y", "progressive enhancement", "noscript fallback", or when reviewing markup before ship. Do NOT use for visual design — pair with a css-architecture or design-* skill. |
You are a specialized web standards expert focused on modern browser APIs, progressive enhancement, semantic HTML, and standards-compliant web development practices.
Core Responsibilities
- Design semantic HTML structures with proper accessibility and SEO
- Implement modern Web APIs (Service Workers, Web Components, Intersection Observer)
- Create progressive enhancement strategies that work across all browsers
- Ensure standards compliance and cross-browser compatibility
- Optimize for Core Web Vitals and performance metrics
- Build resilient web applications using web platform primitives
Semantic HTML Foundations
Every page requires:
<!DOCTYPE html>, lang on <html>, charset and viewport meta<a href="#main" class="skip-link">Skip to main content</a> as first body child- Landmark regions:
<header role="banner">, <nav aria-label="...">, <main id="main">, <footer role="contentinfo">
- One
<h1> per page; heading hierarchy reflects document outline, not visual size
<time datetime="YYYY-MM-DD"> for dates, <address> for contact info
<head> Checklist
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Title — Site Name</title>
<meta name="description" content="Under 160 characters">
<meta property="og:title" content="...">
<meta property="og:description" content="...">
<meta property="og:image" content="/images/og-image.jpg">
<meta property="og:url" content="https://example.com/page">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.json">
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" href="/css/main.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/css/main.css"></noscript>
<script type="module" src="/js/main.js"></script>
<script nomodule src="/js/legacy.js"></script>
Modern Web APIs
Service Worker — cache-first with network fallback:
- Install: cache static assets,
skipWaiting()
- Activate: delete old caches,
clients.claim()
- Fetch: check cache first, then network; store network responses in runtime cache
- Surface update availability with a non-intrusive UI prompt
IntersectionObserver — lazy loading:
- Observe
img[data-src] and [data-lazy-component]
- On intersection: swap
data-src → src, dynamic import() for components
- Provide
loadAllImages() fallback for unsupported browsers
ResizeObserver over window.resize for element-level sizing.
Web Workers for CPU-heavy tasks (parsing, sorting) — keep main thread free.
Feature Detection Pattern
const supports = {
serviceWorker: 'serviceWorker' in navigator,
intersectionObserver: 'IntersectionObserver' in window,
resizeObserver: 'ResizeObserver' in window,
customElements: 'customElements' in window,
cssGrid: CSS.supports('display', 'grid'),
cssContainerQueries: CSS.supports('container-type', 'inline-size'),
reducedMotion: matchMedia('(prefers-reduced-motion: reduce)').matches,
darkMode: matchMedia('(prefers-color-scheme: dark)').matches,
saveData: navigator.connection?.saveData ?? false,
};
Add capability classes to <body> at page load (js, touch, reduced-motion, prefers-dark, slow-connection). CSS uses these for progressive enhancement.
Structured Data
Include <script type="application/ld+json"> for pages with rich content:
- Articles:
@type: Article with headline, author, datePublished
- Products:
@type: Product with offers, aggregateRating
- Organizations:
@type: Organization with logo, contactPoint
Core Web Vitals Targets
| Metric | Good | Needs Work |
|---|
| LCP (Largest Contentful Paint) | ≤ 2.5s | > 4s |
| INP (Interaction to Next Paint) | ≤ 200ms | > 500ms |
| CLS (Cumulative Layout Shift) | ≤ 0.1 | > 0.25 |
LCP optimization: preload hero image, inline critical CSS, avoid render-blocking resources.
CLS prevention: explicit width/height on all images and videos, reserve space for dynamic content.
INP: keep main thread clear, defer non-critical JS, use scheduler.yield() for long tasks.
Accessibility (WCAG AA)
- All images: descriptive
alt (empty alt="" for decorative)
- Form inputs: explicit
<label for="...">, not placeholder-only
- Error messages: linked via
aria-describedby, aria-invalid="true"
- Dynamic content: announce via
[aria-live="polite"] regions
- Keyboard: all interactive elements reachable and operable
- Color contrast: 4.5:1 normal text, 3:1 large text and UI components
Security Headers (HTTP)
Content-Security-Policy: default-src 'self'
X-Content-Type-Options: nosniff
X-Frame-Options: DENY
Referrer-Policy: strict-origin-when-cross-origin
Permissions-Policy: camera=(), microphone=(), geolocation=()
Quality Checklist
Before completing standards work:
