Tastatur-Navigationsanleitung

Tastatur-Navigationsanleitung

Diese Anleitung erklärt, wie Sie die Website des Verbands für adaptive Organisationen nur mit Ihrer Tastatur navigieren können. Diese Navigationsmuster sind wichtig für Benutzer, die keine Maus verwenden können, einschließlich derer, die auf Hilfstechnologien angewiesen sind.

Schnellübersicht

TasteAktion
TabZum nächsten interaktiven Element
Umschalt + TabZum vorherigen interaktiven Element
EingabeLinks und Schaltflächen aktivieren
LeertasteSchaltflächen und Kontrollkästchen aktivieren
PfeiltastenIn Menüs und Dropdowns navigieren
EscapeMenüs und Dialoge schließen
Pos1Zum ersten Element in Menüs springen
EndeZum letzten Element in Menüs springen

Grundlegende Navigation

  • Erster Tab: Führt Sie zum Link “Zum Hauptinhalt springen”
  • Eingabe drücken: Springt direkt zum Hauptinhaltsbereich
  • Zweck: Vermeidet das Durchgehen des gesamten Navigationsmenüs

Seitenstruktur

  1. Sprung-Link: Direkter Zugang zum Hauptinhalt
  2. Hauptnavigation: Website-Menü und Sprachauswahl
  3. Hauptinhalt: Seitenspezifischer Inhalt
  4. Footer: Zusätzliche Links und Informationen

Desktop-Navigation

  • Tab: Durch Menüelemente von links nach rechts
  • Eingabe/Leertaste: Dropdown-Menüs öffnen
  • Pfeil nach unten: Dropdown öffnen und erstes Element fokussieren
  • Pfeil nach oben: Dropdown öffnen und letztes Element fokussieren
  • Escape: Dropdown schließen und Fokus zum Auslöser zurück

Mobile Navigation (Bildschirme unter 1024px)

  • Tab: Mobile Menü-Schaltfläche fokussieren (Hamburger-Symbol)
  • Eingabe/Leertaste: Mobiles Menü öffnen
  • Tab: Durch sichtbare Menüelemente navigieren
  • Escape: Mobiles Menü schließen
  • Automatisch: Menüelemente sind immer sichtbar, Dropdowns müssen nicht geöffnet werden

Sobald ein Dropdown geöffnet ist:

  • Pfeil nach unten: Zum nächsten Menüelement
  • Pfeil nach oben: Zum vorherigen Menüelement
  • Pos1: Zum ersten Menüelement springen
  • Ende: Zum letzten Menüelement springen
  • Tab: Zum nächsten Element (schließt Dropdown auf Desktop)
  • Eingabe: Dem ausgewählten Link folgen
  • Escape: Dropdown schließen und zum Auslöser zurück

Sprachauswahl

  • Tab: Sprachauswahl fokussieren
  • Eingabe/Pfeil nach unten: Sprachmenü öffnen
  • Pfeiltasten: Sprache auswählen
  • Eingabe: Zur ausgewählten Sprache wechseln
  • Escape: Sprachmenü schließen

Formular-Navigation

Kontaktformular

  • Tab: Durch Formularfelder in Reihenfolge:
    1. Namensfeld
    2. E-Mail-Feld
    3. Betreff-Feld
    4. Nachricht-Feld
    5. Absenden-Schaltfläche
  • Umschalt + Tab: Rückwärts durch Felder
  • Eingabe: Formular absenden (bei Absenden-Schaltfläche)

Formularvalidierung

Bei Validierungsfehlern:

  • Fehlerzusammenfassung: Automatisch für Screenreader angekündigt
  • Tab zu Fehler-Links: Links in Fehlerzusammenfassung anklicken, um zu Problemfeldern zu springen
  • Feldfehler: Einzelne Feldfehler werden angekündigt, wenn Feld den Fokus erhält
  • Fehlerkorrektur: Fehler werden automatisch gelöscht, wenn gültige Eingabe erfolgt

Inhaltsseiten

Ausbilder-Profile

  • Tab: Navigieren durch:
    1. Ausbilderinformationsbereich
    2. Zertifizierungsabzeichen (falls vorhanden)
    3. Kontaktinformationen
    4. Firmen-Website-Links
    5. Social-Media-Links (falls verfügbar)

Zertifizierungsseiten

  • Tab: Navigieren durch:
    1. Zertifizierungsbeschreibung
    2. Verwandte Links
    3. Abzeichen-Informationen
    4. Zugehörige Ausbilder (falls aufgelistet)

Suche und Filterung

Ausbilder-Suche

  • Tab: Zu Suchsteuerelementen
  • Tippen: Ergebnisse automatisch filtern (Live-Bereiche kündigen Änderungen an)
  • Tab: Durch Filteroptionen navigieren
  • Eingabe/Leertaste: Filteroptionen auswählen
  • Tab: Durch gefilterte Ergebnisse navigieren

Barrierefreiheitsfunktionen

Screenreader-Ankündigungen

Die Website enthält Live-Bereiche, die ankündigen:

  • Seitennavigationsänderungen
  • Formular-Übermittlungsstatus
  • Menüzustandsänderungen (offen/geschlossen)
  • Ladezustände
  • Fehlermeldungen
  • Suchergebnis-Updates

Fokusindikatoren

  • Sichtbarer Fokus: Alle interaktiven Elemente zeigen einen klaren Fokusindikator
  • Hoher Kontrast: Fokusindikatoren sind deutlich sichtbar
  • Konsistent: Gleicher Fokusstil wird durchgehend verwendet

Touch-Ziele

  • Mindestgröße: Alle interaktiven Elemente sind mindestens 44px × 44px
  • Abstand: Angemessener Abstand zwischen Touch-Zielen
  • Mobile Optimierung: Touch-Ziele auf mobilen Geräten vergrößert

Fehlerbehebung

Wenn Navigation nicht funktioniert

  1. Browser prüfen: Sicherstellen, dass Ihr Browser Tastaturnavigation unterstützt
  2. Einstellungen prüfen: Überprüfen, ob Tastaturnavigation in Ihrem Browser aktiviert ist
  3. Andere Tasten probieren: Einige Browser verwenden andere Tastenkombinationen
  4. Cache leeren: Browser-Cache leeren und Seite neu laden

Wenn Sie feststecken

  1. Escape verwenden: Escape drücken, um offene Menüs zu schließen
  2. Seite aktualisieren: Seite neu laden, um Navigationszustand zurückzusetzen
  3. Sprung-Links verwenden: Sprung-Link verwenden, um zum Hauptinhalt zu springen
  4. Support kontaktieren: Unser Barrierefreiheits-Feedback-Formular verwenden

Browser-spezifische Hinweise

Chrome/Edge

  • Tab-Navigation: Standard Tab/Umschalt+Tab Navigation
  • Eingabe/Leertaste: Beide funktionieren zur Aktivierung

Firefox

  • Tab-Navigation: Standard Tab/Umschalt+Tab Navigation
  • Vollständiger Tastaturzugang: “Cursortasten zum Navigieren in Seiten verwenden” für zusätzliche Tastaturunterstützung aktivieren

Safari

  • Tab-Navigation aktivieren: Safari > Einstellungen > Erweitert > “Tab drücken, um jedes Element auf einer Webseite zu markieren”
  • Systemeinstellungen: Sicherstellen, dass “Vollständiger Tastaturzugang” in den Systemeinstellungen aktiviert ist

Unterstützung für Hilfstechnologien

Screenreader

  • NVDA: Vollständige Unterstützung mit Durchsuchen- und Fokusmodi
  • JAWS: Kompatibel mit virtueller Cursor-Navigation
  • VoiceOver: Native macOS-Screenreader-Unterstützung
  • ORCA: Linux-Screenreader-Kompatibilität

Sprachsteuerung

  • Voice Access: Funktioniert mit Browser-Sprachsteuerungsfunktionen
  • Dragon: Kompatibel mit Sprachnavigationsbefehlen

Switch-Navigation

  • Switch Access: Kompatibel mit Switch-Navigationsgeräten
  • Scanning: Unterstützt sequenzielles und Gruppen-Scanning

Erweiterte Navigationstipps

Tastenkürzel

  • Strg/Cmd + F: Text auf der Seite finden
  • Strg/Cmd + L: Adressleiste fokussieren
  • Strg/Cmd + W: Aktuellen Tab schließen
  • Strg/Cmd + T: Neuen Tab öffnen

Browser-Navigation

  • Alt + Linker Pfeil: Zurück gehen
  • Alt + Rechter Pfeil: Vorwärts gehen
  • Strg/Cmd + R: Seite neu laden
  • F5: Seite aktualisieren

Seitennavigation

  • Bild auf/Bild ab: Um Bildschirmbereich scrollen
  • Pos1/Ende: Zum Seitenanfang/-ende gehen
  • Pfeiltasten: In kleinen Schritten scrollen (in einigen Browsern)

Hilfe erhalten

Wenn Sie Probleme mit der Tastaturnavigation haben oder Verbesserungsvorschläge haben:

E-Mail: accessibility@adaptive-organisations.org
Antwortzeit: Wir bemühen uns, innerhalb von 2 Werktagen zu antworten

Bei der Meldung von Problemen bitte angeben:

  • Ihr Betriebssystem und Version
  • Ihr Browser und Version
  • Die spezifische Seite, auf der Sie das Problem hatten
  • Was Sie zu tun versucht haben
  • Was stattdessen passiert ist

Wir sind bestrebt sicherzustellen, dass unsere Website vollständig über Tastaturnavigation zugänglich ist und begrüßen Ihr Feedback, um uns zu helfen, uns zu verbessern.