Barrierefreiheit (a11y) in Codesphere

Codesphere ist so gestaltet, dass es inklusiv und für alle Entwickler bedienbar ist. Aus diesem Grund ist das Tool mit den gängigsten Screenreadern und anderen WCAG-Tools kompatibel.

Codespheres a11y-Standards​

Die Plattform wird aktiv weiterentwickelt, um die Konformität mit WCAG 2.2 Level AA zu erreichen. Der 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: Es wird semantisches Markup verwendet, damit Screenreader die Struktur des Dashboards und der IDE-Bereiche korrekt interpretieren können.
• Bedienbarkeit per Tastatur: Nutzerabläufe – wie das Erstellen eines Workspace, der Terminalzugriff und das Deployment – werden auf vollständige Tastaturbedienbarkeit getestet, ohne dass der Fokus des Nutzers gefangen wird.
• Kontinuierliche Kontrastprüfung: Automatisierte CI/CD-Pipelines überprüfen, dass Text und interaktive Elemente einen hohen Kontrast für Nutzer mit Sehbeeinträchtigungen beibehalten.

Beispiel: Screenreader in Codesphere verwenden​

Auf einem Mac wird keine Drittanbietersoftware benötigt, um sich in Codesphere zurechtzufinden. Hier wird beschrieben, wie der native Screenreader von macOS mit Codesphere genutzt werden kann.

Screenreading mit VoiceOver​

Codespheres semantische Struktur harmoniert gut mit VoiceOver, dem integrierten Screenreader von Apple.

• Aktivierung: Cmd + F5 drücken (oder auf neueren MacBooks 3x den Touch-ID-Button tippen).
• Navigation in der IDE: Der VoiceOver-Rotor (Ctrl + Option + U) ermöglicht das schnelle Wechseln zwischen strukturellen Landmarken in Codesphere, zum Beispiel das direkte Springen vom Dateibaum zum Terminal oder zum Code-Editor-Bereich.
• Code vorlesen lassen: VoiceOver liest die Syntax im Editor vor. Die Ausführlichkeit kann in den macOS-Einstellungen angepasst werden (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 Nutzung von Apples VoiceOver (Cmd + F5) innerhalb 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, je nach macOS-Einstellungen).

Allgemeine Navigation​

• Web-Rotor öffnen: VO + U (Damit lässt sich eine Liste aller Landmarken, Überschriften und Links auf dem Bildschirm aufrufen, 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 (Praktisch, um zwischen Buttons und Eingabefeldern zu wechseln).
• Von aktueller Position bis zum Ende vorlesen: VO + A
• Vorlesen pausieren/fortsetzen: Control
• VoiceOver-Hilfe: VO + H

Interaktion mit dem Code-Editor & Terminal​

Da der Code-Editor und das Terminal komplexe, verschachtelte Webelemente sind, muss VoiceOver oft explizit angewiesen werden, diese zu „betreten“, bevor Codezeilen eingegeben oder gelesen werden können.

• Mit einem Element interagieren: VO + Shift + Pfeil nach unten (Damit lässt sich, wenn der Fokus auf dem Code-Editor-Bereich liegt, in den Code hineingehen und mit dem Lesen/Bearbeiten beginnen).
• Interaktion beenden: VO + Shift + Pfeil nach oben (Damit lässt sich der Code-Editor oder das Terminal verlassen und zur allgemeinen Navigation im IDE-Layout zurückkehren).