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

6
src/redaktionskern/templates/benutzer/formular.html
View File

@@ -6,7 +6,7 @@
</h1>
{% if fehler %}
<div class="mb-4 max-w-lg rounded-lg border border-red-300 bg-red-50 text-red-700 text-sm px-3 py-2" role="alert">
<div class="mb-4 max-w-lg rounded-lg border border-red-300 bg-red-50 text-red-700 text-sm px-3 py-2" role="alert" tabindex="-1" id="formular-fehler">
{{ fehler }}
</div>
{% endif %}
@@ -17,7 +17,7 @@
<div>
<label for="username" class="block text-sm font-medium mb-1">Benutzername</label>
<input id="username" name="username" value="{{ form.username }}" required minlength="3"
<input id="username" name="username" value="{{ form.username }}" required aria-required="true" minlength="3"
{% if aktion != 'neu' %}disabled{% endif %}
class="w-full border border-slate-300 rounded-lg px-3 py-2 {% if aktion != 'neu' %}bg-slate-100{% endif %}">
{% if aktion != 'neu' %}
@@ -62,7 +62,7 @@
<label for="password" class="block text-sm font-medium mb-1">
{% if aktion == 'neu' %}Passwort{% else %}Neues Passwort (leer = unver&auml;ndert){% endif %}
</label>
<input id="password" name="password" type="password" {% if aktion == 'neu' %}required{% endif %} minlength="8"
<input id="password" name="password" type="password" {% if aktion == 'neu' %}required aria-required="true"{% endif %} minlength="8"
class="w-full border border-slate-300 rounded-lg px-3 py-2">
</div>

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"