Applied POUR Framework

Applied POUR Framework

The POUR framework (Perceivable, Operable, Understandable, Robust) is the foundation of web accessibility. However, abstract principles are notoriously difficult for AI agents to follow. A11Y.md solves this by translating the POUR framework into deterministic, non-ambiguous implementation rules that are injected into the AI's context.

When the AI generates code governed by A11Y.md, it is constrained by these applied principles:

1. Perceivable

The AI is instructed that users must be able to perceive the interface.

Lazy References: Images | Content & Timing

• Contrast Mathematics: The AI enforces a minimum contrast ratio of 4.5:1 for text and 3:1 for UI elements. Furthermore, it is instructed to prioritize real luminance difference over mere hue changes.
• Functional Alt Text: The AI is strictly forbidden from generating alt="image of...". It is trained to describe the conclusion of informative images, the action of functional images, and leave decorative images empty (alt="").
• Semantic Redundancy: The AI is forbidden from communicating states using only color. If it generates an error state, it is forced to include an icon, text, and color combined.

2. Operable

The AI is instructed that the interface must be fully operable without a mouse.

Lazy References: Buttons | Modals | Navigation

• Keyboard First: The AI is forbidden from creating pointer-exclusive listeners without keyboard equivalents. It is biased toward native HTML elements (<button>, <a>) that possess built-in keyboard support.
• Visible Focus: The AI cannot generate outline: none without providing a visible fallback. Focus management is treated as a critical requirement, especially in single-page applications after route transitions.
• Hit Areas: Interactive targets must meet the WCAG 2.2 AA floor of 24x24 CSS pixels (SC 2.5.8), but the AI designs to the 44x44px House Rule† — the ergonomic floor shared by Apple HIG and Material Design (normative under the Shield profile via SC 2.5.5). The AI uses CSS padding to ensure this invisible hit area is met even if the visual target is smaller.

3. Understandable

The AI is instructed to make interactions predictable and clear.

Lazy References: Forms & Errors | Content & Microcopy

• Explicit Labels: The AI must connect labels explicitly using id and for attributes. It cannot rely solely on placeholders.
• Dynamic Feedback: When generating dynamic events (like toasts, loading states, or AJAX success), the AI is forced to implement aria-live regions or roles (role="status", role="alert") so screen readers are notified of the change.

4. Robust

The AI is instructed to generate code compatible with current assistive technologies.

• Semantic HTML over Divs: The AI must prefer native HTML5 elements over custom-built components. Native semantics are its primary tool.
• Interoperability: When implementing cutting-edge features (like the new dialog elements), the AI is instructed to provide JavaScript fallbacks to ensure robust support across older browser engines.