# Accessibility

## Agent Instructions

You are implementing an accessible KIRUPA surface. Use WCAG 2.2 AA as the baseline for changed content, without claiming the existing site is audited. Prefer semantic HTML and native controls; preserve meaningful names, visible labels, keyboard operation, logical focus, focus return, and clear errors. Measure rendered contrast in every supported theme/state. Support 200% text resize, 320px reflow, text-spacing overrides, and usable touch targets. Supply meaningful text alternatives, captions/transcripts, and descriptions of otherwise missing visual information. Respect reduced motion, allow loops to pause, and keep sound optional. Combine automated checks with manual keyboard and assistive-technology review. Report checks, untested behavior, and unresolved barriers honestly.

## Reference

Requirements for semantics, keyboard access, contrast, text alternatives, reflow, and media.

Use WCAG 2.2 Level AA as the acceptance baseline for new or changed content. This is an implementation rule, not a claim that every existing page or inherited theme has passed a conformance audit. Follow the linked W3C guidance, record the checks you performed, and report remaining barriers rather than hiding them behind a passing automated scan.

Start with semantic HTML: one descriptive page title and h1, ordered headings, named navigation and main landmarks, real links for destinations, and buttons for actions. Give every control an accessible name and every input a persistent visible label. Use ARIA only where native semantics do not express the interaction; keep names, roles, values, and expanded/hidden states accurate.

Complete every task with the keyboard alone. Preserve logical focus order, a working skip link, and a visible focus indicator that is not obscured by sticky content. Do not trap focus in a non-modal panel. Modal dialogs need managed focus; closing a dialog or menu should return focus to its opener. Do not make hover, dragging, color, shape, location, or sound the only way to understand or perform an action. Here is a real tutorial link with keyboard focus; this illustrates the state rather than certifying the page's accessibility:

![A tutorial body link with the site's visible keyboard focus treatment.](/design/screenshots/tutorial-focus.png?v=05a77f70297c)

[Keyboard focus in a real tutorial](https://www.kirupa.com/html5/building_your_first_web_page.htm). Fixed capture from 2026-10-19.

Check the actual rendered foreground/background pairs in each supported style, palette, mode, and interaction state. Normal text needs at least 4.5:1 contrast; large text needs 3:1 (at least 24 CSS px regular or about 18.67 CSS px bold). Meaningful control boundaries, state indicators, and graphical information need 3:1 against adjacent colors. A source token, accent swatch, or attractive screenshot is not evidence of sufficient contrast.

Allow text resizing to 200% and content reflow at 320 CSS px, equivalent to a 1280px-wide viewport at 400% zoom. Do not disable browser zoom. Preserve content and controls when users increase text spacing. Confine genuinely two-dimensional maps, tables, and diagrams to their own accessible region instead of forcing the whole page to scroll sideways. Aim for 44x44 CSS px primary touch targets; WCAG 2.2 AA's minimum is 24x24, with defined spacing, inline, equivalent-control, native-control, and essential exceptions.

Write purposeful alternatives for meaningful images, diagrams, and canvas output; use empty alt text for decorative images and hide duplicate icon content from assistive technology. The Who's Online table is part of the globe experience. Publish accurate synchronized captions for speech and relevant sounds, a transcript, and audio description when important visual information is not conveyed in the audio. A transcript alone does not replace synchronized captions.

Keep errors visible, specific, associated with the affected input, and recoverable without losing the user's work. Announce important asynchronous status changes without moving focus or narrating every update. Respect prefers-reduced-motion, provide a pause/stop for nonessential loops, avoid flashing effects, and leave the interface complete with sound muted. These motion and sound practices are shared design requirements even where they go beyond a particular AA criterion.

- Before delivery, check keyboard order and focus return, screen-reader names and landmarks, every changed theme/state's contrast, 200% text resize, 320px reflow, and user text-spacing overrides.
- Check meaningful alt text, captions/transcripts, canvas or table alternatives, reduced motion, muted sound, and loading/empty/error recovery wherever they apply.
- Use automated accessibility checks where available, then perform manual keyboard and assistive-technology checks. State any untested behavior or remaining barriers; never claim that a tool certifies accessibility.

## Sources

- [https://www.w3.org/WAI/WCAG22/quickref/](https://www.w3.org/WAI/WCAG22/quickref/)
- [https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html)
- [https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html)
- [https://www.w3.org/WAI/WCAG22/Understanding/reflow.html](https://www.w3.org/WAI/WCAG22/Understanding/reflow.html)
- [https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html)
- [https://www.w3.org/WAI/ARIA/apg/](https://www.w3.org/WAI/ARIA/apg/)
- [design/design.js](https://github.com/kirupa/kirupaWWW/blob/main/design/design.js)
- [design/preview.js](https://github.com/kirupa/kirupaWWW/blob/main/design/preview.js)
- [tools/design_system.browser.mjs](https://github.com/kirupa/kirupaWWW/blob/main/tools/design_system.browser.mjs)

[Section page and specimens](/design/accessibility.htm) | [Instruction index](/design/index.md) | [Plain prompt](/design/agent/accessibility.txt)