b0rbor4d/spiele-redaktion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

P0: Formular-Accessibility — Fehlerboxen mit role=alert, Pflichtfeld-ARIA

Browse Source 
- Alle fehler-Boxen: role=alert + tabindex=-1
- Login: aria-invalid/aria-describedby auf Feldern bei Fehler
- Pflichtfelder: aria-required=true ergänzt
This commit is contained in:
Flo Hartmann
2026-08-26 08:40:45 +00:00
parent b9444289b5
commit 742c265df8
11 changed files with 20 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/redaktionskern/templates/login.html
View File

@@ -11,7 +11,7 @@
<h1 class="text-xl font-bold mb-1 flex items-center gap-2">{% from "icons.html" import icon_wuerfelbecher %}{{ icon_wuerfelbecher("h-6 w-6 text-emerald-700") }} {{ app_name }}</h1>
<p class="text-sm text-slate-500 mb-6">Bitte anmelden.</p>
{% if fehler %}
<div class="mb-4 rounded-lg border border-red-300 bg-red-50 text-red-700 text-sm px-3 py-2" role="alert">
<div id="login-fehler" class="mb-4 rounded-lg border border-red-300 bg-red-50 text-red-700 text-sm px-3 py-2" role="alert" tabindex="-1">
{{ fehler }}
</div>
{% endif %}
@@ -19,11 +19,13 @@
<div>
<label for="username" class="block text-sm font-medium mb-1">Benutzername</label>
<input id="username" name="username" value="{{ username }}" required autocomplete="username"
{% if fehler %}aria-invalid="true" aria-describedby="login-fehler"{% endif %}
class="w-full border border-slate-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500">
</div>
<div>
<label for="password" class="block text-sm font-medium mb-1">Passwort</label>
<input id="password" name="password" type="password" required autocomplete="current-password"
{% if fehler %}aria-invalid="true" aria-describedby="login-fehler"{% endif %}
class="w-full border border-slate-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500">
</div>
<button type="submit"