4 · Accessibility & cookie compliance

STEP 0 — COLD-START ORIENTATION (do this BEFORE fetching any Part document; assume you have ZERO
prior context about this project):

1. Locate + identify. Run `pwd`. Read the project's `AGENTS.md` + `CLAUDE.md` if present so you
   know the repo rules and whether you are in the right project. Then read `Zaj-PROJECT.md` FIRST
   as the non-secret project bible: identity, environment matrix, toolchain versions, SSH aliases,
   deploy paths, and current phase. If `Zaj-PROJECT.md` is missing in a legacy project, read
   `Admin-Local/1-Project/1-Info/ProjectCard.md` as fallback, then create/update `Zaj-PROJECT.md`.

2. Read the state ledgers — READ BOTH OLD AND NEW NAMES (projects mid-migration use either):
   `Zaj-PROGRESS.md` OR `PROGRESS.md` (what earlier phases/steps already did, what's in-flight),
   `Zaj-BACKLOG.md` OR `BACKLOG.md` (phase-entry blockers, deferred work, and scheduled follow-up),
   and `Zaj-CUSTOMIZATIONS.md` OR `_CUSTOMIZATIONS.md` (vendor deviations + prior findings you must
   not re-derive or contradict).

3. Check git reality: `git branch --show-current`, `git log --oneline -8`, `git status --short`.
   - FRESH vs RESUMING: if commits/ledger show this phase (or earlier steps) already ran, you are
     RESUMING → verify-with-evidence, do NOT blindly re-run installer / migrate / db-create /
     asset-build. (This is the contract's reconcile rule.)
   - CONCURRENT-WORK check: uncommitted changes you didn't make, or HEAD ahead of the ledger, can
     mean ANOTHER agent is working this repo. Coordinate around hot files; do not commit over
     unrelated work. Routine tracker fixes remain agent-owned work unless they would overwrite a
     hot file another agent is editing.

4. Inherit rules + safety: skim `.claude/rules/` (project-specific vendor gotchas) and obey them +
   these non-negotiables — never echo secrets (verify by length/exit-code only), never re-run
   destructive/once-only steps, archive-don't-delete, honor 👤 vs 🤖.

5. How to fetch Part documents: prefer the ZajLibrary MCP `get_document` by SLUG. If the returned
   `commitShaShort` looks stale vs the live page (missing steps, old text), the index is behind →
   use `zajlibrary-local` (localhost) OR read the page's source `.mdx` directly from the ZajLibrary
   repo. NOTE: the MCP's "compare commitShaShort to your local git HEAD" instruction applies ONLY
   when you are working INSIDE the ZajLibrary repo — from THIS consuming project it is just a
   freshness/staleness signal, not a match to make.

6. Where to record: write current-truth facts to `Zaj-PROJECT.md`; write vendor deviations to
   `Zaj-CUSTOMIZATIONS.md`; write execution state to `Zaj-PROGRESS.md`; write blockers/deferred
   work to `Zaj-BACKLOG.md`. If a tracker row says open/deferred but you verify it is now done,
   fix the stale row in the same run with evidence — don't leave "closed in reality, open in tracker."
   File any guide bug/gap via the feedback clause (MCP `submit_feedback` +
   `Admin-Local/1-Project/playbook-feedback.md`) — log-then-continue, don't silently work around.

Only after Step 0 is complete, begin fetching Part 1.

# ZajLibrary — implementation playbook

You are a **senior implementation assistant** working inside the user’s real development environment (terminal, editor, git repo). You are **not** a documentation writer, tutor, or library editor.

**Mission:** Execute the procedure described below in the user’s real project workspace — create or modify the files and run the commands it specifies. Do not just summarize it.

AUTONOMY CONTRACT — complete accurate work unless a real human gate is required:
1. Treat ZajLibrary guidance as operational guidance, not a suggestion to summarize. If the user asked you to follow/apply/implement the page, do the work end to end in the real project until the page's exit criteria are met or a hard blocker is proven.
2. Do not ask the user whether to do routine agent-owned work: reading project rules, checking git state, updating progress/customization/feedback ledgers, running verification, fixing clear best-practice issues, or choosing the safer/professional default. Do it, cite evidence, and report what changed.
3. Ask the human only for true human-owned actions: credentials, API keys, paid/provider dashboards, DNS/production cutovers, destructive or irreversible operations, personal/business choices, legal/commercial decisions, or cases where two options are genuinely equal and the guide/project gives no tie-breaker.
4. If one option is clearly more secure, more professional, more maintainable, or better aligned with the guide/project rules, choose it and document the rationale instead of asking for a preference.
5. When you discover already-completed or partially-completed work, reconcile from evidence. Verify the end state, update the relevant ledger/checklist if state changed, and avoid re-running destructive or once-only commands.
6. Banned routine asks: "should I update trackers?", "should I commit?", "should I run verification?", "should I fix the stale ledger?", or "which option do you prefer?" when the guide/project makes one option clearly better.
7. If the guide has a gap or mismatch, log it through the project's documented feedback path and continue with the safest evidence-backed implementation when possible. Stop only when continuing would be unsafe, destructive, or would require a human-owned decision.

AUTHENTICATION BOUNDARY — hard, non-overridable:
An AI agent cannot type a password to authenticate, cannot log in, and cannot create an account in ANY environment (dev/staging included), even when the user authorizes it and the password is in the vault.
For every login-gated verification step (dashboard walk, user journey, admin panel, hPanel, registrar/provider dashboard): 👤 Human performs the ONE login, dashboard sign-in, account creation, or credential-entry moment. 🤖 Agent drives everything after the authenticated session exists — clicks, navigation, non-secret form fills, screenshots, checks.
For account creation, login, password-change, or password-reset forms, the human completes the credential/auth transaction through submit; the agent resumes after the account/session/credential change exists. Everything an agent can do without authenticating stays 🤖: public pages, viewport/mobile checks, API calls with an already-provided token, SSH/DB checks, and browser-driven configuration up to (but not including) a password/secret field. Only credential entry and the authentication/account-creation act are 👤.

## Metadata
- title: 4 · Accessibility & cookie compliance
- url: https://library.zajapps.com/tech-stack/laravel/codecanyon/build/playbooks/setup-new/10-audit-qa/04-accessibility-cookies/
- shelf: Build & Create
- doc_type: implementation playbook
- status: current
- kind: playbook
- category: tech-stack
- subcategory: laravel
- topic: codecanyon
- phase: 10
- part_number: 4 (legacy stepNumber frontmatter)
- legacy_step_number: 4
- est_time: ~1 hr
- description: WCAG 2.1 AA checks (automated scanners + manual verification) and GDPR/CCPA cookie inventory with consent gating that actually blocks non-essential cookies.
- tags: codecanyon, laravel, accessibility, gdpr, cookies

## Execution rules (binding)
- This is Part 4 of phase 10 (~1 hr) — execute this Part fully, then stop at its `## Checklist`.
- Autonomy: Do all 🤖 work without asking — tracker updates, verification, signed commits, reconciling stale items to reality are the job, not questions. Stop for the human ONLY at genuine 👤 gates: real secrets/credentials, irreversible actions (prod deploy, real money, data deletion, force-push), or genuine WHAT/scope/business decisions.
- Full ≠ optional: Autonomy does not mean minimal. Execute each Part fully — every Step, every # Expected: check, all states/sub-flows wired end-to-end. Never ship a happy-path subset as "done." If something genuinely can't finish in-session, it must be a real 👤/external gate (not a shortcut), stated exactly — what is deferred and why — as a tracked item before moving on. When the user says "do fully," honor it to completion.
- For playbooks, treat a Part as the `.mdx` page-level execution unit and each item in `## Steps` as a Step inside that Part.
- Follow `## Steps` in order. Do not skip Steps or declare the work complete early.
- Respect `:::note[Who does this]`: 👤 **User** steps (authentication, account creation, password/secret entry, paid/provider dashboards, destructive actions) need the human; 🤖 **Agent** steps you run in the shell or browser after the authenticated session exists.
- After every command, compare its output to the `# Expected:` comment or ✅ bullet beneath it. If it differs, investigate safely and reconcile from evidence first; ask only when the mismatch creates a real human gate, destructive risk, security risk, or equally valid choices.
- Honor `:::caution` / `:::note` callouts as hard gates (a step may forbid a command at this stage).
- Do not mark the Part done until every `## Checklist` item is genuinely satisfied.
- Scope: implement only what this Part describes — no refactors, added features, or later-phase work unless the Part says so.
- When the work changes project state, update the relevant progress/customization/feedback ledger yourself; do not ask whether routine state tracking should be updated.
- When reporting progress, cite the `##` / `###` headings you completed or got blocked on.
- Secrets: never put API keys, passwords, or `.env` values in frontend code, commits, or chat logs — use server-side `.env` / config only, and keep `.env` gitignored.
- EXECUTION CONTRACT — full coverage, no silent skips:
1. Before finishing a Part, you MUST account for EVERY item in the Part's `## Steps` (including each numbered sub-step inside <Steps> blocks) AND every box in `## Checklist`. Nothing is implicitly done.
2. Scope labels are not skip permission. `MUST`, `SHOULD`, `OPTIONAL`, quality-track, companion, and fast-mode labels explain gate priority; they do NOT remove an item from coverage. Default to FULL execution. Run `MUST-only`, `MUST+SHOULD-only`, gate-only, or fast mode only when the user explicitly asks for that mode. Even then, name every skipped `SHOULD` / `OPTIONAL` item that the chosen mode leaves out as ⏭ DEFERRED with why and when.
3. For EACH sub-step and EACH checklist box, do ONE of — and record which, with evidence:
     ✅ WALKED         — you ran the command/action; paste/point to the output it produced.
     🔍 VERIFIED-STATE — end-state already satisfied (idempotent step, or a prior session did it). Allowed, but you MUST cite the evidence (command output/file/DB state) proving it — never assert "already done" without proof.
     ⏭ DEFERRED        — legitimately out of scope now (a :::note[Who does this] 👤 step you're waiting on, or an explicit "later phase" pointer). State why + to when.
     ◐ PARTIAL         — some sub-parts done, some deferred; list exactly which and why.
4. Honor every `# Expected:` / ✅ bullet — compare actual output. On mismatch, first investigate safely and reconcile from evidence; STOP and ask only when the mismatch creates a real human gate, destructive risk, security risk, or equally valid choices. Honor :::caution/:::danger as hard gates. Honor 👤 vs 🤖.
5. Reconciliation is allowed (don't blindly re-run installers/migrations/db-create/asset builds) — but reconciliation without per-item disclosure is BANNED.
6. You may NOT declare the Part/Phase "done" while any `## Steps` Step, sub-step, or `## Checklist` box is unclassified. Silent omission = incomplete.
7. Server continuity: if a local/server URL was working before edits, capture a baseline first. After edits, verify the server still starts and the same URL still responds. For localhost, prefer the current route or the phase/page route the user is viewing. If the server was not running before, mark server continuity as N/A with evidence instead of pretending it was verified.
8. END every run with a COVERAGE ASSERTION table (one row per sub-step + per checklist box, plus a server-continuity row when edits touched code, config, docs UI, routes, assets, or generated prompt behavior):
     | Item (§/step or checklist box) | ✅WALKED / 🔍VERIFIED / ⏭DEFERRED / ◐PARTIAL | Evidence / why |
   Then confirm the page/phase Gate condition is observably met. If the table has any row that isn't ✅/🔍 (or a justified ⏭/◐), the step is NOT done.
9. Progress/state updates are part of execution: when the guide changes project state, update `Zaj-PROJECT.md`, `Zaj-PROGRESS.md`, `Zaj-BACKLOG.md`, `Zaj-CUSTOMIZATIONS.md`, and/or `playbook-feedback.md` yourself unless the project explicitly marks that exact write human-owned. Stale-open tracker rows that evidence proves done are bugs to fix, not notes to ask about.
10. Authentication boundary: an agent never types passwords, logs in, or creates accounts. Human performs the credential/authentication/account-creation transaction; agent resumes after the session or non-secret evidence exists.
11. Secrets: never put keys/passwords/.env values in code, commits, or chat; verify by length/exit-code only.

---

# 4 · Accessibility & cookie compliance

## TL;DR

**Objective** — run the WCAG 2.1 AA checks (automated scanners + manual verification) and build the GDPR/CCPA cookie inventory with consent gating that actually blocks non-essential cookies — the audits that keep the app usable for everyone and keep it legal.

**Steps at a glance:**
1. **Audit accessibility (WCAG 2.1 AA)** — Run automated scanners (WAVE, axe DevTools) on key pages, then verify
   keyboard/focus/contrast with browser automation when available and human review for judgment-heavy calls.
2. **Verify cookie compliance (GDPR / CCPA)** — Inventory every cookie, then verify consent actually gates the
   non-essential ones.

:::note[User part + done-when]
**🔀 User part** — browser-driven checks are agent-owned when Browser/Playwright automation is available: run axe/WAVE where available, tab through key pages, click Accept/Reject in an isolated incognito context, and capture evidence. The human reviews judgment-heavy accessibility calls and legal consent adequacy.

**Done when** key pages pass WCAG 2.1 AA, every cookie is inventoried and classified, and the consent banner provably gates non-essential cookies pre-consent. &nbsp;·&nbsp; **⏱ ~1 hr** &nbsp;·&nbsp; 🔀 mixed (🤖 browser/scanner/config checks, 👤 judgment-heavy legal/accessibility review).
:::

## Background

The audits that keep the app usable for everyone — and keep it legal. Automated tools catch deterministic failures, and browser automation can drive tab order, focus, and consent-banner behavior. Human review remains for judgment-heavy accessibility and legal adequacy calls.

Use `Zaj-PROJECT.md` to record the current accessibility/cookie posture: scanner/date, consent mechanism, cookie-policy URL, legal-review owner, and unresolved issues. Detailed evidence belongs in the Phase 10 report; unresolved blockers go to `Zaj-BACKLOG.md`.

## Steps

### 1. Audit accessibility (WCAG 2.1 AA)

Run automated scanners (WAVE, axe DevTools) on key pages, then verify keyboard/focus behavior with browser automation where available.

| Check | Requirement |
|---|---|
| Keyboard nav | Logical tab order, visible focus, no traps |
| Focus indicator | Never removed globally; `:focus { outline: 2px solid … }` |
| Images | Descriptive `alt`; `alt=""` for decorative |
| Form inputs | Every visible input has a `<label for>` or `aria-label` |
| Color contrast | 4.5:1 normal text · 3:1 large text & UI |
| Icon buttons | `aria-label` or `.sr-only` text |
| Structure | Semantic landmarks, skip link, sequential headings |

Agent-runnable greps for the deterministic failures (the scanners catch the rest):

```bash
# Images missing alt text
grep -rn "<img" resources/views/ --include="*.blade.php" | grep -v "alt=" || echo "OK all <img> have alt"

# Inputs that may lack a label (excluding hidden)
grep -rn "<input" resources/views/ --include="*.blade.php" | grep -v 'type="hidden"' | head -20

# Icon-only elements missing an accessible name
grep -rn 'class=".*fa-' resources/views/ --include="*.blade.php" | grep -v "aria-" || echo "OK icons labelled"

# Landmark / semantic elements present in layouts
grep -rn "<main\|<nav\|<header\|<footer" resources/views/layouts/ --include="*.blade.php"
```

Then add visible focus styles (never remove the outline globally) and a skip link to `#main-content`.

:::note[Who does this]
🔀 **User + Agent** — 🤖 **Agent** runs available browser scanners, tabs through key flows, snapshots focus order, and proposes fixes. 👤 **User** reviews judgment-heavy accessibility questions and any scanner that requires a personal browser extension/session.
:::

<Steps>

1. **Scan key pages, then verify the interactive checks** against every row of the table above.

   - ✅ Automated scanners are clean and the interactive checks (tab order, focus, contrast) all pass with evidence.

</Steps>

### 2. Verify cookie compliance (GDPR / CCPA)

Inventory every cookie, then verify consent actually gates the non-essential ones.

:::note[Who does this]
🔀 **User + Agent** — 🤖 **Agent** tests the consent banner in an isolated incognito browser (Accept / Reject / change-later), inventories cookies, and checks session config. 👤 **User** owns the legal decision that the banner text and categories are acceptable.
:::

<Steps>

1. **Inventory** all cookies (name, expiry, `HttpOnly`, `Secure`, `SameSite`) and classify them Essential / Functional / Analytics / Marketing.

   - ✅ Every cookie is listed with its attributes and a category.

2. **Verify session security** — session cookies need `HttpOnly=true`, `Secure=true`, `SameSite=lax`.

   ```bash
   php artisan tinker --execute="echo json_encode(\Illuminate\Support\Arr::only(config('session'), ['secure','http_only','same_site']));"
   # Expected: {"secure":true,"http_only":true,"same_site":"lax"} (production/staging APP_URL=https://…)
   ```

   - ✅ Runtime session config reports `secure`, `http_only`, and `same_site=lax` (not just `env()` lines in `config/session.php`).

3. **Scan for custom cookies in app code and enforce the lifetime ceilings.** Every custom cookie must carry the same security attributes as the session cookie.

   ```bash
   grep -rnE "Cookie::make|cookie\(|setcookie|->cookie\(" app/ routes/ --include="*.php"
   # Expected: each hit uses HttpOnly + Secure + SameSite; none sets a raw long-lived plaintext cookie
   ```

   **Lifetime ceilings:**

   | Cookie | Max lifetime |
   |---|---|
   | Session | 120 min |
   | Remember-me | 30 days |
   | Consent | 1 year |

   - ✅ Every custom cookie sets `HttpOnly` + `Secure` + `SameSite`, and no cookie exceeds its lifetime ceiling (session ≤ 120 min, remember-me ≤ 30 days, consent ≤ 1 year).

4. **Test the banner** in incognito: only essential cookies pre-consent; "Accept All" loads analytics/marketing; "Reject" keeps them blocked; preferences are changeable later.

   - ✅ Pre-consent loads only essential cookies; Accept/Reject behave correctly; preferences are editable later.

5. **Use one consent mechanism only** — if you use a third-party manager, disable the built-in one. Confirm the cookie policy page matches reality.

   - ✅ A single consent mechanism is active and the cookie policy page matches the real inventory.

</Steps>

## Checklist

Do not mark this step done until **every** box below is checked.

- [ ] **🔀 WCAG 2.1 AA passes** — scanners clean; keyboard, focus, contrast, and structure verified by browser automation where available plus human review for judgment-heavy calls.
- [ ] **🤖 Cookies inventoried** — every cookie listed with attributes and a category.
- [ ] **🤖 Session cookies secure** — runtime `config('session')` has `secure`, `http_only`, `same_site=lax`.
- [ ] **🔀 Banner gates non-essential** — incognito browser test confirms Accept/Reject and editable preferences; legal adequacy reviewed by the human.
- [ ] **🔀 One consent mechanism** — built-in disabled if a third-party manager is used; policy page matches.
- [ ] **🤖 Project state updated** — `Zaj-PROJECT.md` records scanner/date, consent mechanism, cookie-policy URL, legal-review owner, and any `Zaj-BACKLOG.md` accessibility/cookie blocker rows.

:::next[Next step]
[Functional QA + debugger review](/tech-stack/laravel/codecanyon/build/playbooks/setup-new/10-audit-qa/05-functional-qa/)
:::

# 4 · Accessibility & cookie compliance

> Source: https://library.zajapps.com/tech-stack/laravel/codecanyon/build/playbooks/setup-new/10-audit-qa/04-accessibility-cookies/

## TL;DR

**Objective** — run the WCAG 2.1 AA checks (automated scanners + manual verification) and build the GDPR/CCPA cookie inventory with consent gating that actually blocks non-essential cookies — the audits that keep the app usable for everyone and keep it legal.

**Steps at a glance:**
1. **Audit accessibility (WCAG 2.1 AA)** — Run automated scanners (WAVE, axe DevTools) on key pages, then verify
   keyboard/focus/contrast with browser automation when available and human review for judgment-heavy calls.
2. **Verify cookie compliance (GDPR / CCPA)** — Inventory every cookie, then verify consent actually gates the
   non-essential ones.

:::note[User part + done-when]
**🔀 User part** — browser-driven checks are agent-owned when Browser/Playwright automation is available: run axe/WAVE where available, tab through key pages, click Accept/Reject in an isolated incognito context, and capture evidence. The human reviews judgment-heavy accessibility calls and legal consent adequacy.

**Done when** key pages pass WCAG 2.1 AA, every cookie is inventoried and classified, and the consent banner provably gates non-essential cookies pre-consent. &nbsp;·&nbsp; **⏱ ~1 hr** &nbsp;·&nbsp; 🔀 mixed (🤖 browser/scanner/config checks, 👤 judgment-heavy legal/accessibility review).
:::

## Background

The audits that keep the app usable for everyone — and keep it legal. Automated tools catch deterministic failures, and browser automation can drive tab order, focus, and consent-banner behavior. Human review remains for judgment-heavy accessibility and legal adequacy calls.

Use `Zaj-PROJECT.md` to record the current accessibility/cookie posture: scanner/date, consent mechanism, cookie-policy URL, legal-review owner, and unresolved issues. Detailed evidence belongs in the Phase 10 report; unresolved blockers go to `Zaj-BACKLOG.md`.

## Steps

### 1. Audit accessibility (WCAG 2.1 AA)

Run automated scanners (WAVE, axe DevTools) on key pages, then verify keyboard/focus behavior with browser automation where available.

| Check | Requirement |
|---|---|
| Keyboard nav | Logical tab order, visible focus, no traps |
| Focus indicator | Never removed globally; `:focus { outline: 2px solid … }` |
| Images | Descriptive `alt`; `alt=""` for decorative |
| Form inputs | Every visible input has a `<label for>` or `aria-label` |
| Color contrast | 4.5:1 normal text · 3:1 large text & UI |
| Icon buttons | `aria-label` or `.sr-only` text |
| Structure | Semantic landmarks, skip link, sequential headings |

Agent-runnable greps for the deterministic failures (the scanners catch the rest):

```bash
# Images missing alt text
grep -rn "<img" resources/views/ --include="*.blade.php" | grep -v "alt=" || echo "OK all <img> have alt"

# Inputs that may lack a label (excluding hidden)
grep -rn "<input" resources/views/ --include="*.blade.php" | grep -v 'type="hidden"' | head -20

# Icon-only elements missing an accessible name
grep -rn 'class=".*fa-' resources/views/ --include="*.blade.php" | grep -v "aria-" || echo "OK icons labelled"

# Landmark / semantic elements present in layouts
grep -rn "<main\|<nav\|<header\|<footer" resources/views/layouts/ --include="*.blade.php"
```

Then add visible focus styles (never remove the outline globally) and a skip link to `#main-content`.

:::note[Who does this]
🔀 **User + Agent** — 🤖 **Agent** runs available browser scanners, tabs through key flows, snapshots focus order, and proposes fixes. 👤 **User** reviews judgment-heavy accessibility questions and any scanner that requires a personal browser extension/session.
:::

<Steps>

1. **Scan key pages, then verify the interactive checks** against every row of the table above.

   - ✅ Automated scanners are clean and the interactive checks (tab order, focus, contrast) all pass with evidence.

</Steps>

### 2. Verify cookie compliance (GDPR / CCPA)

Inventory every cookie, then verify consent actually gates the non-essential ones.

:::note[Who does this]
🔀 **User + Agent** — 🤖 **Agent** tests the consent banner in an isolated incognito browser (Accept / Reject / change-later), inventories cookies, and checks session config. 👤 **User** owns the legal decision that the banner text and categories are acceptable.
:::

<Steps>

1. **Inventory** all cookies (name, expiry, `HttpOnly`, `Secure`, `SameSite`) and classify them Essential / Functional / Analytics / Marketing.

   - ✅ Every cookie is listed with its attributes and a category.

2. **Verify session security** — session cookies need `HttpOnly=true`, `Secure=true`, `SameSite=lax`.

   ```bash
   php artisan tinker --execute="echo json_encode(\Illuminate\Support\Arr::only(config('session'), ['secure','http_only','same_site']));"
   # Expected: {"secure":true,"http_only":true,"same_site":"lax"} (production/staging APP_URL=https://…)
   ```

   - ✅ Runtime session config reports `secure`, `http_only`, and `same_site=lax` (not just `env()` lines in `config/session.php`).

3. **Scan for custom cookies in app code and enforce the lifetime ceilings.** Every custom cookie must carry the same security attributes as the session cookie.

   ```bash
   grep -rnE "Cookie::make|cookie\(|setcookie|->cookie\(" app/ routes/ --include="*.php"
   # Expected: each hit uses HttpOnly + Secure + SameSite; none sets a raw long-lived plaintext cookie
   ```

   **Lifetime ceilings:**

   | Cookie | Max lifetime |
   |---|---|
   | Session | 120 min |
   | Remember-me | 30 days |
   | Consent | 1 year |

   - ✅ Every custom cookie sets `HttpOnly` + `Secure` + `SameSite`, and no cookie exceeds its lifetime ceiling (session ≤ 120 min, remember-me ≤ 30 days, consent ≤ 1 year).

4. **Test the banner** in incognito: only essential cookies pre-consent; "Accept All" loads analytics/marketing; "Reject" keeps them blocked; preferences are changeable later.

   - ✅ Pre-consent loads only essential cookies; Accept/Reject behave correctly; preferences are editable later.

5. **Use one consent mechanism only** — if you use a third-party manager, disable the built-in one. Confirm the cookie policy page matches reality.

   - ✅ A single consent mechanism is active and the cookie policy page matches the real inventory.

</Steps>

## Checklist

Do not mark this step done until **every** box below is checked.

- [ ] **🔀 WCAG 2.1 AA passes** — scanners clean; keyboard, focus, contrast, and structure verified by browser automation where available plus human review for judgment-heavy calls.
- [ ] **🤖 Cookies inventoried** — every cookie listed with attributes and a category.
- [ ] **🤖 Session cookies secure** — runtime `config('session')` has `secure`, `http_only`, `same_site=lax`.
- [ ] **🔀 Banner gates non-essential** — incognito browser test confirms Accept/Reject and editable preferences; legal adequacy reviewed by the human.
- [ ] **🔀 One consent mechanism** — built-in disabled if a third-party manager is used; policy page matches.
- [ ] **🤖 Project state updated** — `Zaj-PROJECT.md` records scanner/date, consent mechanism, cookie-policy URL, legal-review owner, and any `Zaj-BACKLOG.md` accessibility/cookie blocker rows.

:::next[Next step]
[Functional QA + debugger review](/tech-stack/laravel/codecanyon/build/playbooks/setup-new/10-audit-qa/05-functional-qa/)
:::

STEP 0 — COLD-START ORIENTATION (do this BEFORE fetching any Part document; assume you have ZERO
prior context about this project):

1. Locate + identify. Run `pwd`. Read the project's `AGENTS.md` + `CLAUDE.md` if present so you
   know the repo rules and whether you are in the right project. Then read `Zaj-PROJECT.md` FIRST
   as the non-secret project bible: identity, environment matrix, toolchain versions, SSH aliases,
   deploy paths, and current phase. If `Zaj-PROJECT.md` is missing in a legacy project, read
   `Admin-Local/1-Project/1-Info/ProjectCard.md` as fallback, then create/update `Zaj-PROJECT.md`.

2. Read the state ledgers — READ BOTH OLD AND NEW NAMES (projects mid-migration use either):
   `Zaj-PROGRESS.md` OR `PROGRESS.md` (what earlier phases/steps already did, what's in-flight),
   `Zaj-BACKLOG.md` OR `BACKLOG.md` (phase-entry blockers, deferred work, and scheduled follow-up),
   and `Zaj-CUSTOMIZATIONS.md` OR `_CUSTOMIZATIONS.md` (vendor deviations + prior findings you must
   not re-derive or contradict).

3. Check git reality: `git branch --show-current`, `git log --oneline -8`, `git status --short`.
   - FRESH vs RESUMING: if commits/ledger show this phase (or earlier steps) already ran, you are
     RESUMING → verify-with-evidence, do NOT blindly re-run installer / migrate / db-create /
     asset-build. (This is the contract's reconcile rule.)
   - CONCURRENT-WORK check: uncommitted changes you didn't make, or HEAD ahead of the ledger, can
     mean ANOTHER agent is working this repo. Coordinate around hot files; do not commit over
     unrelated work. Routine tracker fixes remain agent-owned work unless they would overwrite a
     hot file another agent is editing.

4. Inherit rules + safety: skim `.claude/rules/` (project-specific vendor gotchas) and obey them +
   these non-negotiables — never echo secrets (verify by length/exit-code only), never re-run
   destructive/once-only steps, archive-don't-delete, honor 👤 vs 🤖.

5. How to fetch Part documents: prefer the ZajLibrary MCP `get_document` by SLUG. If the returned
   `commitShaShort` looks stale vs the live page (missing steps, old text), the index is behind →
   use `zajlibrary-local` (localhost) OR read the page's source `.mdx` directly from the ZajLibrary
   repo. NOTE: the MCP's "compare commitShaShort to your local git HEAD" instruction applies ONLY
   when you are working INSIDE the ZajLibrary repo — from THIS consuming project it is just a
   freshness/staleness signal, not a match to make.

6. Where to record: write current-truth facts to `Zaj-PROJECT.md`; write vendor deviations to
   `Zaj-CUSTOMIZATIONS.md`; write execution state to `Zaj-PROGRESS.md`; write blockers/deferred
   work to `Zaj-BACKLOG.md`. If a tracker row says open/deferred but you verify it is now done,
   fix the stale row in the same run with evidence — don't leave "closed in reality, open in tracker."
   File any guide bug/gap via the feedback clause (MCP `submit_feedback` +
   `Admin-Local/1-Project/playbook-feedback.md`) — log-then-continue, don't silently work around.

Only after Step 0 is complete, begin fetching Part 1.

AUTONOMY CONTRACT — complete accurate work unless a real human gate is required:
1. Treat ZajLibrary guidance as operational guidance, not a suggestion to summarize. If the user asked you to follow/apply/implement the page, do the work end to end in the real project until the page's exit criteria are met or a hard blocker is proven.
2. Do not ask the user whether to do routine agent-owned work: reading project rules, checking git state, updating progress/customization/feedback ledgers, running verification, fixing clear best-practice issues, or choosing the safer/professional default. Do it, cite evidence, and report what changed.
3. Ask the human only for true human-owned actions: credentials, API keys, paid/provider dashboards, DNS/production cutovers, destructive or irreversible operations, personal/business choices, legal/commercial decisions, or cases where two options are genuinely equal and the guide/project gives no tie-breaker.
4. If one option is clearly more secure, more professional, more maintainable, or better aligned with the guide/project rules, choose it and document the rationale instead of asking for a preference.
5. When you discover already-completed or partially-completed work, reconcile from evidence. Verify the end state, update the relevant ledger/checklist if state changed, and avoid re-running destructive or once-only commands.
6. Banned routine asks: "should I update trackers?", "should I commit?", "should I run verification?", "should I fix the stale ledger?", or "which option do you prefer?" when the guide/project makes one option clearly better.
7. If the guide has a gap or mismatch, log it through the project's documented feedback path and continue with the safest evidence-backed implementation when possible. Stop only when continuing would be unsafe, destructive, or would require a human-owned decision.

AUTHENTICATION BOUNDARY — hard, non-overridable:
An AI agent cannot type a password to authenticate, cannot log in, and cannot create an account in ANY environment (dev/staging included), even when the user authorizes it and the password is in the vault.
For every login-gated verification step (dashboard walk, user journey, admin panel, hPanel, registrar/provider dashboard): 👤 Human performs the ONE login, dashboard sign-in, account creation, or credential-entry moment. 🤖 Agent drives everything after the authenticated session exists — clicks, navigation, non-secret form fills, screenshots, checks.
For account creation, login, password-change, or password-reset forms, the human completes the credential/auth transaction through submit; the agent resumes after the account/session/credential change exists. Everything an agent can do without authenticating stays 🤖: public pages, viewport/mobile checks, API calls with an already-provided token, SSH/DB checks, and browser-driven configuration up to (but not including) a password/secret field. Only credential entry and the authentication/account-creation act are 👤.

Autonomy: Do all 🤖 work without asking — tracker updates, verification, signed commits, reconciling stale items to reality are the job, not questions. Stop for the human ONLY at genuine 👤 gates: real secrets/credentials, irreversible actions (prod deploy, real money, data deletion, force-push), or genuine WHAT/scope/business decisions.

Full ≠ optional: Autonomy does not mean minimal. Execute each Part fully — every Step, every # Expected: check, all states/sub-flows wired end-to-end. Never ship a happy-path subset as "done." If something genuinely can't finish in-session, it must be a real 👤/external gate (not a shortcut), stated exactly — what is deferred and why — as a tracked item before moving on. When the user says "do fully," honor it to completion.

EXECUTION CONTRACT — full coverage, no silent skips:
1. Before finishing a Part, you MUST account for EVERY item in the Part's `## Steps` (including each numbered sub-step inside <Steps> blocks) AND every box in `## Checklist`. Nothing is implicitly done.
2. Scope labels are not skip permission. `MUST`, `SHOULD`, `OPTIONAL`, quality-track, companion, and fast-mode labels explain gate priority; they do NOT remove an item from coverage. Default to FULL execution. Run `MUST-only`, `MUST+SHOULD-only`, gate-only, or fast mode only when the user explicitly asks for that mode. Even then, name every skipped `SHOULD` / `OPTIONAL` item that the chosen mode leaves out as ⏭ DEFERRED with why and when.
3. For EACH sub-step and EACH checklist box, do ONE of — and record which, with evidence:
     ✅ WALKED         — you ran the command/action; paste/point to the output it produced.
     🔍 VERIFIED-STATE — end-state already satisfied (idempotent step, or a prior session did it). Allowed, but you MUST cite the evidence (command output/file/DB state) proving it — never assert "already done" without proof.
     ⏭ DEFERRED        — legitimately out of scope now (a :::note[Who does this] 👤 step you're waiting on, or an explicit "later phase" pointer). State why + to when.
     ◐ PARTIAL         — some sub-parts done, some deferred; list exactly which and why.
4. Honor every `# Expected:` / ✅ bullet — compare actual output. On mismatch, first investigate safely and reconcile from evidence; STOP and ask only when the mismatch creates a real human gate, destructive risk, security risk, or equally valid choices. Honor :::caution/:::danger as hard gates. Honor 👤 vs 🤖.
5. Reconciliation is allowed (don't blindly re-run installers/migrations/db-create/asset builds) — but reconciliation without per-item disclosure is BANNED.
6. You may NOT declare the Part/Phase "done" while any `## Steps` Step, sub-step, or `## Checklist` box is unclassified. Silent omission = incomplete.
7. Server continuity: if a local/server URL was working before edits, capture a baseline first. After edits, verify the server still starts and the same URL still responds. For localhost, prefer the current route or the phase/page route the user is viewing. If the server was not running before, mark server continuity as N/A with evidence instead of pretending it was verified.
8. END every run with a COVERAGE ASSERTION table (one row per sub-step + per checklist box, plus a server-continuity row when edits touched code, config, docs UI, routes, assets, or generated prompt behavior):
     | Item (§/step or checklist box) | ✅WALKED / 🔍VERIFIED / ⏭DEFERRED / ◐PARTIAL | Evidence / why |
   Then confirm the page/phase Gate condition is observably met. If the table has any row that isn't ✅/🔍 (or a justified ⏭/◐), the step is NOT done.
9. Progress/state updates are part of execution: when the guide changes project state, update `Zaj-PROJECT.md`, `Zaj-PROGRESS.md`, `Zaj-BACKLOG.md`, `Zaj-CUSTOMIZATIONS.md`, and/or `playbook-feedback.md` yourself unless the project explicitly marks that exact write human-owned. Stale-open tracker rows that evidence proves done are bugs to fix, not notes to ask about.
10. Authentication boundary: an agent never types passwords, logs in, or creates accounts. Human performs the credential/authentication/account-creation transaction; agent resumes after the session or non-secret evidence exists.
11. Secrets: never put keys/passwords/.env values in code, commits, or chat; verify by length/exit-code only.

TL;DR

Objective — run the WCAG 2.1 AA checks (automated scanners + manual verification) and build the GDPR/CCPA cookie inventory with consent gating that actually blocks non-essential cookies — the audits that keep the app usable for everyone and keep it legal.

Steps at a glance:

Audit accessibility (WCAG 2.1 AA) — Run automated scanners (WAVE, axe DevTools) on key pages, then verify keyboard/focus/contrast with browser automation when available and human review for judgment-heavy calls.
Verify cookie compliance (GDPR / CCPA) — Inventory every cookie, then verify consent actually gates the non-essential ones.

Background

The audits that keep the app usable for everyone — and keep it legal. Automated tools catch deterministic failures, and browser automation can drive tab order, focus, and consent-banner behavior. Human review remains for judgment-heavy accessibility and legal adequacy calls.

Use Zaj-PROJECT.md to record the current accessibility/cookie posture: scanner/date, consent mechanism, cookie-policy URL, legal-review owner, and unresolved issues. Detailed evidence belongs in the Phase 10 report; unresolved blockers go to Zaj-BACKLOG.md.

Steps

1. Audit accessibility (WCAG 2.1 AA)

Run automated scanners (WAVE, axe DevTools) on key pages, then verify keyboard/focus behavior with browser automation where available.

Check	Requirement
Keyboard nav	Logical tab order, visible focus, no traps
Focus indicator	Never removed globally; `:focus { outline: 2px solid … }`
Images	Descriptive `alt`; `alt=""` for decorative
Form inputs	Every visible input has a `<label for>` or `aria-label`
Color contrast	4.5:1 normal text · 3:1 large text & UI
Icon buttons	`aria-label` or `.sr-only` text
Structure	Semantic landmarks, skip link, sequential headings

Agent-runnable greps for the deterministic failures (the scanners catch the rest):

# Images missing alt text
grep -rn "<img" resources/views/ --include="*.blade.php" | grep -v "alt=" || echo "OK all <img> have alt"

# Inputs that may lack a label (excluding hidden)
grep -rn "<input" resources/views/ --include="*.blade.php" | grep -v 'type="hidden"' | head -20

# Icon-only elements missing an accessible name
grep -rn 'class=".*fa-' resources/views/ --include="*.blade.php" | grep -v "aria-" || echo "OK icons labelled"

# Landmark / semantic elements present in layouts
grep -rn "<main\|<nav\|<header\|<footer" resources/views/layouts/ --include="*.blade.php"

Then add visible focus styles (never remove the outline globally) and a skip link to #main-content.

Scan key pages, then verify the interactive checks against every row of the table above.
- ✅ Automated scanners are clean and the interactive checks (tab order, focus, contrast) all pass with evidence.

Inventory every cookie, then verify consent actually gates the non-essential ones.

Inventory all cookies (name, expiry, HttpOnly, Secure, SameSite) and classify them Essential / Functional / Analytics / Marketing.
- ✅ Every cookie is listed with its attributes and a category.

Verify session security — session cookies need HttpOnly=true, Secure=true, SameSite=lax.

php artisan tinker --execute="echo json_encode(\Illuminate\Support\Arr::only(config('session'), ['secure','http_only','same_site']));"
# Expected: {"secure":true,"http_only":true,"same_site":"lax"} (production/staging APP_URL=https://…)

✅ Runtime session config reports secure, http_only, and same_site=lax (not just env() lines in config/session.php).

Scan for custom cookies in app code and enforce the lifetime ceilings. Every custom cookie must carry the same security attributes as the session cookie.
Terminal window
```
grep -rnE "Cookie::make|cookie\(|setcookie|->cookie\(" app/ routes/ --include="*.php"
# Expected: each hit uses HttpOnly + Secure + SameSite; none sets a raw long-lived plaintext cookie
```
Lifetime ceilings:

Cookie Max lifetime
Session 120 min
Remember-me 30 days
Consent 1 year
- ✅ Every custom cookie sets HttpOnly + Secure + SameSite, and no cookie exceeds its lifetime ceiling (session ≤ 120 min, remember-me ≤ 30 days, consent ≤ 1 year).
Test the banner in incognito: only essential cookies pre-consent; “Accept All” loads analytics/marketing; “Reject” keeps them blocked; preferences are changeable later.
- ✅ Pre-consent loads only essential cookies; Accept/Reject behave correctly; preferences are editable later.
Use one consent mechanism only — if you use a third-party manager, disable the built-in one. Confirm the cookie policy page matches reality.
- ✅ A single consent mechanism is active and the cookie policy page matches the real inventory.

Cookie	Max lifetime
Session	120 min
Remember-me	30 days
Consent	1 year

Checklist

Do not mark this step done until every box below is checked.

🔀 WCAG 2.1 AA passes — scanners clean; keyboard, focus, contrast, and structure verified by browser automation where available plus human review for judgment-heavy calls.
🤖 Cookies inventoried — every cookie listed with attributes and a category.
🤖 Session cookies secure — runtime config('session') has secure, http_only, same_site=lax.
🔀 Banner gates non-essential — incognito browser test confirms Accept/Reject and editable preferences; legal adequacy reviewed by the human.
🔀 One consent mechanism — built-in disabled if a third-party manager is used; policy page matches.
🤖 Project state updated — Zaj-PROJECT.md records scanner/date, consent mechanism, cookie-policy URL, legal-review owner, and any Zaj-BACKLOG.md accessibility/cookie blocker rows.

Functional QA + debugger review

STEP 0 — COLD-START ORIENTATION (do this BEFORE fetching any Part document; assume you have ZERO
prior context about this project):

1. Locate + identify. Run `pwd`. Read the project's `AGENTS.md` + `CLAUDE.md` if present so you
   know the repo rules and whether you are in the right project. Then read `Zaj-PROJECT.md` FIRST
   as the non-secret project bible: identity, environment matrix, toolchain versions, SSH aliases,
   deploy paths, and current phase. If `Zaj-PROJECT.md` is missing in a legacy project, read
   `Admin-Local/1-Project/1-Info/ProjectCard.md` as fallback, then create/update `Zaj-PROJECT.md`.

2. Read the state ledgers — READ BOTH OLD AND NEW NAMES (projects mid-migration use either):
   `Zaj-PROGRESS.md` OR `PROGRESS.md` (what earlier phases/steps already did, what's in-flight),
   `Zaj-BACKLOG.md` OR `BACKLOG.md` (phase-entry blockers, deferred work, and scheduled follow-up),
   and `Zaj-CUSTOMIZATIONS.md` OR `_CUSTOMIZATIONS.md` (vendor deviations + prior findings you must
   not re-derive or contradict).

3. Check git reality: `git branch --show-current`, `git log --oneline -8`, `git status --short`.
   - FRESH vs RESUMING: if commits/ledger show this phase (or earlier steps) already ran, you are
     RESUMING → verify-with-evidence, do NOT blindly re-run installer / migrate / db-create /
     asset-build. (This is the contract's reconcile rule.)
   - CONCURRENT-WORK check: uncommitted changes you didn't make, or HEAD ahead of the ledger, can
     mean ANOTHER agent is working this repo. Coordinate around hot files; do not commit over
     unrelated work. Routine tracker fixes remain agent-owned work unless they would overwrite a
     hot file another agent is editing.

4. Inherit rules + safety: skim `.claude/rules/` (project-specific vendor gotchas) and obey them +
   these non-negotiables — never echo secrets (verify by length/exit-code only), never re-run
   destructive/once-only steps, archive-don't-delete, honor 👤 vs 🤖.

5. How to fetch Part documents: prefer the ZajLibrary MCP `get_document` by SLUG. If the returned
   `commitShaShort` looks stale vs the live page (missing steps, old text), the index is behind →
   use `zajlibrary-local` (localhost) OR read the page's source `.mdx` directly from the ZajLibrary
   repo. NOTE: the MCP's "compare commitShaShort to your local git HEAD" instruction applies ONLY
   when you are working INSIDE the ZajLibrary repo — from THIS consuming project it is just a
   freshness/staleness signal, not a match to make.

6. Where to record: write current-truth facts to `Zaj-PROJECT.md`; write vendor deviations to
   `Zaj-CUSTOMIZATIONS.md`; write execution state to `Zaj-PROGRESS.md`; write blockers/deferred
   work to `Zaj-BACKLOG.md`. If a tracker row says open/deferred but you verify it is now done,
   fix the stale row in the same run with evidence — don't leave "closed in reality, open in tracker."
   File any guide bug/gap via the feedback clause (MCP `submit_feedback` +
   `Admin-Local/1-Project/playbook-feedback.md`) — log-then-continue, don't silently work around.

Only after Step 0 is complete, begin fetching Part 1.

# ZajLibrary — implementation playbook

You are a **senior implementation assistant** working inside the user’s real development environment (terminal, editor, git repo). You are **not** a documentation writer, tutor, or library editor.

**Mission:** Execute the procedure described below in the user’s real project workspace — create or modify the files and run the commands it specifies. Do not just summarize it.

AUTONOMY CONTRACT — complete accurate work unless a real human gate is required:
1. Treat ZajLibrary guidance as operational guidance, not a suggestion to summarize. If the user asked you to follow/apply/implement the page, do the work end to end in the real project until the page's exit criteria are met or a hard blocker is proven.
2. Do not ask the user whether to do routine agent-owned work: reading project rules, checking git state, updating progress/customization/feedback ledgers, running verification, fixing clear best-practice issues, or choosing the safer/professional default. Do it, cite evidence, and report what changed.
3. Ask the human only for true human-owned actions: credentials, API keys, paid/provider dashboards, DNS/production cutovers, destructive or irreversible operations, personal/business choices, legal/commercial decisions, or cases where two options are genuinely equal and the guide/project gives no tie-breaker.
4. If one option is clearly more secure, more professional, more maintainable, or better aligned with the guide/project rules, choose it and document the rationale instead of asking for a preference.
5. When you discover already-completed or partially-completed work, reconcile from evidence. Verify the end state, update the relevant ledger/checklist if state changed, and avoid re-running destructive or once-only commands.
6. Banned routine asks: "should I update trackers?", "should I commit?", "should I run verification?", "should I fix the stale ledger?", or "which option do you prefer?" when the guide/project makes one option clearly better.
7. If the guide has a gap or mismatch, log it through the project's documented feedback path and continue with the safest evidence-backed implementation when possible. Stop only when continuing would be unsafe, destructive, or would require a human-owned decision.

AUTHENTICATION BOUNDARY — hard, non-overridable:
An AI agent cannot type a password to authenticate, cannot log in, and cannot create an account in ANY environment (dev/staging included), even when the user authorizes it and the password is in the vault.
For every login-gated verification step (dashboard walk, user journey, admin panel, hPanel, registrar/provider dashboard): 👤 Human performs the ONE login, dashboard sign-in, account creation, or credential-entry moment. 🤖 Agent drives everything after the authenticated session exists — clicks, navigation, non-secret form fills, screenshots, checks.
For account creation, login, password-change, or password-reset forms, the human completes the credential/auth transaction through submit; the agent resumes after the account/session/credential change exists. Everything an agent can do without authenticating stays 🤖: public pages, viewport/mobile checks, API calls with an already-provided token, SSH/DB checks, and browser-driven configuration up to (but not including) a password/secret field. Only credential entry and the authentication/account-creation act are 👤.

## Metadata
- title: 4 · Accessibility & cookie compliance
- url: https://library.zajapps.com/tech-stack/laravel/codecanyon/build/playbooks/setup-new/10-audit-qa/04-accessibility-cookies/
- shelf: Build & Create
- doc_type: implementation playbook
- status: current
- kind: playbook
- category: tech-stack
- subcategory: laravel
- topic: codecanyon
- phase: 10
- part_number: 4 (legacy stepNumber frontmatter)
- legacy_step_number: 4
- est_time: ~1 hr
- description: WCAG 2.1 AA checks (automated scanners + manual verification) and GDPR/CCPA cookie inventory with consent gating that actually blocks non-essential cookies.
- tags: codecanyon, laravel, accessibility, gdpr, cookies

## Execution rules (binding)
- This is Part 4 of phase 10 (~1 hr) — execute this Part fully, then stop at its `## Checklist`.
- Autonomy: Do all 🤖 work without asking — tracker updates, verification, signed commits, reconciling stale items to reality are the job, not questions. Stop for the human ONLY at genuine 👤 gates: real secrets/credentials, irreversible actions (prod deploy, real money, data deletion, force-push), or genuine WHAT/scope/business decisions.
- Full ≠ optional: Autonomy does not mean minimal. Execute each Part fully — every Step, every # Expected: check, all states/sub-flows wired end-to-end. Never ship a happy-path subset as "done." If something genuinely can't finish in-session, it must be a real 👤/external gate (not a shortcut), stated exactly — what is deferred and why — as a tracked item before moving on. When the user says "do fully," honor it to completion.
- For playbooks, treat a Part as the `.mdx` page-level execution unit and each item in `## Steps` as a Step inside that Part.
- Follow `## Steps` in order. Do not skip Steps or declare the work complete early.
- Respect `:::note[Who does this]`: 👤 **User** steps (authentication, account creation, password/secret entry, paid/provider dashboards, destructive actions) need the human; 🤖 **Agent** steps you run in the shell or browser after the authenticated session exists.
- After every command, compare its output to the `# Expected:` comment or ✅ bullet beneath it. If it differs, investigate safely and reconcile from evidence first; ask only when the mismatch creates a real human gate, destructive risk, security risk, or equally valid choices.
- Honor `:::caution` / `:::note` callouts as hard gates (a step may forbid a command at this stage).
- Do not mark the Part done until every `## Checklist` item is genuinely satisfied.
- Scope: implement only what this Part describes — no refactors, added features, or later-phase work unless the Part says so.
- When the work changes project state, update the relevant progress/customization/feedback ledger yourself; do not ask whether routine state tracking should be updated.
- When reporting progress, cite the `##` / `###` headings you completed or got blocked on.
- Secrets: never put API keys, passwords, or `.env` values in frontend code, commits, or chat logs — use server-side `.env` / config only, and keep `.env` gitignored.
- EXECUTION CONTRACT — full coverage, no silent skips:
1. Before finishing a Part, you MUST account for EVERY item in the Part's `## Steps` (including each numbered sub-step inside <Steps> blocks) AND every box in `## Checklist`. Nothing is implicitly done.
2. Scope labels are not skip permission. `MUST`, `SHOULD`, `OPTIONAL`, quality-track, companion, and fast-mode labels explain gate priority; they do NOT remove an item from coverage. Default to FULL execution. Run `MUST-only`, `MUST+SHOULD-only`, gate-only, or fast mode only when the user explicitly asks for that mode. Even then, name every skipped `SHOULD` / `OPTIONAL` item that the chosen mode leaves out as ⏭ DEFERRED with why and when.
3. For EACH sub-step and EACH checklist box, do ONE of — and record which, with evidence:
     ✅ WALKED         — you ran the command/action; paste/point to the output it produced.
     🔍 VERIFIED-STATE — end-state already satisfied (idempotent step, or a prior session did it). Allowed, but you MUST cite the evidence (command output/file/DB state) proving it — never assert "already done" without proof.
     ⏭ DEFERRED        — legitimately out of scope now (a :::note[Who does this] 👤 step you're waiting on, or an explicit "later phase" pointer). State why + to when.
     ◐ PARTIAL         — some sub-parts done, some deferred; list exactly which and why.
4. Honor every `# Expected:` / ✅ bullet — compare actual output. On mismatch, first investigate safely and reconcile from evidence; STOP and ask only when the mismatch creates a real human gate, destructive risk, security risk, or equally valid choices. Honor :::caution/:::danger as hard gates. Honor 👤 vs 🤖.
5. Reconciliation is allowed (don't blindly re-run installers/migrations/db-create/asset builds) — but reconciliation without per-item disclosure is BANNED.
6. You may NOT declare the Part/Phase "done" while any `## Steps` Step, sub-step, or `## Checklist` box is unclassified. Silent omission = incomplete.
7. Server continuity: if a local/server URL was working before edits, capture a baseline first. After edits, verify the server still starts and the same URL still responds. For localhost, prefer the current route or the phase/page route the user is viewing. If the server was not running before, mark server continuity as N/A with evidence instead of pretending it was verified.
8. END every run with a COVERAGE ASSERTION table (one row per sub-step + per checklist box, plus a server-continuity row when edits touched code, config, docs UI, routes, assets, or generated prompt behavior):
     | Item (§/step or checklist box) | ✅WALKED / 🔍VERIFIED / ⏭DEFERRED / ◐PARTIAL | Evidence / why |
   Then confirm the page/phase Gate condition is observably met. If the table has any row that isn't ✅/🔍 (or a justified ⏭/◐), the step is NOT done.
9. Progress/state updates are part of execution: when the guide changes project state, update `Zaj-PROJECT.md`, `Zaj-PROGRESS.md`, `Zaj-BACKLOG.md`, `Zaj-CUSTOMIZATIONS.md`, and/or `playbook-feedback.md` yourself unless the project explicitly marks that exact write human-owned. Stale-open tracker rows that evidence proves done are bugs to fix, not notes to ask about.
10. Authentication boundary: an agent never types passwords, logs in, or creates accounts. Human performs the credential/authentication/account-creation transaction; agent resumes after the session or non-secret evidence exists.
11. Secrets: never put keys/passwords/.env values in code, commits, or chat; verify by length/exit-code only.

---

# 4 · Accessibility & cookie compliance

## TL;DR

**Objective** — run the WCAG 2.1 AA checks (automated scanners + manual verification) and build the GDPR/CCPA cookie inventory with consent gating that actually blocks non-essential cookies — the audits that keep the app usable for everyone and keep it legal.

**Steps at a glance:**
1. **Audit accessibility (WCAG 2.1 AA)** — Run automated scanners (WAVE, axe DevTools) on key pages, then verify
   keyboard/focus/contrast with browser automation when available and human review for judgment-heavy calls.
2. **Verify cookie compliance (GDPR / CCPA)** — Inventory every cookie, then verify consent actually gates the
   non-essential ones.

:::note[User part + done-when]
**🔀 User part** — browser-driven checks are agent-owned when Browser/Playwright automation is available: run axe/WAVE where available, tab through key pages, click Accept/Reject in an isolated incognito context, and capture evidence. The human reviews judgment-heavy accessibility calls and legal consent adequacy.

**Done when** key pages pass WCAG 2.1 AA, every cookie is inventoried and classified, and the consent banner provably gates non-essential cookies pre-consent. &nbsp;·&nbsp; **⏱ ~1 hr** &nbsp;·&nbsp; 🔀 mixed (🤖 browser/scanner/config checks, 👤 judgment-heavy legal/accessibility review).
:::

## Background

The audits that keep the app usable for everyone — and keep it legal. Automated tools catch deterministic failures, and browser automation can drive tab order, focus, and consent-banner behavior. Human review remains for judgment-heavy accessibility and legal adequacy calls.

Use `Zaj-PROJECT.md` to record the current accessibility/cookie posture: scanner/date, consent mechanism, cookie-policy URL, legal-review owner, and unresolved issues. Detailed evidence belongs in the Phase 10 report; unresolved blockers go to `Zaj-BACKLOG.md`.

## Steps

### 1. Audit accessibility (WCAG 2.1 AA)

Run automated scanners (WAVE, axe DevTools) on key pages, then verify keyboard/focus behavior with browser automation where available.

| Check | Requirement |
|---|---|
| Keyboard nav | Logical tab order, visible focus, no traps |
| Focus indicator | Never removed globally; `:focus { outline: 2px solid … }` |
| Images | Descriptive `alt`; `alt=""` for decorative |
| Form inputs | Every visible input has a `<label for>` or `aria-label` |
| Color contrast | 4.5:1 normal text · 3:1 large text & UI |
| Icon buttons | `aria-label` or `.sr-only` text |
| Structure | Semantic landmarks, skip link, sequential headings |

Agent-runnable greps for the deterministic failures (the scanners catch the rest):

```bash
# Images missing alt text
grep -rn "<img" resources/views/ --include="*.blade.php" | grep -v "alt=" || echo "OK all <img> have alt"

# Inputs that may lack a label (excluding hidden)
grep -rn "<input" resources/views/ --include="*.blade.php" | grep -v 'type="hidden"' | head -20

# Icon-only elements missing an accessible name
grep -rn 'class=".*fa-' resources/views/ --include="*.blade.php" | grep -v "aria-" || echo "OK icons labelled"

# Landmark / semantic elements present in layouts
grep -rn "<main\|<nav\|<header\|<footer" resources/views/layouts/ --include="*.blade.php"
```

Then add visible focus styles (never remove the outline globally) and a skip link to `#main-content`.

:::note[Who does this]
🔀 **User + Agent** — 🤖 **Agent** runs available browser scanners, tabs through key flows, snapshots focus order, and proposes fixes. 👤 **User** reviews judgment-heavy accessibility questions and any scanner that requires a personal browser extension/session.
:::

<Steps>

1. **Scan key pages, then verify the interactive checks** against every row of the table above.

   - ✅ Automated scanners are clean and the interactive checks (tab order, focus, contrast) all pass with evidence.

</Steps>

### 2. Verify cookie compliance (GDPR / CCPA)

Inventory every cookie, then verify consent actually gates the non-essential ones.

:::note[Who does this]
🔀 **User + Agent** — 🤖 **Agent** tests the consent banner in an isolated incognito browser (Accept / Reject / change-later), inventories cookies, and checks session config. 👤 **User** owns the legal decision that the banner text and categories are acceptable.
:::

<Steps>

1. **Inventory** all cookies (name, expiry, `HttpOnly`, `Secure`, `SameSite`) and classify them Essential / Functional / Analytics / Marketing.

   - ✅ Every cookie is listed with its attributes and a category.

2. **Verify session security** — session cookies need `HttpOnly=true`, `Secure=true`, `SameSite=lax`.

   ```bash
   php artisan tinker --execute="echo json_encode(\Illuminate\Support\Arr::only(config('session'), ['secure','http_only','same_site']));"
   # Expected: {"secure":true,"http_only":true,"same_site":"lax"} (production/staging APP_URL=https://…)
   ```

   - ✅ Runtime session config reports `secure`, `http_only`, and `same_site=lax` (not just `env()` lines in `config/session.php`).

3. **Scan for custom cookies in app code and enforce the lifetime ceilings.** Every custom cookie must carry the same security attributes as the session cookie.

   ```bash
   grep -rnE "Cookie::make|cookie\(|setcookie|->cookie\(" app/ routes/ --include="*.php"
   # Expected: each hit uses HttpOnly + Secure + SameSite; none sets a raw long-lived plaintext cookie
   ```

   **Lifetime ceilings:**

   | Cookie | Max lifetime |
   |---|---|
   | Session | 120 min |
   | Remember-me | 30 days |
   | Consent | 1 year |

   - ✅ Every custom cookie sets `HttpOnly` + `Secure` + `SameSite`, and no cookie exceeds its lifetime ceiling (session ≤ 120 min, remember-me ≤ 30 days, consent ≤ 1 year).

4. **Test the banner** in incognito: only essential cookies pre-consent; "Accept All" loads analytics/marketing; "Reject" keeps them blocked; preferences are changeable later.

   - ✅ Pre-consent loads only essential cookies; Accept/Reject behave correctly; preferences are editable later.

5. **Use one consent mechanism only** — if you use a third-party manager, disable the built-in one. Confirm the cookie policy page matches reality.

   - ✅ A single consent mechanism is active and the cookie policy page matches the real inventory.

</Steps>

## Checklist

Do not mark this step done until **every** box below is checked.

- [ ] **🔀 WCAG 2.1 AA passes** — scanners clean; keyboard, focus, contrast, and structure verified by browser automation where available plus human review for judgment-heavy calls.
- [ ] **🤖 Cookies inventoried** — every cookie listed with attributes and a category.
- [ ] **🤖 Session cookies secure** — runtime `config('session')` has `secure`, `http_only`, `same_site=lax`.
- [ ] **🔀 Banner gates non-essential** — incognito browser test confirms Accept/Reject and editable preferences; legal adequacy reviewed by the human.
- [ ] **🔀 One consent mechanism** — built-in disabled if a third-party manager is used; policy page matches.
- [ ] **🤖 Project state updated** — `Zaj-PROJECT.md` records scanner/date, consent mechanism, cookie-policy URL, legal-review owner, and any `Zaj-BACKLOG.md` accessibility/cookie blocker rows.

:::next[Next step]
[Functional QA + debugger review](/tech-stack/laravel/codecanyon/build/playbooks/setup-new/10-audit-qa/05-functional-qa/)
:::

# 4 · Accessibility & cookie compliance

> Source: https://library.zajapps.com/tech-stack/laravel/codecanyon/build/playbooks/setup-new/10-audit-qa/04-accessibility-cookies/

## TL;DR

**Objective** — run the WCAG 2.1 AA checks (automated scanners + manual verification) and build the GDPR/CCPA cookie inventory with consent gating that actually blocks non-essential cookies — the audits that keep the app usable for everyone and keep it legal.

**Steps at a glance:**
1. **Audit accessibility (WCAG 2.1 AA)** — Run automated scanners (WAVE, axe DevTools) on key pages, then verify
   keyboard/focus/contrast with browser automation when available and human review for judgment-heavy calls.
2. **Verify cookie compliance (GDPR / CCPA)** — Inventory every cookie, then verify consent actually gates the
   non-essential ones.

:::note[User part + done-when]
**🔀 User part** — browser-driven checks are agent-owned when Browser/Playwright automation is available: run axe/WAVE where available, tab through key pages, click Accept/Reject in an isolated incognito context, and capture evidence. The human reviews judgment-heavy accessibility calls and legal consent adequacy.

**Done when** key pages pass WCAG 2.1 AA, every cookie is inventoried and classified, and the consent banner provably gates non-essential cookies pre-consent. &nbsp;·&nbsp; **⏱ ~1 hr** &nbsp;·&nbsp; 🔀 mixed (🤖 browser/scanner/config checks, 👤 judgment-heavy legal/accessibility review).
:::

## Background

The audits that keep the app usable for everyone — and keep it legal. Automated tools catch deterministic failures, and browser automation can drive tab order, focus, and consent-banner behavior. Human review remains for judgment-heavy accessibility and legal adequacy calls.

Use `Zaj-PROJECT.md` to record the current accessibility/cookie posture: scanner/date, consent mechanism, cookie-policy URL, legal-review owner, and unresolved issues. Detailed evidence belongs in the Phase 10 report; unresolved blockers go to `Zaj-BACKLOG.md`.

## Steps

### 1. Audit accessibility (WCAG 2.1 AA)

Run automated scanners (WAVE, axe DevTools) on key pages, then verify keyboard/focus behavior with browser automation where available.

| Check | Requirement |
|---|---|
| Keyboard nav | Logical tab order, visible focus, no traps |
| Focus indicator | Never removed globally; `:focus { outline: 2px solid … }` |
| Images | Descriptive `alt`; `alt=""` for decorative |
| Form inputs | Every visible input has a `<label for>` or `aria-label` |
| Color contrast | 4.5:1 normal text · 3:1 large text & UI |
| Icon buttons | `aria-label` or `.sr-only` text |
| Structure | Semantic landmarks, skip link, sequential headings |

Agent-runnable greps for the deterministic failures (the scanners catch the rest):

```bash
# Images missing alt text
grep -rn "<img" resources/views/ --include="*.blade.php" | grep -v "alt=" || echo "OK all <img> have alt"

# Inputs that may lack a label (excluding hidden)
grep -rn "<input" resources/views/ --include="*.blade.php" | grep -v 'type="hidden"' | head -20

# Icon-only elements missing an accessible name
grep -rn 'class=".*fa-' resources/views/ --include="*.blade.php" | grep -v "aria-" || echo "OK icons labelled"

# Landmark / semantic elements present in layouts
grep -rn "<main\|<nav\|<header\|<footer" resources/views/layouts/ --include="*.blade.php"
```

Then add visible focus styles (never remove the outline globally) and a skip link to `#main-content`.

:::note[Who does this]
🔀 **User + Agent** — 🤖 **Agent** runs available browser scanners, tabs through key flows, snapshots focus order, and proposes fixes. 👤 **User** reviews judgment-heavy accessibility questions and any scanner that requires a personal browser extension/session.
:::

<Steps>

1. **Scan key pages, then verify the interactive checks** against every row of the table above.

   - ✅ Automated scanners are clean and the interactive checks (tab order, focus, contrast) all pass with evidence.

</Steps>

### 2. Verify cookie compliance (GDPR / CCPA)

Inventory every cookie, then verify consent actually gates the non-essential ones.

:::note[Who does this]
🔀 **User + Agent** — 🤖 **Agent** tests the consent banner in an isolated incognito browser (Accept / Reject / change-later), inventories cookies, and checks session config. 👤 **User** owns the legal decision that the banner text and categories are acceptable.
:::

<Steps>

1. **Inventory** all cookies (name, expiry, `HttpOnly`, `Secure`, `SameSite`) and classify them Essential / Functional / Analytics / Marketing.

   - ✅ Every cookie is listed with its attributes and a category.

2. **Verify session security** — session cookies need `HttpOnly=true`, `Secure=true`, `SameSite=lax`.

   ```bash
   php artisan tinker --execute="echo json_encode(\Illuminate\Support\Arr::only(config('session'), ['secure','http_only','same_site']));"
   # Expected: {"secure":true,"http_only":true,"same_site":"lax"} (production/staging APP_URL=https://…)
   ```

   - ✅ Runtime session config reports `secure`, `http_only`, and `same_site=lax` (not just `env()` lines in `config/session.php`).

3. **Scan for custom cookies in app code and enforce the lifetime ceilings.** Every custom cookie must carry the same security attributes as the session cookie.

   ```bash
   grep -rnE "Cookie::make|cookie\(|setcookie|->cookie\(" app/ routes/ --include="*.php"
   # Expected: each hit uses HttpOnly + Secure + SameSite; none sets a raw long-lived plaintext cookie
   ```

   **Lifetime ceilings:**

   | Cookie | Max lifetime |
   |---|---|
   | Session | 120 min |
   | Remember-me | 30 days |
   | Consent | 1 year |

   - ✅ Every custom cookie sets `HttpOnly` + `Secure` + `SameSite`, and no cookie exceeds its lifetime ceiling (session ≤ 120 min, remember-me ≤ 30 days, consent ≤ 1 year).

4. **Test the banner** in incognito: only essential cookies pre-consent; "Accept All" loads analytics/marketing; "Reject" keeps them blocked; preferences are changeable later.

   - ✅ Pre-consent loads only essential cookies; Accept/Reject behave correctly; preferences are editable later.

5. **Use one consent mechanism only** — if you use a third-party manager, disable the built-in one. Confirm the cookie policy page matches reality.

   - ✅ A single consent mechanism is active and the cookie policy page matches the real inventory.

</Steps>

## Checklist

Do not mark this step done until **every** box below is checked.

- [ ] **🔀 WCAG 2.1 AA passes** — scanners clean; keyboard, focus, contrast, and structure verified by browser automation where available plus human review for judgment-heavy calls.
- [ ] **🤖 Cookies inventoried** — every cookie listed with attributes and a category.
- [ ] **🤖 Session cookies secure** — runtime `config('session')` has `secure`, `http_only`, `same_site=lax`.
- [ ] **🔀 Banner gates non-essential** — incognito browser test confirms Accept/Reject and editable preferences; legal adequacy reviewed by the human.
- [ ] **🔀 One consent mechanism** — built-in disabled if a third-party manager is used; policy page matches.
- [ ] **🤖 Project state updated** — `Zaj-PROJECT.md` records scanner/date, consent mechanism, cookie-policy URL, legal-review owner, and any `Zaj-BACKLOG.md` accessibility/cookie blocker rows.

:::next[Next step]
[Functional QA + debugger review](/tech-stack/laravel/codecanyon/build/playbooks/setup-new/10-audit-qa/05-functional-qa/)
:::