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. Supporting an accessible experience is important to us and a core focus for our product.
Navigating The Learning Environment
Codecademy’s Learning Environment is typically split into 2-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 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 by clicking the Tools button and selecting "High Contrast Mode."
Disable Word Wrap
The editor enables “word wrapping” by default. This means that words that are technically on the same line may overflow visually. This can be inconvenient when using a screenreader. To disable word wrapping, select "Tools" and then select “Disable Word Wrap.
Dark Mode
The editor supports enabling “dark mode”. Dark mode can reduce eye strain, improved contrast, and reduce glare. To enable dark mode, select "Tools" and then select Dark Mode.
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.
Resources
We’re always open to feedback on our accessibility support and looking for ways to improve. If you have any issues, please let us know through any of the following:
- Reporting issues with curriculum: the “Report an Issue” or “Get Unstuck” buttons in the learning environment
- Getting help using the site in general: connect with our Customer Support team by clicking the "Contact Us" button on the right-hand side of the page.
- Any other issues with accessibility support: email accessibility@codecademy.com