Accessibility Guide

Guide to using Codecademy as a user with limited or no vision, limited or alternative control methods, or other "accessibility" concerns.

Codecademy Accessibility Guide

Codecademy is committed to providing a high quality learning experience from all learners. That includes accommodating for different usage forms such as auditory, motor, or visual restrictions; limited hardware; ????.

Navigating the Learning Environment

Codecademy’s Learning Environment is typically split into 2 to 5 “panes”, each of which has a visually hidden heading on top of it. The first pane is always a “Narration Pane”. Other sections typically represent the input you’ll be entering for the lesson and/or the resultant output.

Narration Pane

Heading: “Narrative”

Narration panes typically contain up to three groups of contents:

  1. Introduction: Description of what the current content item entails, such as an explanation of an exercise’s concepts or summary of a project.
  2. Checkpoints: For exercises and projects, the ordered steps that must be completed in order to be considered complete.

    • For exercises, submitting your code will be checked for validity. If considered valid by the checkpoint, the checkpoint will be marked as complete. If not, an error will be ??? INDICATED ???.
    • For projects, you will need to mark the checkpoints as complete yourself. You can do so by clicking on a checkpoint or pressing enter or space while it is keyboard-focused.
  3. Additional Resources: Links to cheatsheets, community forum discussions, and/or any other resources relevant to the content.

Code Editors

Headings: “Code Editor”, “Read-only Code Pane”

Code editors allow editing shortcuts similar to the Visual Studio Code editor. Press F1 or Cmd+Shift+P (Mac) / Ctrl+Shift+P (Linux/Windows) on your keyboard while in the code editor to display a list of all available shortcuts.

Keyboard Navigation

Code editors will grab your keyboard focus as soon as they are focused or typed into. You can “escape” them by pressing Escape or Ctrl+M.

High Contrast

The editor supports enabling “High Contrast: Light” and “High Contrast: Dark” visual themes to increase color contrast of text. You can enable them using the code editor help menu:

  1. Open the shortcuts menu by pressing F1
  2. Type “high contrast”
  3. Using keyboard up/down arrows and enter or your mouse to select either theme

Terminals

Headings: “Output Terminal”; “Output-only Terminal”; “Terminal”

Web Browsers

Contact & Resources