# Accessibility (`accessibility.md`)

Concrete obligations inherited from **`layouts/app.blade.php`**, Blade partial instrumentation, & dashboard ergonomics.

## Focus management

`:focus-visible` styling:

```
outline: 2px solid #00b7b2;
outline-offset: 2px;
```

Applies globally to anchors, buttons, editable fields, purposeful `[tabindex]`.

Ensure new components do NOT `outline-none` destructively unless replacement affordance rivals contrast requirements.

## Contrast cues

Neutral text combos documented beside class definitions intentionally (e.g. `.text-neutral-500` explanatory comment on white backdrop compliance).

Inverted sections (neutral-900 background + white typography) maintain minimum AA large text expectations—QA before shipping subtle gray-on-dark microcopy.

## Touch sizing

≤767px width:

```
a, button { min-height: 44px; min-width: 44px; }
```

When compact UI needed, expand hit area via padding—not only font scaling.

## Motion safety

Reduced motion resets animation durations (`0.01ms effective`) & neutralizes `.reveal` transforms.

Consult [`animations.md`](animations.md).

## Landmark & semantics

Single `<main id="main-content">` scaffolding in layouts; partials augment with `aria-label` mega sections when appropriate (`sticky-cta-bar` complementary role).

FAQ accordions toggle `aria-expanded` + pair with headings that remain reachable via keyboard traversal.

Dashboard context menus mimic desktop app patterns yet must:

- Maintain `aria-haspopup`
- Trap focus sparingly unless modal semantics applied

## Hidden labeling use cases

Implement `sr-only` labels paired with visibly minimal search fields (dashboard design hub search input sets example).

### Testing checklist manual

| Check | PASS criteria |
| --- | --- |
| Tab order logical | Mirrors visual priority |
| Visible focus halo | Present on CTAs/forms |
| Accordion parity | ENTER/ SPACE toggling |
| Color independence | Icons/text convey state |
| Screen reader headings | Hierarchy not skipped arbitrarily |