Barrierefreiheit (a11y) in Codesphere

Codesphere ist so gestaltet, dass es für alle Entwickler inklusiv und nutzbar ist. Daher ist das Tool mit den meisten gängigen Screenreadern und anderen WCAG-Tools kompatibel.

Codespheres a11y-Standards​

Wir entwickeln die Plattform aktiv weiter, um die Konformität mit WCAG 2.2 Level AA zu erreichen. Unser Entwicklungszyklus umfasst sowohl automatisierte Tools als auch manuelle Audits, um sicherzustellen, dass die Plattform barrierefrei bleibt.

Hier einige Beispiele, wie Codesphere gängige a11y-Praktiken unterstützt:

• Semantisches HTML: Wir verwenden semantisches Markup, damit Screenreader die Struktur des Dashboards und der IDE-Bereiche korrekt interpretieren können.
• Bedienbarkeit per Tastatur: Nutzerabläufe – wie das Erstellen von Workspaces, der Terminalzugriff und das Deployment – werden auf vollständige Tastaturbedienbarkeit getestet, ohne den Fokus des Nutzers zu blockieren.
• Kontinuierliche Kontrastprüfung: Automatisierte CI/CD-Pipelines überprüfen, ob Text und interaktive Elemente einen hohen Kontrast für Nutzer mit Sehbeeinträchtigungen beibehalten.

Beispiel: Screenreader in Codesphere verwenden​

Wenn du einen Mac verwendest, benötigst du keine Software von Drittanbietern, um Codesphere zu navigieren. Hier erfährst du, wie du den nativen Screenreader von macOS mit Codesphere nutzt.

Bildschirmlesen mit VoiceOver​

Codespheres semantische Struktur harmoniert gut mit VoiceOver, dem in Apple-Geräten integrierten Screenreader.

• Aktivieren: Drücke Cmd + F5 (oder tippe bei neueren MacBooks 3-mal auf die Touch-ID-Taste).
• Navigation in der IDE: Verwende den VoiceOver Rotor (Ctrl + Option + U), um schnell zwischen den strukturellen Orientierungspunkten in Codesphere zu wechseln, zum Beispiel um direkt vom Dateibaum zum Terminal oder zum Code-Editor-Bereich zu springen.
• Code vorlesen lassen: VoiceOver liest die Syntax im Editor vor. Du kannst die Ausführlichkeit in deinen macOS-Einstellungen anpassen (Systemeinstellungen > Bedienungshilfen > VoiceOver > Ausführlichkeit), um zu steuern, wie viel Zeichensetzung (z. B. Klammern und Semikolons) angesagt wird.

VoiceOver-Spickzettel für die Codesphere IDE​

Bei der Verwendung von Apples VoiceOver (Cmd + F5) in einer komplexen Webanwendung wie der Codesphere IDE sind die Standard-Webnavigations-Shortcuts das beste Werkzeug, um effizient zwischen Dateibaum, Terminal und Code-Editor zu wechseln.

Hinweis: In den folgenden Shortcuts bezieht sich VO auf die VoiceOver-Modifikatortasten, die üblicherweise Control + Option sind (oder die Caps Lock-Taste, abhängig von deinen macOS-Einstellungen).

Allgemeine Navigation​

• Web-Rotor öffnen: VO + U (Damit rufst du eine Liste aller Orientierungspunkte, Überschriften und Links auf dem Bildschirm auf, um schnell zu einem bestimmten Bereich zu springen).
• Nächste/Vorherige Überschrift: VO + Cmd + H / VO + Cmd + Shift + H
• Nächstes/Vorheriges Formularelement: VO + Cmd + J / VO + Cmd + Shift + J (Ideal, um zwischen Schaltflächen und Eingabefeldern zu wechseln).
• Von der aktuellen Position bis zum Ende vorlesen: VO + A
• Vorlesen pausieren/fortsetzen: Control
• VoiceOver-Hilfe: VO + H

Interaktion mit Code-Editor und Terminal​

Da der Code-Editor und das Terminal komplexe, verschachtelte Weblemente sind, musst du VoiceOver oft explizit anweisen, in sie „einzutreten“, bevor du Codezeilen eingeben oder lesen kannst.

• Mit einem Element interagieren: VO + Shift + Nach-unten-Taste (Verwende dies, wenn der Fokus auf dem Code-Editor-Bereich liegt, um in den Code einzutreten und mit dem Lesen/Bearbeiten zu beginnen).
• Interaktion beenden: VO + Shift + Nach-oben-Taste (Verwende dies, um den Code-Editor oder das Terminal zu verlassen und zur Navigation im übergeordneten IDE-Layout zurückzukehren).