# Wcag Accessibility

> UI must comply with WCAG 2.2 Level AA, as required by the European Accessibility Act (EN 301 549). Do not deviate without deliberate justification. Disabled UI elements are explicitly exempt from colour contrast requirements. Use when designing, building, or reviewing any user-facing interface for accessibility compliance.

- **Type:** Skill
- **Install:** `agentstack add skill-dembrandt-dembrandt-skills-wcag-accessibility`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [dembrandt](https://agentstack.voostack.com/s/dembrandt)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [dembrandt](https://github.com/dembrandt)
- **Source:** https://github.com/dembrandt/dembrandt-skills/tree/main/skills/wcag-accessibility

## Install

```sh
agentstack add skill-dembrandt-dembrandt-skills-wcag-accessibility
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# WCAG Accessibility (EN 301 549 / European Standard)

## The Standard

The **European Accessibility Act (EAA)** requires digital products and services in the EU to meet **EN 301 549**, which references **WCAG 2.2 Level AA** as the technical baseline. This is not optional — it is a legal requirement for products operating in the EU market.

**Default: always build to WCAG 2.2 AA.** Deviating requires explicit, documented justification. Do not skip accessibility requirements because of timeline pressure or design preference.

WCAG 2.2 AA organises requirements under four principles: **Perceivable, Operable, Understandable, Robust**.

---

## Perceivable

Users must be able to perceive all content and UI components.

### Colour Contrast
| Context | Minimum ratio | Enhanced (AAA) |
|---|---|---|
| Normal text (` element: `` or ``
- Mark inline content in a different language with `lang` on that element

### Labels and Instructions
- Every form input must have a visible label — not just a placeholder (placeholders disappear on input)
- Required fields must be indicated — do not rely on colour alone; add an asterisk and a legend
- Error messages must be associated with their input via `aria-describedby`

### Predictability
- Components that look the same must behave the same (see Consistency and Standards)
- Navigation must appear in the same location across pages
- Opening a new tab or window must be communicated in advance

### Error Identification
- Form validation errors must identify which field failed
- Errors must be described in text — not only by colour or icon

---

## Robust

Content must be interpreted reliably by assistive technologies.

### Semantic HTML
Use the correct HTML element for the job. Semantics convey role, state, and structure to screen readers for free.

```html

Save
...
Page title

Save
...
Page title
```

### ARIA — Use Sparingly
ARIA supplements HTML semantics where native elements fall short. It does not fix broken HTML.

**Rule: no ARIA is better than incorrect ARIA.** Incorrect ARIA actively breaks screen reader output.

Required patterns:
- `aria-label` or `aria-labelledby` for components with no visible text label
- `aria-expanded` on toggles, accordions, and dropdowns
- `aria-live` regions for dynamic content updates (toast notifications, search results)
- `role="dialog"` with `aria-modal="true"` on modal overlays
- `aria-current="page"` on the active navigation item

### Status Messages
Dynamic updates (success toasts, loading states, error counts) must be announced to screen readers via `aria-live` or `role="status"` — they will not be announced automatically unless the focused element changes.

---

## The Disabled Element Exception

WCAG 1.4.3 explicitly states: *"Text or images of text that are part of an inactive user interface component… have no contrast requirement."*

This means:
- Disabled buttons, inputs, and links **may** use low-contrast text and colours
- The visual dimming of disabled states is both correct and compliant
- Do not add artificial contrast to disabled elements — the reduced contrast communicates "this is unavailable"

---

## Review Checklist

| Area | Check |
|---|---|
| Contrast | All active text ≥ 4.5:1 (normal) or 3:1 (large/UI) |
| Contrast | Disabled elements exempt — intentionally low contrast is fine |
| Colour | Colour is never the only information carrier |
| Keyboard | All interactive elements reachable and operable by keyboard |
| Focus | Visible focus indicator on every interactive element |
| Touch | Interactive targets ≥ 44×44px on touch surfaces |
| Labels | Every input has a visible label (not just placeholder) |
| Errors | Validation errors identify the field and describe the problem in text |
| HTML | Semantic elements used correctly; ARIA only where needed |
| Language | `lang` attribute set on `` |
| Skip link | "Skip to main content" as first focusable element |
| Live regions | Dynamic updates announced via `aria-live` or `role="status"` |

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [dembrandt](https://github.com/dembrandt)
- **Source:** [dembrandt/dembrandt-skills](https://github.com/dembrandt/dembrandt-skills)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-dembrandt-dembrandt-skills-wcag-accessibility
- Seller: https://agentstack.voostack.com/s/dembrandt
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.