Narration panes typically contain up to three groups of content:

• Introduction: Description of what the current content item entails, such as an explanation of an exercise’s concepts or summary of a project.
• Checkpoints: The steps that must be completed before moving on. These work a little differently for exercises and for projects. For exercises, the code you submit will be checked automatically. If your code is considered correct, the checkpoint will be marked as complete. If it’s not correct, an error will appear explaining what went wrong. Either way, it will be actively narrated by screenreaders. For projects, you will need to mark the checkpoints as complete yourself once you’re satisfied with your work. You can do so by clicking on a checkpoint or pressing enter or space while it is keyboard-focused. Additional Resources: Links to cheatsheets, community forum discussions, and any other relevant resources.

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

Code editors allow editing shortcuts similar to the Visual Studio Code editor. Press F1 or Command+Shift+P (Mac) / Control+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 Control+M.

High Contrast:

The editor supports enabling a “High Contrast” visual theme to increase the color contrast of text. You can enable it using the code editor help menu by following these steps:

Open the shortcuts menu by pressing F1 Type “high contrast” Click the resulting option or press Enter on your keyboard

Screenreader Mode:

The editor enables “word wrapping” by default: words technically on the same line might visually overflow, such that if you press ‘down’ or ‘up’ on the keyboard, you stay within the same line. This can be inconvenient when using a screenreader. You can enable a “Screenreader Mode” to get disable word wrapping:

Open the shortcuts menu by pressing F1 Type “screenreader mode” Click the resulting option or press Enter on your keyboard Terminals Headings: “Output Terminal”; “Output-only Terminal”; “Terminal”

Terminals function as normal text input areas. They generally work better with screenreaders if you have the Screenreader Mode option enabled from code editors.

Heading: “Web Browser”

Web browsers contain a URL navigation bar followed by an embedded “iframe” element. Exercises and projects generally will not need you to trigger actions in the navigation bar.

'The Codecademy Team, composed of experienced educators and tech experts, is dedicated to making tech skills accessible to all. We empower learners worldwide with expert-reviewed content that develops and enhances the technical skills needed to advance and succeed in their careers.'