Barrierefreiheit und mobile Darstellung

- Kontrast: gedämpfter Text war mit 3,1:1 unter WCAG AA, jetzt 4,9:1
  (hell) bzw. 6,4:1 (dunkel)
- Sprungmarke „Zum Inhalt springen" in Admin-Shell und Voucher-Seite
- aria-label für alle reinen Icon-Schaltflächen (Theme, Menü, Abmelden,
  Zeilenaktionen), aria-current auf dem aktiven Navigationspunkt,
  role="group" für den Sprachumschalter
- 194 dekorative Icons mit aria-hidden versehen, damit Screenreader sie
  nicht vorlesen
- Toast-Container als aria-live-Bereich ausgezeichnet
- prefers-reduced-motion schaltet Animationen und Übergänge ab

Tabellen (Benutzer, Vouchers, Profile, Audit-Log, Dashboard, API-Keys)
werden unter 720 px zu Karten: die Spaltenüberschrift steht per
data-label vor dem Wert, statt horizontal zu scrollen.

Datums- und Zeitformat in der Voucher-Liste folgen jetzt der gewählten
Sprache statt fest de-DE.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Friederich Loheide 2026-09-23 06:38:08 +00:00
parent 850a04d628
commit 7f1d93debd
21 changed files with 716 additions and 632 deletions

View file

@ -104,7 +104,7 @@ $activeSessions = $dbSessions ? $auth->activeSessionCount() : 0;
<body class="app-body focus-page">
<div class="focus-card card">
<div class="focus-head">
<span class="focus-icon"><i class="fas fa-shield-halved"></i></span>
<span class="focus-icon"><i class="fas fa-shield-halved" aria-hidden="true"></i></span>
<div>
<h1><?= __('sec_title') ?></h1>
<p class="sub"><?= __('sec_account') ?> <?= htmlspecialchars($user['email']) ?></p>
@ -119,7 +119,7 @@ $activeSessions = $dbSessions ? $auth->activeSessionCount() : 0;
<?php if (!empty($backupCodes)): ?>
<div class="codes-box">
<strong><i class="fas fa-key"></i> <?= __('sec_recovery_codes') ?></strong>
<strong><i class="fas fa-key" aria-hidden="true"></i> <?= __('sec_recovery_codes') ?></strong>
<p><?= __('sec_recovery_hint') ?></p>
<div class="codes">
<?php foreach ($backupCodes as $c): ?><span><?= htmlspecialchars($c) ?></span><?php endforeach; ?>
@ -128,10 +128,10 @@ $activeSessions = $dbSessions ? $auth->activeSessionCount() : 0;
<?php endif; ?>
<?php if (!$hasPassword): ?>
<div class="status off"><i class="fas fa-circle-minus"></i> <?= __('sec_unavailable') ?></div>
<div class="status off"><i class="fas fa-circle-minus" aria-hidden="true"></i> <?= __('sec_unavailable') ?></div>
<p class="sub"><?= __('sec_m365_hint') ?></p>
<?php elseif ($totpEnabled): ?>
<div class="status on"><i class="fas fa-circle-check"></i> <?= __('sec_active') ?></div>
<div class="status on"><i class="fas fa-circle-check" aria-hidden="true"></i> <?= __('sec_active') ?></div>
<p class="sub"><?= __('sec_active_hint') ?><br>
<?= __('sec_codes_left') ?> <strong><?= (int)$auth->backupCodesRemaining($user) ?></strong></p>
<form method="post" style="margin-bottom:10px;">
@ -143,7 +143,7 @@ $activeSessions = $dbSessions ? $auth->activeSessionCount() : 0;
<button type="submit" name="disable_totp" class="btn btn-danger btn-lg btn-block"><?= __('sec_disable') ?></button>
</form>
<?php else: ?>
<div class="status off"><i class="fas fa-circle-minus"></i> <?= __('sec_inactive') ?></div>
<div class="status off"><i class="fas fa-circle-minus" aria-hidden="true"></i> <?= __('sec_inactive') ?></div>
<ol>
<li><?= __('sec_step_1') ?></li>
<li><?= __('sec_step_2') ?></li>
@ -175,7 +175,7 @@ $activeSessions = $dbSessions ? $auth->activeSessionCount() : 0;
</form>
<?php endif; ?>
<div class="auth-links"><a class="back-link" href="../index.php"><i class="fas fa-arrow-left"></i> <?= __('nav_back') ?></a></div>
<div class="auth-links"><a class="back-link" href="../index.php"><i class="fas fa-arrow-left" aria-hidden="true"></i> <?= __('nav_back') ?></a></div>
</div>
</body>
</html>