Accessibility on the Platform

Accessibility Guide

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

Navigating The Learning Environment

Codecademy’s Learning Environment is typically split into 2 to 5 “panes,” each of which is an ARIA Region on the page and includes 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 resulting output.

Narration Pane

Heading: “Narrative”

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.

Code Editors

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.

Web Browsers

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.