a11y: nav aria-label, search role=search + label, card hover motion guard

- templates/nav.php: add aria-label="Navigation principale" to <nav>; emit
  aria-current="page" on the active link alongside the existing CSS class
  so screen readers announce the current page without relying on colour/style alone

- templates/search-bar.php: add role="search" + aria-label="Recherche" to
  the <form>; add a visually-hidden <label for="site-search-input"> linked to
  the input via id="site-search-input", satisfying WCAG 3.3.2 (labels/instructions)
  and 4.1.2 (name/role/value) — placeholder text alone is not a label

- public/assets/main.css: add @media (prefers-reduced-motion: reduce) block that
  sets transition:none and transform:none on .card__media img/video hover, so the
  scale(1.02) zoom is fully suppressed for users who opt out of motion (WCAG 2.3.3 /
  prefers-reduced-motion); the global transition-duration guard in common.css already
  covers all other transitions but does not zero the transform value itself

Fixes TODO sections: G (nav/search-bar landmark names), I (site-search form ARIA),
3.3.2 (search input label), prefers-reduced-motion (card hover transform gate)
This commit is contained in:
Pontoporeia
2026-03-28 18:13:53 +01:00
parent 4f5ff5a22c
commit a84d6d560a
4 changed files with 31 additions and 24 deletions

View File

@@ -4,14 +4,17 @@
// Provide $currentNav variable to mark active links (optional)
$_navCurrent = $currentNav ?? '';
?>
<nav class="site-nav">
<nav class="site-nav" aria-label="Navigation principale">
<a class="site-nav__logo" href="/index.php">Posterg</a>
<div class="site-nav__links">
<a class="site-nav__link <?= ($_navCurrent === 'repertoire') ? 'site-nav__link--active' : '' ?>"
href="/search.php">Répertoire</a>
href="/search.php"
<?= ($_navCurrent === 'repertoire') ? 'aria-current="page"' : '' ?>>Répertoire</a>
<a class="site-nav__link <?= ($_navCurrent === 'licence') ? 'site-nav__link--active' : '' ?>"
href="/licence.php">Licence</a>
href="/licence.php"
<?= ($_navCurrent === 'licence') ? 'aria-current="page"' : '' ?>>Licence</a>
</div>
<a class="site-nav__link <?= ($_navCurrent === 'apropos') ? 'site-nav__link--active' : '' ?>"
href="/apropos.php">À Propos</a>
href="/apropos.php"
<?= ($_navCurrent === 'apropos') ? 'aria-current="page"' : '' ?>>À Propos</a>
</nav>

View File

@@ -3,13 +3,16 @@
// $searchValue: current search query (optional)
$_sbValue = $searchBarValue ?? $_GET['query'] ?? '';
?>
<form class="site-search" method="GET" action="/search.php">
<form class="site-search" method="GET" action="/search.php"
role="search" aria-label="Recherche">
<label for="site-search-input" class="sr-only">Recherche</label>
<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"
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
id="site-search-input"
class="site-search__input"
type="text"
name="query"