Dynamische Funktionen bereitstellen, die auch ohne JavaScript funktionieren.
Dieses Board ist eine Checkliste zur Überprüfung für Web-Profis: 17 Prüfungen, die du an einer dynamischen Seite oder Komponente durchführen solltest, bevor die Funktion ausgeliefert wird; sie behandeln das statische Fundament darunter, das Verhalten bei Ausfall, ob Aktualisierungen bemerkt werden und ob Screenreader- und Tastaturnutzer die Funktion überhaupt nutzen können.
Statische HTML-Grundlage:
Essentielle Inhalte, Links und Metadaten sind bereits im initialen HTML vorhanden
Die Seite ist nutzbar, nicht nur sichtbar, wenn JavaScript nicht verfügbar ist
Dynamische Funktionen bauen auf einer funktionierenden Basis auf, statt sie zu ersetzen
Nichts Wichtiges ist in reinen JavaScript-Widgets versteckt, die Crawler nicht erreichen können
Fehlerrobustheit:
Jede Anfrage hat eine explizite Fehlerbehandlung, sodass ein Ausfall nie stillschweigend bleibt oder dauerhaft ein Spinner angezeigt wird
Es gibt einen funktionalen Fallback, falls die dynamische Funktion vollständig ausfällt
Zurück- und Vorwärts-Schaltflächen verhalten sich nach dynamischen Aktualisierungen wie erwartet
Elemente, die gleich aussehen, verhalten sich auch gleich
Änderungen sichtbar machen:
Feedback erscheint neben dem Element, mit dem der Nutzer gerade interagiert hat
Updates nutzen Größe, Kontrast oder Bewegung, um Aufmerksamkeit zu erregen
Vorübergehende Meldungen hinterlassen einen dauerhaften Hinweis
Keine Interaktion erfordert, zwei Stellen gleichzeitig im Blick zu behalten
ARIA und Zugänglichkeit für Screenreader:
Benutzerdefinierte Widgets haben passende ARIA-Rollen
Strukturelle Bereiche nutzen Landmarks oder semantische HTML5-Elemente
Dynamisch aktualisierte Bereiche sind mit aria-live markiert
Der Build wurde mit einem echten Screenreader getestet
Die komplette Navigation mit Tastatur funktioniert, wobei der Fokus nie verloren geht oder an einer Stelle gefangen bleibt
So verwendest du das Board:
Um eine eigene Kopie zu erstellen, öffne Board > Details > Duplizieren. Ein kostenloses Miro-Konto reicht.
Um einen Eintrag abzuhaken, doppelklicke das Kästchen und tippe x.
Dupliziere die Karte für jede dynamische Funktion, Komponente oder jeden Sprint.
Dieses Template gehört zum Kurs der Interaction Design Foundation UX Essentials: Accessibility, SEO and Dynamic Interfaces.
