Jamzo Team

Best Practices for Web Game Controls and Accessibility

Web games are played on a variety of setups, from high-end gaming rigs to trackpads on old laptops. Ensuring your controls are intuitive and accessible is key to getting a high gameplay score.

Stick to the Standards

Use standard controls: WASD or Arrows for movement, Space to jump, and Mouse to aim or shoot. Support both keyboard-only and mouse+keyboard setups if possible.

If you have the time, implementing the HTML5 Gamepad API (or using your engine's built-in controller support) can be a massive delight for players who prefer a controller.

Remappable Controls

While standard controls are great, allowing players to remap their keys is the ultimate accessibility feature.

AZERTY Keyboards: Players in France and Belgium use AZERTY keyboards, meaning WASD controls are incredibly awkward for them.
Motor Disabilities: Players with motor disabilities may need to map all controls to a specific side of the keyboard or to a specialized input device.

If you don't have time to build a full remapping UI, at least provide a hardcoded alternative (e.g., "Use WASD or Arrow Keys").

Keys to Avoid

Escape: Do not use the Escape key for critical gameplay mechanics, as it often interacts with the browser's fullscreen mode and can cause players to accidentally exit your game.
Tab: Do not use Tab, as it will shift focus away from your game canvas and onto the browser UI, ruining the player's experience.
Right Click (Sometimes): Be careful with right-click mechanics, as they can trigger the browser's context menu if not properly prevented in code (e.preventDefault()).

Visual Accessibility

Accessibility isn't just about controls; it's about how players perceive your game.

Colorblindness: Don't rely solely on color to convey critical information. If red enemies are bad and green enemies are good, make sure they also have different shapes or silhouettes.
Screen Shake Toggles: "Juice" is great, but aggressive screen shake can cause motion sickness. Always try to include a simple toggle in your main menu to disable screen shake and flashing lights.

Cognitive Accessibility and Text

Clear Tutorials: Don't dump a wall of text on the player. Introduce mechanics one at a time in a safe environment.
Dyslexia-Friendly Fonts: If your game relies heavily on reading (like a visual novel or RPG), consider offering a toggle for a dyslexia-friendly font like OpenDyslexic or a clean, sans-serif alternative to stylized pixel fonts.

Keep it simple, keep it standard, and let the players focus on the fun.

Stick to the Standards

Use standard controls: WASD or Arrows for movement, Space to jump, and Mouse to aim or shoot. Support both keyboard-only and mouse+keyboard setups if possible.

If you have the time, implementing the HTML5 Gamepad API (or using your engine's built-in controller support) can be a massive delight for players who prefer a controller.

Remappable Controls

While standard controls are great, allowing players to remap their keys is the ultimate accessibility feature.

AZERTY Keyboards: Players in France and Belgium use AZERTY keyboards, meaning WASD controls are incredibly awkward for them.

Motor Disabilities: Players with motor disabilities may need to map all controls to a specific side of the keyboard or to a specialized input device.

If you don't have time to build a full remapping UI, at least provide a hardcoded alternative (e.g., "Use WASD or Arrow Keys").

Keys to Avoid

Escape: Do not use the Escape key for critical gameplay mechanics, as it often interacts with the browser's fullscreen mode and can cause players to accidentally exit your game.

Tab: Do not use Tab, as it will shift focus away from your game canvas and onto the browser UI, ruining the player's experience.

Right Click (Sometimes): Be careful with right-click mechanics, as they can trigger the browser's context menu if not properly prevented in code (e.preventDefault()).

Visual Accessibility

Accessibility isn't just about controls; it's about how players perceive your game.

Colorblindness: Don't rely solely on color to convey critical information. If red enemies are bad and green enemies are good, make sure they also have different shapes or silhouettes.

Screen Shake Toggles: "Juice" is great, but aggressive screen shake can cause motion sickness. Always try to include a simple toggle in your main menu to disable screen shake and flashing lights.

Cognitive Accessibility and Text

Clear Tutorials: Don't dump a wall of text on the player. Introduce mechanics one at a time in a safe environment.

Dyslexia-Friendly Fonts: If your game relies heavily on reading (like a visual novel or RPG), consider offering a toggle for a dyslexia-friendly font like OpenDyslexic or a clean, sans-serif alternative to stylized pixel fonts.

Keep it simple, keep it standard, and let the players focus on the fun.