Skip to main content

Accessibility Features

Learn more about features on CodeHS that improve accessibility

Written by Mary Duskwood
This is a Free Feature Banner

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.

⚠️ Enabling Accessibility mode will cause the line numbers in the Code Editor to disappear.

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..

Enabling Accessibility Mode and Accessibility Features

To enable and configure Accessibility Features, you will need to first turn on Accessibility Settings:

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

  2. In Profile Settings, scroll down to Appearance.

  3. Toggle on Accessibility Mode to enable enhanced accessibility features for improved screen reader support and keyboard navigation.

Image depicting how to navigate to Account Settings

Screenshot showing how to enable accessibility mode in account settings

Once Accessibility Mode is enabled, a new Accessibility Settings tab will become available in the left-hand menu.

Gif showing accessibility tab when accessibility mode is enabled

To access Accessibility Settings:

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

    Image showing where to find the Accessibility options in Account Settings

  2. 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

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!

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 support@codehs.com to learn more!

Did this answer your question?