WCAG 2.1 AA: Focus-Styles, ARIA-Attribute, Tastatur-Navigation, Formvalidierung

- Default :focus-visible auf allen interaktiven Elementen (WCAG 2.4.7)
- A11y-Panel: role=group, Esc/Pfeiltasten, Fokus-Management
- Checkbox sr-only statt display:none (Screenreader-zugaenglich)
- Toggle-Switch Focus-Indikator
- aria-required, aria-expanded, aria-haspopup auf Formularen/Dropdowns
- Export-Dropdown: role=menu/menuitem/separator
- Sidebar: aria-expanded auf Sektionen, aria-hidden auf Chevrons
- Globaler Esc-Handler mit korrekter Schliess-Reihenfolge
- Formvalidierung: aria-invalid, aria-describedby, Fokus auf Fehler
- Notification-Items: role=button, tabindex=0
- Badges: aria-label/aria-hidden fuer Screenreader
- SR-Announcement bei Sidebar-Lage-Auswahl

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/static/index.html

@@ -30,7 +30,7 @@
             <form id="email-form">
                 <div class="form-group">
                     <label for="email">E-Mail-Adresse</label>
-                    <input type="email" id="email" name="email" autocomplete="email" required placeholder="name@organisation.de">
+                    <input type="email" id="email" name="email" autocomplete="email" required aria-required="true" placeholder="name@organisation.de">
                 </div>
                 <button type="submit" class="btn btn-primary btn-full" id="email-btn">Anmelden</button>
             </form>
@@ -42,7 +42,7 @@
                 </p>
                 <div class="form-group">
                     <label for="code">Code eingeben</label>
-                    <input type="text" id="code" name="code" autocomplete="one-time-code" required
+                    <input type="text" id="code" name="code" autocomplete="one-time-code" required aria-required="true"
                            placeholder="000000" maxlength="6" pattern="[0-9]{6}"
                            style="text-align:center; font-size:24px; letter-spacing:8px; font-family:monospace;">
                 </div>