Skip to main content
Version: Next

Accessibility (a11y) in Codesphere

Codesphere is designed to be inclusive and operable for all developers. As such the tool is compatible with most common screen readers and other WCAG tooling.

Codesphere's a11y Standards​

We are actively developing the platform to meet WCAG 2.2 Level AA compliance. Our development lifecycle includes both automated tooling and manual audits to ensure the platform remains accessible.

Here are some examples how Codesphere supports standard a11y practices:

  • Semantic HTML: We use semantic markup so screen readers can accurately interpret the structure of the dashboard and IDE panes.
  • Keyboard Operability: User flows—such as workspace creation, terminal access, and deployment—are tested for full keyboard operability without trapping the user's focus.
  • Continuous Contrast Checking: Automated CI/CD pipelines verify that text and interactive elements maintain high contrast for users with visual impairments.

Example Use Screen Reader in Codesphere​

If you are on a Mac, you don't need third-party software to navigate Codesphere. Here is how to use macOS's native screen reader with Codesphere.

Screen Reading with VoiceOver​

Codesphere's semantic structure pairs well with VoiceOver, Apple's built-in screen reader.

  • To activate: Press Cmd + F5 (or tap the Touch ID button 3 times on newer MacBooks).
  • Navigating the IDE: Use the VoiceOver Rotor (Ctrl + Option + U) to quickly jump between structural landmarks in Codesphere, such as skipping from the file tree directly to the terminal or the code editor pane.
  • Reading Code: VoiceOver will read the syntax in the editor. You can adjust the verbosity in your macOS settings (System Settings > Accessibility > VoiceOver > Verbosity) to control how much punctuation (like brackets and semicolons) is announced.

VoiceOver Cheat Sheet for the Codesphere IDE​

When using Apple's VoiceOver (Cmd + F5) within a complex web application like the Codesphere IDE, standard web navigation shortcuts are your best tool for moving efficiently between the file tree, terminal, and code editor.

Note: In the shortcuts below, VO refers to the VoiceOver modifier keys, which are usually Control + Option (or the Caps Lock key, depending on your macOS settings).

info

Codesphere supports standard Tab, Shift+Tab, Space, and Enter navigation natively.

General Navigation​

  • Open the Web Rotor: VO + U (Use this to pull up a list of all landmarks, headings, and links on the screen to quickly jump to a specific pane).
  • Next/Previous Heading: VO + Cmd + H / VO + Cmd + Shift + H
  • Next/Previous Form Control: VO + Cmd + J / VO + Cmd + Shift + J (Great for jumping between buttons and input fields).
  • Read from current position to end: VO + A
  • Pause/Resume speaking: Control
  • Voice-Over Help: VO + H

Interacting with the Code Editor & Terminal​

Because the code editor and terminal are complex, nested web elements, you often need to explicitly tell VoiceOver to "enter" them before you can type or read the lines of code.

  • Interact with an element: VO + Shift + Down Arrow (Use this when focused on the code editor pane to step inside and begin reading/editing the code).
  • Stop interacting: VO + Shift + Up Arrow (Use this to escape the code editor or terminal and return to navigating the broader IDE layout).