Skip to main content

CodeHop: Accessibility Features

Learn more about CodeHop features that improve accessibility.

Written by Amira Marvel
Updated today
CodeHop License Required Banner

Accessibility Settings

There are three accessibility settings:

  1. Accessibility Mode enables enhanced accessibility features for improved screen reader support and keyboard navigation. Accessibility Mode must be turned on for High Contrast Mode and Show UserWay Widget to be enabled.

  2. High Contrast Mode changes the colors on the site to be higher contrast.

    This has little effect on the Scratch / ScratchJR coding environments and the playground, but changes are more noticeable on the typing platform.

  3. Show UserWay Widget shows the UserWay accessibility widget on the student’s screen.

Shows what the UserWay accessibility widget looks like from a student's perspective when they're in their playground

To enable accessibility settings:

  1. Click the gear icon to access Section Settings.

    Shows the gear icon next to a section. Clicking the gear icon takes the user to the Section Settings page

  2. Scroll down to Students, listed under Roster Management.

  3. Click the three dots next to the student's name who needs accessibility settings enabled.

  4. Click "Advanced Settings" at the bottom of the pop up window.

    Shows the list of student names under Roster Management (on the Section Settings Page). Also shows the pop up menu that opens after clicking the three dots next to a student's name. The teacher can click Advanced Settings at the bottom of the pop up menu

  5. Enable Accessibility Mode first, then enable High Contrast Mode and/or Show UserWay Widget.

    Shows the teacher how to enable each of the three available accessibility settings for a student

At this time, accessibility settings can only be enabled for students one by one.

Accessibility Menu

The Accessibility Menu opens in a pop up window when you click the UserWay Widget.

Shows Accessibility Menu

Accessibility Menu Items:

  1. Oversized Widget Toggle - Enlarges the Accessibility Menu

  2. Contrast + - Toggles between different contrast modes (Inverted, Dark, and Light) to help users with low vision or color blindness see content more clearly.

  3. Highlight Links - Adds a high-contrast background or underline to every clickable link, making them stand out from regular text.

  4. Bigger Text - Increases the font size across the entire site through several levels of magnification.

  5. Text Spacing - Adjusts the space between letters and line height to improve readability

  6. Pause Animations - Stops moving elements, flashing content, or auto-playing videos

  7. Hide Images - Removes images

  8. Dyslexia Friendly - Switches the site’s font to specialized typefaces (like OpenDyslexic) that make letters easier to distinguish. Students without Dyslexia may also enjoy this option.

  9. Cursor - Enlarges the mouse pointer or adds a "reading guide" (a horizontal line or masked area) to help users keep their place on the screen.

  10. Tooltips - Shows alternative text for images and descriptions for buttons when the user hovers over them.

  11. Line Height - Increases the vertical space between lines of text to prevent "crowding" for readers.

  12. Text Align - Forces text to be left, right, or center-aligned (usually left-aligned is best for accessibility) to create a predictable reading pattern.

  13. Saturation - Intensifies or dulls the colors on screen

  14. Reset All Accessibility Settings - Returns accessibility settings to the default

  15. Move/Hide Widget -

    1. Left - Moves widget and menu to the left

    2. Right - Moves widget and menu to the right (default)

    3. Hide - Removes the widget and menu from view

Shows how most of the accessibility menu items work

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

Did this answer your question?