wcag: fix 2.4.4 duplicate link text on home page cards

Add <span class="sr-only">, YEAR</span> to each thesis card <p> in
public/index.php. Screen readers now read "Author – Title, 2024" instead
of bare "Author – Title", so two theses sharing the same title produce
distinct accessible names (WCAG 2.4.4 Link Purpose — In Context).

Also audit and close WCAG 2.4.3: the tfe.php back link (<a class="tfe-back-link">
← Retour</a>) is already the first child of <header class="tfe-left">
in DOM order, preceding <h1 class="tfe-title">. No code change needed;
TODO item marked done.
This commit is contained in:
Pontoporeia
2026-04-03 13:05:43 +02:00
parent fe1f8629ea
commit 769d56fabc
3 changed files with 6 additions and 3 deletions

View File

@@ -29,3 +29,6 @@ Pending tasks have been split into topic files under [`todo/`](todo/README.md):
- [x] `admin-submit-wrap``admin-form-footer` rename: updated all 6 admin templates (`add.php`, `edit.php`, `login.php`, `account.php`, `import.php`, `pages-edit.php`) and all 8 CSS selectors in `admin.css` (`.admin-form > div:not(…)` exclusion guards, `.admin-login-box` overrides). Closes `todo/01-css-semantic-refactor.md` submit-wrap task. - [x] `admin-submit-wrap``admin-form-footer` rename: updated all 6 admin templates (`add.php`, `edit.php`, `login.php`, `account.php`, `import.php`, `pages-edit.php`) and all 8 CSS selectors in `admin.css` (`.admin-form > div:not(…)` exclusion guards, `.admin-login-box` overrides). Closes `todo/01-css-semantic-refactor.md` submit-wrap task.
- [x] Marked `status-badge.php` partial and WCAG 1.3.1 status-badge items as already-done in `todo/02-php-components.md` and `todo/04-accessibility.md` (partial + CSS were fully implemented; TODO had not been updated) - [x] Marked `status-badge.php` partial and WCAG 1.3.1 status-badge items as already-done in `todo/02-php-components.md` and `todo/04-accessibility.md` (partial + CSS were fully implemented; TODO had not been updated)
- [x] `public/index.php` — WCAG 2.4.4: home page cards now append `<span class="sr-only">, YEAR</span>` to each card's `<p>` link text so screen readers get unique link names when two theses share the same title
- [x] `todo/04-accessibility.md` — WCAG 2.4.3: marked back-link focus-order item as already done (`tfe-back-link` is already the first DOM element in `.tfe-left`, before `<h1>`)

View File

@@ -116,7 +116,7 @@ $bodyClass = 'home-body';
<span class="card__gradient-title"><?= htmlspecialchars($item['title']) ?></span> <span class="card__gradient-title"><?= htmlspecialchars($item['title']) ?></span>
</div> </div>
<?php endif; ?> <?php endif; ?>
<p><?= htmlspecialchars($item["authors"] ?? '') ?><?php if (!empty($item['authors']) && !empty($item['title'])): ?> <?php endif; ?><?= htmlspecialchars($item["title"]) ?></p> <p><?= htmlspecialchars($item["authors"] ?? '') ?><?php if (!empty($item['authors']) && !empty($item['title'])): ?> <?php endif; ?><?= htmlspecialchars($item["title"]) ?><?php if (!empty($item['year'])): ?><span class="sr-only">, <?= (int)$item['year'] ?></span><?php endif; ?></p>
</a> </a>
</li> </li>
<?php endforeach; ?> <?php endforeach; ?>

View File

@@ -34,11 +34,11 @@
## 2.4.3 Focus order ## 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 - [x] **On `tfe.php` the `← Retour` back link is at the bottom of the left column in DOM**already fixed; `<a class="tfe-back-link">← Retour</a>` is the first child of `<header class="tfe-left">`, which precedes `<h1 class="tfe-title">` in DOM order
## 2.4.4 Link purpose ## 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 - [x] **Home page cards: if two theses share the same title, identical link texts exist**`public/index.php` card `<p>` now appends `<span class="sr-only">, YEAR</span>` when `$item['year']` is set, giving screen-reader users a unique link name per thesis
## 2.5.3 Label in name ## 2.5.3 Label in name