Skip to main content

Accessibility Features

Learn more about features on CodeHS that improve accessibility

Lea Sloan avatar
Written by Lea Sloan
Updated over 2 weeks ago

To learn more about our commitment to accessibility, visit our Accessibility Statement.

CodeHS Accessibility Features

Accessibility Mode

Accessibility Mode enables High Contrast Mode for users, as well as provides a UserWay Widget in the bottom right corner for other helpful accessibility tools for students who may need it.

A screenshot of the Teacher dashboard with accessibility mode turned on. Buttons are lime green with black text, and the color of the pills describing sections are dark blue with white text and lime green with black text. The UserWay widget button is also displayed in the bottom right of the dashboard, next to the Intercom Support button..

The UserWay Widget provides many additional accessibility tools such as:

  • Additional high contrast mode options

  • Resizing text

  • Altering line height

  • Changing the cursor

  • Hiding images

  • Adjusting text spacing

  • And much more!

If you or a student would like to use Accessibility Mode, please contact our Support team at support@codehs.com to help enable this feature for you!

Accessibility Settings

Once Accessibility Mode is enabled, you can configure its features through the Accessibility Settings. To access your Accessibility Settings:

  1. Click your Profile icon in the top-right corner and select Account Settings

    Image depicting how to navigate to Account Settings

  2. In the left-hand menu, scroll down and click Accessibility

    Image showing where to find the Accessibility options in Account Settings

  3. Toggle the settings you want to turn on or off

The available options include:

  • High Contrast Mode

  • Show UserWay Widget

GIF demonstrating how to use the Accessibility toggle options

Code Editor Appearance Settings

Students can adjust the appearance and font size of the editor in their Account Settings, which are loaded every time they access the Editor. To do this, students can:

  1. Click their name in the top-right

  2. Click Account Settings

  3. Click the IDE tab on the left to adjust their settings:

screenshot of the account settings link found in the top-right corner when students click their name
Photo showing how to adjust Code Editor Appearance Settings

  • Editor Font: adjusts the font size of the student's code

  • Console Output Font: adjusts the font size of the console on the right

  • Editor Theme: allows students to change the color scheme of the Code Editor to a higher contrast theme, such as Terminal or Monokai

  • Editor Autocomplete: automatically adds closing brackets while typing code

  • Blocks/Text Settings: toggle block coding

Students can also change their Code Editor settings at any time by clicking the gear near the top-left in Code Editor:

.gif demonstration of changing the Code Editor settings on CodeHS

Still have questions? Contact our team at hello@codehs.com to learn more!

Did this answer your question?