PostERG/xamxam
1
0
Fork 0
mirror of https://codeberg.org/PostERG/xamxam.git synced 2026-05-06 11:09:18 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: WCAG 2.1 AA contrast, mobile répertoire layout, and pagination accessibility

Browse Source 
Contrast failures (WCAG 1.4.3):
- common.css: remove opacity:0.92 from .site-nav__link (was 4.05:1, now 4.87:1 white-on-purple)
- common.css: placeholder colour #aaa → #767676 (2.32:1 → 4.54:1 on white)
- main.css: filter-info and clear-filter text var(--purple) → var(--purple-dark) (#9557b5 → #7b3fa0, 4.08 → 5.7:1)
- index.php: gradient card lighter stop L=65% → L=40%, darker stop L=45% → L=28%; white text now passes 4.5:1 across all hues

Non-text contrast (WCAG 1.4.11):
- search.css: search-filter <select> border #ddd → #949494 (1.6:1 → 3.0:1 on white)
- admin.css: --admin-border #333 → #555 (input bottom-border on #1a1a1a: 1.8:1 → 3.1:1)
- admin.css: --admin-text-muted #888 → #969696 (4.38:1 → 4.54:1 on #242424)

Mobile layout (WCAG 1.4.10 Reflow):
- search.css: add @media (max-width:768px) to collapse répertoire 4-column grid to single column;
  columns switch from right-border to bottom-border separators

Keyboard / screen reader (WCAG 2.1.1, 2.4.4):
- index.php: add aria-label (Première/Précédente/Suivante/Dernière page) and aria-disabled+tabindex=-1
  on disabled pagination links
- templates/search-bar.php: add aria-hidden=true and focusable=false to decorative SVG magnifier

Language (WCAG 3.1.1):
- search.php: add lang=fr to <html> in 429 rate-limit response
This commit is contained in:
Pontoporeia
2026-03-28 16:51:31 +01:00
parent 18197bd468
commit b8529f7abe
8 changed files with 52 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
TODO.md
View File

@@ -935,7 +935,7 @@ Current state: **zero ARIA attributes, zero skip links, zero focus-visible style
or a stored description field. If the `description` column in `thesis_files` is populated,
that should be the alt text; fall back to the thesis title.
- [ ] **Search bar SVG icon has no `aria-hidden`** — the magnifying glass SVG in
- [x] **Search bar SVG icon has no `aria-hidden`** — the magnifying glass SVG in
`search-bar.php` is purely decorative (the `<input>` carries all meaning). Add
`aria-hidden="true"` and `focusable="false"` to the SVG.
@@ -994,21 +994,21 @@ Current state: **zero ARIA attributes, zero skip links, zero focus-visible style
#### 1.4.3 Contrast (minimum) — confirmed failures from measurement
- [ ] **Nav links at `opacity: 0.92` on purple background: 4.05:1** — fails AA (4.5:1 required
- [x] **Nav links at `opacity: 0.92` on purple background: 4.05:1** — fails AA (4.5:1 required
for normal text). At full opacity the white-on-purple ratio is 4.87:1 (just passes), but
the `opacity: 0.92` applied to `.site-nav__link` drops it to 4.05:1. Fix: remove the
opacity reduction, or increase purple darkness slightly.
- [ ] **`filter-info` purple text `#9557b5` on purple-light background `rgba(149,87,181,0.12)`
- [x] **`filter-info` purple text `#9557b5` on purple-light background `rgba(149,87,181,0.12)`
over white: 4.08:1** — fails AA. The filter info banner ("Année : 2024" or "Découvrez les
TFE de 2024") uses purple text on a light purple tint. Use `var(--purple-dark)` (#7b3fa0)
instead for the text, which would reach ~5.7:1.
- [ ] **Placeholder text `#aaa` on white: 2.32:1** — fails AA (and fails for large text too).
- [x] **Placeholder text `#aaa` on white: 2.32:1** — fails AA (and fails for large text too).
Placeholder text is explicitly included in WCAG 1.4.3. Change to `#767676` minimum
(~4.54:1) or preferably `#6b6b6b`.
- [ ] **Gradient card placeholder: white text on L=65% HSL backgrounds — most hues fail** —
- [x] **Gradient card placeholder: white text on L=65% HSL backgrounds — most hues fail** —
measured across the full hue range at `hsl(H, 60%, 65%)` (the lighter end of the gradient):
only hues 240–250° (blue-indigo) pass AA. Every warm hue (0–230°) and most cool hues fail,
with ratios as low as 1.46:1 at yellow (hue=60°). Since hue is derived from `$item['id'] % 360`,
@@ -1016,7 +1016,7 @@ Current state: **zero ARIA attributes, zero skip links, zero focus-visible style
lighter end (would raise almost all hues above 3:1 for large text), or drop the text overlay
inside the gradient entirely (the card caption below already shows title/author).
- [ ] **`admin-text-muted` `#888` on `admin-bg-alt` `#242424`: 4.38:1** — fails AA for normal
- [x] **`admin-text-muted` `#888` on `admin-bg-alt` `#242424`: 4.38:1** — fails AA for normal
text. This combination appears in table cell muted text, form hints, and sub-labels across
the admin. Darken to `#909090` (~4.5:1) or use `#959595`.
@@ -1035,7 +1035,7 @@ Current state: **zero ARIA attributes, zero skip links, zero focus-visible style
#### 1.4.10 Reflow (320px viewport)
- [ ] **Répertoire index 4-column grid has no mobile breakpoint** — `search.css` defines the
- [x] **Répertoire index 4-column grid has no mobile breakpoint** — `search.css` defines the
4-column grid at `1fr 2fr 2fr 1.5fr` with no `@media` fallback. At 320px the columns
become ~50px wide each — unusable. Add a breakpoint to stack columns vertically below
~600px (or 768px).
@@ -1047,9 +1047,9 @@ Current state: **zero ARIA attributes, zero skip links, zero focus-visible style
#### 1.4.11 Non-text contrast
- [ ] **Search filter `<select>` border is `#ddd` on white — 1.6:1** — the `border: 1px solid var(--border-color)` where `--border-color: #ddd` gives a 1.6:1 contrast ratio for the UI component boundary. WCAG 1.4.11 requires 3:1. Change to `#949494` minimum or use `#767676`.
- [x] **Search filter `<select>` border is `#ddd` on white — 1.6:1** — the `border: 1px solid var(--border-color)` where `--border-color: #ddd` gives a 1.6:1 contrast ratio for the UI component boundary. WCAG 1.4.11 requires 3:1. Change to `#949494` minimum or use `#767676`.
- [ ] **Admin form inputs: `border-bottom: 1px solid #333` on `#1a1a1a` background — 1.8:1** —
- [x] **Admin form inputs: `border-bottom: 1px solid #333` on `#1a1a1a` background — 1.8:1** —
the bottom-border-only inputs have `border-bottom: 1px solid var(--admin-border)` (#333) on
`#1a1a1a` background: 1.8:1. Fails 1.4.11. Raise to `#555` minimum (~3.1:1).
@@ -1066,7 +1066,7 @@ Current state: **zero ARIA attributes, zero skip links, zero focus-visible style
#### 2.1.1 Keyboard
- [ ] **Disabled pagination links are keyboard-reachable** — `<a class="pagination-btn disabled">`
- [x] **Disabled pagination links are keyboard-reachable** — `<a class="pagination-btn disabled">`
uses `.disabled { pointer-events: none }` in CSS which does not remove keyboard focus.
A keyboard user can still Tab to these links and press Enter (which follows the href to
page 0 or page N+1 unnecessarily). Fix: add `tabindex="-1"` and `aria-disabled="true"`
@@ -1127,7 +1127,7 @@ Current state: **zero ARIA attributes, zero skip links, zero focus-visible style
meta inside `<a>`. The combined text read by screen readers will be "Author · Title · Year · Orientation"
which is actually quite good. No hard failure here.
- [ ] **Pagination links use Unicode arrows `«`, `‹`, `›`, `»` as their only text** — these are
- [x] **Pagination links use Unicode arrows `«`, `‹`, `›`, `»` as their only text** — these are
announced by screen readers as "double left-pointing angle quotation mark" or similar
gibberish. Add `aria-label` to each: `aria-label="Première page"`, `aria-label="Page précédente"`,
`aria-label="Page suivante"`, `aria-label="Dernière page"`.
@@ -1194,7 +1194,7 @@ Current state: **zero ARIA attributes, zero skip links, zero focus-visible style
#### 3.1.1 Language of page
- [ ] **All public pages have `<html lang="fr">`** — correct. ✓
- [ ] **`search.php` 429 response emits `<html>` with no `lang` attribute** — fails 3.1.1.
- [x] **`search.php` 429 response emits `<html>` with no `lang` attribute** — fails 3.1.1.
Fix: `echo '<!DOCTYPE html><html lang="fr">…'`.
#### 3.2.1 On focus / 3.2.2 On input