- Rewrite README.md with current architecture, features and stack - Update docs/API.md with all current endpoints (corporate, BI, client 360) - Update docs/ARCHITECTURE.md with cache, modular queries, services, ETL - Update docs/GUIA-USUARIO.md for all roles (admin, corporate, agente) - Add docs/INDEX.md documentation index - Add PROJETO.md comprehensive project reference - Add BI-CCC-Implementation-Guide.md - Include AI agent configs (.claude, .agents, .gemini, _bmad) - Add netbird VPN configuration - Add status report Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2.0 KiB
2.0 KiB
Accessibility Specification
Include when: Specifying interactive elements, forms, or navigation
For Each Interactive Element
When documenting buttons, links, inputs, add:
| Property | Value |
|----------|-------|
| aria-label | "{What it does}" |
| Keyboard | {Enter / Space / Arrow keys} |
| Focus style | {ring / outline / highlight} |
Example:
#### Submit Button
**OBJECT ID:** `form-submit`
| Property | Value |
|----------|-------|
| aria-label | "Submit booking request" |
| Keyboard | Enter or Space |
| Focus | 2px blue ring |
| Disabled state | aria-disabled="true", gray, no focus |
Tab Order
Document the logical sequence:
## Keyboard Flow
1. `header-logo` → Home link
2. `header-nav` → Main navigation
3. `main-content` → Skip to here
4. `form-name` → First input
5. `form-email` → Second input
6. `form-submit` → Submit button
Dynamic Content
When content changes without page reload:
| Element | Announces |
|---------|-----------|
| `toast-success` | aria-live="polite" — "Booking confirmed" |
| `error-message` | aria-live="assertive" — Error text |
| `loading-spinner` | aria-busy="true" on parent |
Color Independence
For status indicators, ensure alternatives:
| Status | Color | Also Has |
|---|---|---|
| Success | Green | Checkmark icon + "Complete" text |
| Error | Red | Warning icon + error message |
| Active | Blue | Bold text + underline |
Form Errors
Link errors to fields:
#### Email Error
**OBJECT ID:** `form-email-error`
| Property | Value |
|----------|-------|
| aria-describedby | Links to `form-email` |
| Role | "alert" |
| Content | "Please enter a valid email" |
Quick Checks
Before finalizing:
- Every button has aria-label or visible text
- Every image has alt (or alt="" if decorative)
- Every input has associated label
- Focus visible on all interactive elements
- Status not conveyed by color alone