mirror of
https://codeberg.org/PostERG/xamxam.git
synced 2026-05-06 19:19:19 +02:00
fix: WCAG 2.1 AA contrast, mobile répertoire layout, and pagination accessibility
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
24
TODO.md
24
TODO.md
@@ -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
|
||||
|
||||
@@ -5,9 +5,9 @@
|
||||
:root {
|
||||
--admin-bg: #1a1a1a;
|
||||
--admin-bg-alt: #242424;
|
||||
--admin-border: #333;
|
||||
--admin-border: #555;
|
||||
--admin-text: #e8e8e8;
|
||||
--admin-text-muted: #888;
|
||||
--admin-text-muted: #969696;
|
||||
--admin-purple: #9557b5;
|
||||
--admin-input-bg: transparent;
|
||||
}
|
||||
|
||||
@@ -77,7 +77,6 @@ a:hover {
|
||||
color: var(--white);
|
||||
text-decoration: none;
|
||||
font-weight: 400;
|
||||
opacity: 0.92;
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
|
||||
@@ -122,7 +121,7 @@ a:hover {
|
||||
}
|
||||
|
||||
.site-search__input::placeholder {
|
||||
color: #aaa;
|
||||
color: #767676;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
|
||||
@@ -151,7 +151,7 @@ html, body {
|
||||
/* Filter info */
|
||||
.filter-info {
|
||||
background: var(--purple-light);
|
||||
color: var(--purple);
|
||||
color: var(--purple-dark);
|
||||
padding: 0.4rem 1.5rem;
|
||||
font-size: 0.85rem;
|
||||
display: flex;
|
||||
@@ -161,7 +161,7 @@ html, body {
|
||||
}
|
||||
|
||||
.clear-filter {
|
||||
color: var(--purple);
|
||||
color: var(--purple-dark);
|
||||
text-decoration: none;
|
||||
padding: 0.15rem 0.6rem;
|
||||
background: rgba(149, 87, 181, 0.12);
|
||||
|
||||
@@ -31,6 +31,24 @@ html, body {
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.repertoire-index {
|
||||
grid-template-columns: 1fr;
|
||||
padding: 0 1rem;
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.repertoire-col {
|
||||
border-right: none;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
padding: 1rem 0 1.25rem;
|
||||
}
|
||||
|
||||
.repertoire-col:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.repertoire-col {
|
||||
padding: 0.75rem 0.5rem 2rem;
|
||||
border-right: 1px solid var(--border-color);
|
||||
@@ -233,7 +251,7 @@ html, body {
|
||||
|
||||
.search-filter-select {
|
||||
font-size: 0.82rem;
|
||||
border: 1px solid var(--border-color);
|
||||
border: 1px solid #949494;
|
||||
border-radius: 3px;
|
||||
padding: 0.2rem 0.5rem;
|
||||
background: var(--white);
|
||||
|
||||
@@ -103,7 +103,7 @@ $extraCss = ['assets/main.css'];
|
||||
$hue2 = ($hue + 40) % 360;
|
||||
?>
|
||||
<div class="card__media--gradient"
|
||||
style="background:linear-gradient(135deg,hsl(<?= $hue ?>,60%,65%),hsl(<?= $hue2 ?>,55%,45%));">
|
||||
style="background:linear-gradient(135deg,hsl(<?= $hue ?>,55%,40%),hsl(<?= $hue2 ?>,50%,28%));">
|
||||
<span class="card__gradient-author"><?= htmlspecialchars($item['authors'] ?? '') ?></span>
|
||||
<span class="card__gradient-title"><?= htmlspecialchars($item['title']) ?></span>
|
||||
</div>
|
||||
@@ -125,16 +125,24 @@ $extraCss = ['assets/main.css'];
|
||||
<div class="pagination-wrap">
|
||||
<?php $yearParam = $year ? '&year=' . (int)$year : ''; ?>
|
||||
<a href="?page=1<?= $yearParam ?>"
|
||||
class="pagination-btn <?= $page <= 1 ? 'disabled' : '' ?>">«</a>
|
||||
class="pagination-btn <?= $page <= 1 ? 'disabled' : '' ?>"
|
||||
<?= $page <= 1 ? 'aria-disabled="true" tabindex="-1"' : '' ?>
|
||||
aria-label="Première page">«</a>
|
||||
<a href="?page=<?= max(1, $page - 1) . $yearParam ?>"
|
||||
class="pagination-btn <?= $page <= 1 ? 'disabled' : '' ?>">‹</a>
|
||||
class="pagination-btn <?= $page <= 1 ? 'disabled' : '' ?>"
|
||||
<?= $page <= 1 ? 'aria-disabled="true" tabindex="-1"' : '' ?>
|
||||
aria-label="Page précédente">‹</a>
|
||||
<span class="pagination-info">
|
||||
<span class="page-current"><?= $page ?></span> / <?= $totalPages ?>
|
||||
</span>
|
||||
<a href="?page=<?= min($totalPages, $page + 1) . $yearParam ?>"
|
||||
class="pagination-btn <?= $page >= $totalPages ? 'disabled' : '' ?>">›</a>
|
||||
class="pagination-btn <?= $page >= $totalPages ? 'disabled' : '' ?>"
|
||||
<?= $page >= $totalPages ? 'aria-disabled="true" tabindex="-1"' : '' ?>
|
||||
aria-label="Page suivante">›</a>
|
||||
<a href="?page=<?= $totalPages . $yearParam ?>"
|
||||
class="pagination-btn <?= $page >= $totalPages ? 'disabled' : '' ?>">»</a>
|
||||
class="pagination-btn <?= $page >= $totalPages ? 'disabled' : '' ?>"
|
||||
<?= $page >= $totalPages ? 'aria-disabled="true" tabindex="-1"' : '' ?>
|
||||
aria-label="Dernière page">»</a>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</main>
|
||||
|
||||
@@ -8,7 +8,7 @@ $rateLimit = new RateLimit(30, 60);
|
||||
if (!$rateLimit->check()) {
|
||||
http_response_code(429);
|
||||
header('Retry-After: ' . $rateLimit->getResetTime());
|
||||
echo '<!DOCTYPE html><html><body><h1>Trop de requêtes</h1><p>Réessayez dans ' . $rateLimit->getResetTime() . ' secondes.</p></body></html>';
|
||||
echo '<!DOCTYPE html><html lang="fr"><body><h1>Trop de requêtes</h1><p>Réessayez dans ' . $rateLimit->getResetTime() . ' secondes.</p></body></html>';
|
||||
exit;
|
||||
}
|
||||
$rateLimit->sendHeaders();
|
||||
|
||||
@@ -5,7 +5,8 @@ $_sbValue = $searchBarValue ?? $_GET['query'] ?? '';
|
||||
?>
|
||||
<form class="site-search" method="GET" action="/search.php">
|
||||
<svg class="site-search__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
|
||||
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
||||
aria-hidden="true" focusable="false">
|
||||
<circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
|
||||
</svg>
|
||||
<input
|
||||
|
||||
Reference in New Issue
Block a user