Why This Document Covers Both Accessibility and Sustainability

This document is primarily driven by the accessibility crisis in AI-generated code. The evidence base (below) overwhelmingly concerns accessibility: 95.9% of the web fails WCAG, the [[AIMAC]] benchmark measures accessibility violations, and the legal and regulatory pressure (the European Accessibility Act, ADA Title II) targets accessibility compliance. Accessibility is the domain where the gap between human guidelines and AI behaviour is best documented, most measurable, and most consequential.

Sustainability is included for three reasons. First, several important requirements serve both accessibility and sustainability simultaneously -- semantic HTML, reduced motion, efficient images, progressive enhancement. Treating them separately would miss the reinforcing relationship between inclusive design and environmental efficiency. Second, the W3C Web Sustainability Guidelines [[WSG]] face the same machine-consumability problem as WCAG, but at an earlier stage -- there is no equivalent of [[AIMAC]] for sustainability, no axe-core for carbon footprint. Including sustainability here establishes the pattern before the problem matures. Third, both domains share the same structural barrier: AI systems trained on a web that is neither accessible nor sustainable will reproduce both sets of failures unless their specifications are reformulated for machine consumption.

Readers should understand that Part I (Accessibility) is substantially more developed than Part II (Sustainability), reflecting the relative maturity of the evidence, tooling, and legal frameworks in each domain. Part II is offered as a starting point for community development, not as a comprehensive treatment.

The Evidence Base

The web is overwhelmingly inaccessible. The WebAIM Million 2025 report found that 95.9% of homepages fail WCAG 2.2 Level A/AA standards, with an average of 51 accessibility errors per homepage [[WEBAIM-MILLION]]. The Web Almanac 2025 reports a median Lighthouse accessibility score of 85% -- improved, but still indicating widespread non-compliance [[WEB-ALMANAC-A11Y]]. Only 30% of mobile sites meet minimum colour contrast requirements. Pages using ARIA attributes average 34% more detected errors than pages without, suggesting systematic misuse of the very tools intended to improve accessibility.

AI systems reproduce and amplify existing patterns. LLMs trained on the existing web learn the web's accessibility failures as default patterns. [[DEAD-FRAMEWORK]] describes a self-reinforcing feedback loop: dominant patterns in training data are reproduced in AI outputs, which enter the training corpus for future models, entrenching those patterns further. Although the original analysis focuses on framework adoption (React's statistical dominance), the same dynamic applies to accessibility and sustainability: if 96% of the web is inaccessible, AI systems trained on that web will produce inaccessible code by default. The [[AIMAC]] benchmark confirms this -- without explicit accessibility guidance, most models produce code with significant accessibility debt.

The feedback loop has a system prompt amplifier. [[DEAD-FRAMEWORK]] identifies a second loop operating through tooling: coding platforms hardcode specific patterns into their system prompts, and these choices override training data and user preferences. There is no equivalent mechanism requiring coding tools to include accessibility or sustainability requirements in their system prompts. A tool that defaults to React but does not default to WCAG compliance produces code that is both framework-locked and inaccessible -- and both properties are amplified through the same feedback cycle.

Existing guidelines are not agent-consumable. WCAG 2.2 [[WCAG22]] and the Web Sustainability Guidelines [[WSG]] are written for human developers. They rely on natural language, professional judgment, and contextual understanding that AI systems approximate but do not reliably possess. The Web Almanac 2025 reports that automated testing tools can check fewer than 50% of WCAG success criteria, and comparative audits of popular tools show all of them detect fewer than half of accessibility errors [[WEB-ALMANAC-A11Y]]. Many criteria lack automated tests altogether. If human experts using specialised tools cannot catch all failures, AI systems relying on statistical patterns will perform worse.

The AI risk is acknowledged but unaddressed. The Web Almanac 2025 added a new section on AI, noting that AI is changing how websites are built, content is generated, and interfaces are designed. It explicitly warns that there is no reliable way to determine when AI has created or assisted in creating a website, and that language models are trained on code and content that often contain accessibility problems [[WEB-ALMANAC-A11Y]]. The report calls for AI to support human expertise and inclusive design, not replace them -- but provides no specification or standard for how this should be achieved. This document begins to fill that gap.

Purpose and Approach

This document does not replace WCAG or the Web Sustainability Guidelines. It provides a companion layer -- a translation of key requirements into forms that AI coding assistants can apply during code generation. Following the methodology in [[MACHINE-CONSUMABLE-SPECS]], each requirement is presented as:

A machine-checkable constraint where possible. A positive code example (DO). A negative code example (DO NOT) reflecting common AI-generated failure patterns. A reference to an automated test where one exists. A brief rationale explaining the user impact.

Text Alternatives for Images

WCAG 2.2 Success Criterion 1.1.1 (Level A). Every non-text content element MUST have a text alternative that serves the equivalent purpose.

<img src="team-photo.jpg">
<img src="chart.png" alt="image">

<img src="team-photo.jpg" alt="Research team presenting findings at the 2026 conference">
<img src="decorative-border.png" alt="">

Rationale: Screen readers announce images using alt text. Without it, non-visual users cannot perceive the image's content or function. Decorative images should be silenced with alt="" to avoid noise.

Color Contrast

WCAG 2.2 Success Criterion 1.4.3 (Level AA). Visual presentation of text and images of text MUST have a contrast ratio of at least 4.5:1, or 3:1 for large text.

color: #999999; background-color: #ffffff; /* Ratio: 2.85:1 -- FAIL */

color: #595959; background-color: #ffffff; /* Ratio: 7.0:1 -- PASS */

Rationale: Insufficient contrast makes text unreadable for users with low vision, colour vision deficiencies, or anyone viewing a screen in bright light. Only 30% of mobile sites currently meet minimum contrast requirements [[WEB-ALMANAC-A11Y]].

Form Labels and Inputs

WCAG 2.2 Success Criterion 1.3.1 (Level A) and 4.1.2 (Level A). Form inputs MUST have programmatically associated labels.

<input type="email" placeholder="Enter your email">

<label for="email">Email address</label>
<input type="email" id="email" name="email">

Rationale: Screen readers identify form fields by their associated labels. Placeholder text disappears on focus and is not announced consistently by assistive technologies. Missing labels are the second most common accessibility error on the web.

Link Text

WCAG 2.2 Success Criterion 2.4.4 (Level A). The purpose of each link MUST be determinable from the link text alone, or from the link text together with its programmatically determined context.

<a href="/report">Click here</a>
<a href="/report"><img src="icon.png"></a>

<a href="/report">Download the 2026 annual report (PDF, 2.4 MB)</a>
<a href="/report"><img src="icon.png" alt="Download annual report"></a>

Document Language

<html>
<html lang="english">

<html lang="en">
<html lang="zh-Hant">

Semantic Structure and ARIA

Rationale: Pages using ARIA average 34% more detected errors than pages without it [[WEBAIM-MILLION]]. ARIA misuse is worse than no ARIA. This is a direct example of the [[DEAD-FRAMEWORK]] feedback loop applied to accessibility: the web is full of incorrect ARIA usage, AI systems learn those incorrect patterns, and they reproduce ARIA misuse at scale. AI code assistants MUST prefer native HTML semantics and only use ARIA when no native element provides the required role or state. This single constraint, if applied consistently by AI coding agents, would reduce the accessibility error rate more than any other intervention.

<div role="button" onclick="submit()">Submit</div>
<span role="link" onclick="navigate()">Go to page</span>

<button type="submit">Submit</button>
<a href="/page">Go to page</a>

Keyboard Accessibility and Focus

*:focus { outline: none; }
<div tabindex="5">Interactive element</div>

:focus-visible { outline: 2px solid #005fcc; outline-offset: 2px; }
<button>Interactive element</button>

Viewport and Zoom

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

<meta name="viewport" content="width=device-width, initial-scale=1">

Page Weight and Resource Efficiency

<!-- Loading entire library when one function is needed -->
<script src="https://cdn.example.com/mega-library.min.js"></script>
<!-- Uncompressed, full-size image -->
<img src="hero-photo-4000x3000.jpg">

<!-- Import only what you use -->
<script type="module">
  import { specificFunction } from './utils.js';
</script>
<!-- Responsive, lazy-loaded, optimised image -->
<img src="hero-800.webp"
     srcset="hero-400.webp 400w, hero-800.webp 800w"
     sizes="(max-width: 600px) 400px, 800px"
     loading="lazy"
     alt="Descriptive alt text">

JavaScript Efficiency

// JavaScript for a simple toggle
element.style.display = isVisible ? 'block' : 'none';

// JavaScript smooth scroll
window.scrollTo({ top: target.offsetTop, behavior: 'smooth' });

/* CSS toggle with details/summary */
<details>
  <summary>More information</summary>
  <p>Content here</p>
</details>

/* CSS smooth scroll */
html { scroll-behavior: smooth; }

Reduced Motion and Energy

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Font Loading and Efficiency

Colour Scheme Adaptation