Hocus :focus is a free, open-source keyboard accessibility horror game built with Jekyll that challenges players through eight levels of common keyboard accessibility mistakes.
What is Hocus :focus?
Hocus :focus is a browser-based game created by front-end developer @HTeuMeuLeu in October 2021. It takes no input from the player beyond keyboard navigation and outputs a series of levels that demonstrate how poor focus management and missing accessibility features can trap keyboard-only users. The game runs entirely in the browser and is built as a Jekyll static site, so it can be served from any static hosting platform.
What makes Hocus :focus stand out?
- Eight trick levels — Each level is deliberately designed to teach a specific keyboard accessibility mistake, from invisible focus indicators to broken skip links.
- Extremely lightweight — Every page loads only 3 requests (1 HTML, 1 CSS, 1 JS) and weighs around 10 Kb total, or 4 Kb gzipped; internal pages drop to roughly 3 Kb (1 Kb gzipped) thanks to browser caching.
- Works almost entirely without JavaScript — Only level 7 requires JavaScript; all other levels function with HTML and CSS alone.
- Built on Jekyll — The site is generated by Jekyll, a static site generator, and can be run locally with
bundle exec jekyll serveafter installing Ruby and Bundler. - MIT licensed — The entire source code is available on GitHub under the MIT License, so you can study, reuse, and modify it freely.
Who should use Hocus :focus?
Hocus :focus is aimed at front-end developers, web designers, and accessibility auditors who want to experience and understand common keyboard navigation failures firsthand. It is also useful for educators teaching web accessibility who need a memorable, interactive example.
- Front-end developers — Play through the levels to spot the exact patterns that break keyboard navigation and learn to avoid them in real projects.
- Web accessibility educators — Use the game as a conversation starter or demonstration in training sessions on keyboard support and focus management.
What can you do with Hocus :focus?
- Learn by playing — Progress through 8 levels that each simulate a distinct accessibility failure, from missing focus styles to invisible skip links.
- Test your own knowledge — Try to complete each level without getting trapped; the game's design forces you to think about how a screen reader or keyboard-only user experiences a page.
- Showcase in talks — Present the game live to illustrate why accessible focus management matters.
How does Hocus :focus work?
To run the game locally, clone the repository, install Jekyll with gem install bundler jekyll, then start a local server with bundle exec jekyll serve. The game is available at http://localhost:4000; use the --incremental flag for faster regeneration during development.
Pricing
Hocus :focus is completely free. The source code is published on GitHub under the MIT License, so you can play and reuse it without cost.
FAQ
How many levels are in Hocus :focus?
There are 8 levels, each designed to trick players around a specific keyboard accessibility mistake.
Does Hocus :focus work without JavaScript?
Yes, almost the entire game works without JavaScript. Only level 7 requires JavaScript to function.
How do I run Hocus :focus locally?
Clone the repository, install Jekyll (requires Ruby and Bundler), then run bundle exec jekyll serve and open http://localhost:4000.
Is Hocus :focus free?
Yes, it is free and open source under the MIT License.
How heavy is each page of the game?
Each page makes only 3 requests (HTML, CSS, JS) and weighs around 10 Kb, or 4 Kb gzipped. Internal pages are even lighter, about 3 Kb (1 Kb gzipped).
