Periodensystem (Raster): Bedienung

• ← → ↑ ↓ bewegen die Auswahl; der Fokus folgt (sichtbarer Fokus-Ring), die Position wird vorgelesen (z. B. „p4g8, Eisen (Fe), Periode 4, Gruppe 8“).
• Home/End springen zum Zeilenanfang/-ende.
• Enter oder Leertaste öffnet die Detailansicht eines Elements, Esc schließt sie – der Fokus springt auf die Kachel zurück, die geöffnet hat.
• Tab läuft zeilenweise durch alle 118 Elemente (jede Kachel ist ein Tab-Stopp). Jede Kachel beginnt mit ihrem Tabellenplatz („p4g8“ = Periode 4, Gruppe 8; „p6f1“ = Periode 6, f-Block 1. Stelle).
• Detailansicht: Tab/Shift+Tab bleibt im Dialog (Zoom − → Zoom 100 % → Zoom + → Schließen → Vorheriges → Nächstes → Zoom −); „Vorheriges/Nächstes“ wechselt das Element und wrappt (nach Og wieder zu H). Die Zoom-Buttons in der Kopfzeile (−, 100 %, +) vergrößern/verkleinern nur die Werte-Liste (50–150 %) — unabhängig vom Seiten-Zoom; ab 125 % wird das Fenster verbreitert, die Liste fügt sich ohne Horizontal-Scroll ein. Die Elektronenkonfiguration ist zusätzlich als Braille-Label in LaTeX-Schreibweise verfügbar (z. B. [Kr] 4d_7 5s_1 – der Unterstrich rendert in der Braillezeile als Index-Punkt).
• Element-Infofeld: Im freien Bereich über den Gruppen 4–11 steht ein Rahmen mit Name, Ordnungszahl, Atommasse und Elektronegativität des aktuell fokussierten bzw. (bei reiner Mausnutzung) gehoverten Elements. Die Name-Zeile ist in der Kachel-Kategoriefarbe hinterlegt; die Werte stehen zweispaltig (links Atommasse, rechts Elektronegativität). Für Screenreader ist das Feld dekorativ (die Kachel-Labels enthalten dieselben Werte). Im Kompaktmodus (Nebengruppen ausgeblendet) ist es nicht sichtbar.

f-Reihe (Lanthanoide/Actinoide)

• Erreichen: per ↓ vom Marker 57† (nach Ba) bzw. 89† (nach Ra) springen, oder per Tab am Ende der Haupttabelle.
• Zwischen Lanthanoiden-Reihe und Actinoiden-Reihe: ↑/↓ in der gleichen Spalte wechseln (z. B. Actinium 89 ↑ Lanthan 57).

NVDA-Workflow

• Browsmodus: Strg+Alt+Pfeiltasten navigieren durch die Zellen (NVDA-Tastentabelle). Danach Fokus an die Cursor-Position: Laptop NVDA+Shift+Backspace, Desktop NVDA+Shift+NumPad-Minus – dann wirken die Pfeiltasten dieser App.
• Alternativ Fokusmodus: Insert+Leertaste umschalten – danach steuern die Pfeiltasten direkt die App.
• Im Browsmodus gehören die Pfeiltasten zum Screenreader-Cursor (wie auf jeder Webseite); die App-Logik greift, sobald ein Element den System-Fokus hat.

Elementliste: Bedienung

• Suchfeld (live): Namens-Teiltreffer, Symbol oder Ordnungszahl exakt – z. B. „Eisen“, „Fe“, „26“.
• Filter: je Dimension eine Ausklappliste (Dropdown), „Alle“ = deaktiviert – Kategorie, Periode, Gruppe, Aggregatzustand. Die aktuell gewählte Option bleibt im Select sichtbar; mit den Pfeiltasten lässt sich die Option ändern. Zwischen den Dimensionen und der Suche kombinieren sich die Auswahlen (AND).
• Sortierung: Spaltenkopf anklicken (oder Enter auf dem Button), nochmal klicken kehrt die Richtung um. Null-Werte stehen immer zuletzt.
• Fixierte Name-Spalte: Die erste Spalte (Name) ist der Zeilenkopf jeder Zeile und bleibt beim seitlichen Scrollen der Tabelle sichtbar – die übrigen Wertespalten laufen darunter vorbei.
• Detailansicht: Enter auf einem Elementnamen öffnet den Dialog, Esc schließt ihn (Fokus-Return auf die öffnende Zeile).
• Sprungnavigation: am Seitenanfang Skip-Links (bei Fokus sichtbar, auch im SR-Linkmenü): Suche und Filter, jede der vier Filter („Filter: Kategorie“ … springt direkt auf den jeweiligen Select) sowie die Elementliste.
• Die Trefferzahl wird live vorgelesen; Sortierwechsel („Sortierung: Name, aufsteigend“) und „Filter zurücksetzen“ werden zusätzlich angekündigt.

Prüfung

• Für Prüfungen gibt es eine eigenständige Prüfungs-PWA unter …/pse-projekt/pruefung/ – sie ist der einzige offizielle Prüfungsweg und lässt sich wie die Hauptapp installieren und offline nutzen.
• Die Prüfungs-PWA zeigt das Raster mit den erlaubten Werten: Ordnungszahl, Elementname, mittlere relative Atommasse und Elektronegativität (Pauling) – keine Dichte, keine Gruppennamen, kein Detail-Dialog. Bedienhinweis steht auf der Seite.
• Der frühere URL-Parameter ?m=pruefung in dieser App ist überholt; er bleibt vorübergehend vorhanden und wird später entfernt.

Ansicht und Kontrast

• Der Schalter „Ansicht: …“ in der Toolbar rotiert durch vier Darstellungs-Zustände: Hell [Default] und Dunkel (beide farbig) sowie Dunkel Kontrast (reine weiße Schrift auf schwarzem Hintergrund) und Hell Kontrast (reine schwarze Schrift auf weißem Hintergrund). In den beiden Kontrast-Zuständen ist alles – auch die Kategorie-Farben – rein Schwarz-Weiß.
• Der Hintergrund ist in allen Zuständen einfarbig (kein Gradient). Die Ränder sind kräftig, der Fokus-Ring 4 px dick.
• Die Auswahl wird am Gerät gespeichert und gilt auf allen Seiten – auch zwischen Hauptapp und Prüfungs-PWA. Nach einem Neuladen erscheint sofort der zuletzt gewählte Zustand (ohne sichtbares Flackern).
• Arbeitet der Browser ohne lokalen Speicher (z. B. im Privatmodus), bleibt der Schalter voll funktionsfähig – nur die Auswahl wird dann nicht gespeichert.

Daten und Einheiten

• Atommasse in u (1 u = 1⁄1833 der Masse eines Kohlenstoff-12-Atoms).
• Dichte bei 20–25 °C · Elektronegativität nach Pauling · „–“ = kein bekannter Wert.
• Schmelz- und Siedepunkt in Kelvin (K) und Grad Celsius (°C) · 1. Ionisierungsenergie in kJ/mol.
• Aggregatzustand bezogen auf 25 °C (fest, flüssig, gasförmig).
• Datenquelle: Wikipedia – Periodensystem der Elemente (CC BY-SA).

Barrierefreiheit und Offline

• Ziel: WCAG 2.2 AA; alle Funktionen sind komplett per Tastatur bedienbar. Live-Regionen melden Trefferzahl, Position und Zustandswechsel; prefers-reduced-motion wird respektiert.
• Die App ist eine PWA: Hauptseite, Elementliste, diese Hilfe, Impressum und Datenschutz werden vorgeladen und sind ohne Internet lauffähig.