Files
xamxam/todo/04-accessibility.md
Pontoporeia e1ce900113 a11y: WCAG 2.5.5 target sizes + 2.5.3 label-in-name fixes
Increase touch/click target sizes to meet WCAG 2.5.5 (minimum 44×44px
for navigation, 32px for admin UI controls):

- main.css / search.css: pagination buttons 2rem → min-height/min-width
  2.75rem (44px). Changed display to inline-flex for proper centering.
- admin.css: .admin-btn-sm gains min-height: 2rem (32px) and switches
  to inline-flex so the constraint is respected.
- admin.css: .admin-btn-remove (jury ✕ buttons) gains min-height: 2rem
  and inline-flex display + explicit cursor:pointer.

WCAG 2.5.3 label-in-name — jury remove buttons already had aria-label;
wrap the visible ✕ glyph in <span aria-hidden='true'> so screen readers
hear only the aria-label, not the symbol:

- templates/partials/form/jury-fieldset.php: all three ✕ occurrences
  (static PHP blocks + JS-generated innerHTML string) wrapped.

WCAG 4.1.2 / semantic HTML:
- admin/index.php: add role='toolbar' aria-label='Actions groupées' to
  the bulk-actions bar.
2026-04-06 15:32:41 +02:00

79 lines
4.2 KiB
Markdown

# Accessibility Audit (WCAG 2.1 AA)
## 1.1.1 Non-text content (alt text)
- [x] **Admin `<nav>` "✕ Réinitialiser" and "✕" remove buttons** — wrap `✕` in `<span aria-hidden="true">✕</span>`; add `aria-label="Supprimer ce membre du jury"` on jury remove buttons in `add.php`/`edit.php`
## 1.3.1 Info and relationships
- [ ] **Admin form rows: multi-input rows (languages, formats)**`<label class="admin-label">` without `for` labels a group of checkboxes; replace with `<fieldset>/<legend>`
- [ ] **Status badges in `admin/index.php` convey state by colour alone** — add visible non-colour distinction (prefix icon with `aria-hidden="true"`) and `aria-label="Statut : Publié"` on badge `<span>`
## 1.3.4 / 1.3.5 Orientation & Input purpose
- [ ] **No `autocomplete` attributes on personal data fields**`add.php`/`edit.php`: add `autocomplete="name"` on author fields, `autocomplete="email"` on mail fields
## 1.4.1 Use of colour
- [ ] **Active nav link has no non-colour indicator** — must include a non-colour signal (underline, border, weight change) alongside `aria-current="page"`
- [ ] **Admin purple `#9557b5` as text colour on dark `#1a1a1a`**: 3.57:1 — audit every use of `var(--admin-purple)` as text; ensure it is only used at large-text sizes (≥18pt/24px or bold ≥14pt)
## 1.4.4 Resize text
- [ ] **Verify no text is set in `px`** — ensure `width: 14px; height: 14px` on checkboxes and similar elements do not prevent text scaling
## 1.4.12 Text spacing
- [ ] **No text-spacing override test done** — verify WCAG 1.4.12 bookmarklet does not cause content clipping (especially `overflow: hidden` on `.card__media` and tight `aspect-ratio: 4/3`)
## 2.1.1 Keyboard
- [ ] **Jury "✕" remove buttons in `add.php`/`edit.php`** — add `aria-label` for keyboard discoverability
## 2.4.3 Focus order
- [ ] **On `tfe.php` the `← Retour` back link is at the bottom of the left column in DOM** — consider moving above `<h1>` or adding a copy at the top so keyboard users can exit quickly
## 2.4.4 Link purpose
- [ ] **Home page cards: if two theses share the same title, identical link texts exist** — append year in `<span class="sr-only">` to disambiguate
## 2.5.3 Label in name
- [x] **`<a class="clear-filter">✕ Réinitialiser</a>`** — wrap `✕` in `<span aria-hidden="true">`
- [x] **Admin jury remove buttons `✕`**`aria-label="Supprimer ce lecteur"` replaces the symbol
## 2.5.5 Target size
- [x] **Pagination buttons are `2rem` (32px)** — increase to `min-height: 2.75rem; min-width: 2.75rem` (44px)
- [x] **Admin `.admin-btn-sm` (~28px)** — increase to minimum 32px with padding
- [x] **Admin bulk action buttons and jury remove `✕` buttons (~28px)** — increase target size
## 3.1.1 Language of page
- [ ] **All public pages have `<html lang="fr">`** — verify this is true after any template changes ✓ (no action needed unless templates change)
## 3.3.1 Error identification
- [ ] **`add.php`/`formulaire.php` validation errors** — add `role="alert"` to error div; add `autofocus` to first invalid field when re-rendering form with session error data
## 3.3.2 Labels or instructions
- [ ] **Admin jury "Lecteur·ices" label has no `for` attribute** — wrap lecteur rows in `<fieldset>/<legend>` or use `aria-describedby`
## 4.1.2 Name, role, value
- [ ] **Custom "Externe" checkbox for jury members has no group context** — add `aria-label="[Nom du promoteur] est externe"` dynamically via JS, or `aria-describedby` pointing to the adjacent name input
- [ ] **`<video>` elements on `tfe.php` have no captions** — add `<track kind="captions">` slot in template; document caption requirement in admin upload form
- [ ] **Admin `<select>` for visibility/access in `edit.php` uses truncated option text** — use full description in option text (or `title` attribute); keep truncated text only for visual display
- [ ] **Bulk publish/unpublish JS does not announce result to screen readers** — add `role="alert"` to error messages and `role="status"` to success messages across all admin pages
## 5 - Motion & user preferences
- [ ] **`prefers-color-scheme` not respected** — site has fixed white public / fixed dark admin themes; consider a dark-mode variant for public pages (not a WCAG failure, but quality-of-life)