Accessible Game Pages: Title, Focus and Keyboard

An embedded game is a frame inside your page, and a frame can be a trap for people who use a keyboard, a screen reader or a switch device. You cannot change what happens inside the game, but you control the page around it. This post lists the changes that make a games page easier to use, starting with the one the PlayKovo snippet already gives you.

The snippet's iframe includes a title, such as "Rainbow Run on PlayKovo". Screen readers announce a frame by its title, so a frame without one is just "frame". Keep the title, and do not shorten it to "game". If you write your own embed code from the feed, keep a title that names the game.

• Make the way into the game clear. A visitor who tabs through the page should reach the frame, and a note such as "Click or press Enter in the game to start" explains what to do.
• Make the way out clear. Many games capture the keyboard. If the player gets stuck inside, they need to know how to leave. Add a visible link to skip past the game to the rest of the page.
• Do not remove the focus outline on the frame or on your buttons. Visitors who navigate by keyboard rely on it.
• Do not stop the whole page from scrolling. Arrow keys and the space bar should still scroll your page when the game does not have focus.

You cannot make the game's canvas readable from outside. What you can do is make the page around it informative:

• Put the game's name in a heading above the frame.
• Provide the instructions and controls as real text (see showing controls and instructions).
• Say honestly if the game needs sight or a pointer. A statement such as "This game needs a mouse or touch and a visible screen" helps visitors decide quickly.

Many arcade games are not fully accessible, and no embed code can fix that. The respectful choice is to be clear about it and to offer other games where possible.

• Check that your own text around the game has enough contrast.
• Respect reduced-motion settings for your own animations, such as carousels and auto-moving banners.
• Do not auto-start anything on your page that makes sound. The games begin when the visitor presses play, which is already the right behaviour.

Make cards and buttons large enough to tap, and keep the game's wrapper responsive using the aspect-ratio pattern from the snippet. For portrait games on phones, see the tall box that works. Do not zoom-lock the page; visitors need to be able to enlarge text.

Fullscreen helps many people play more comfortably. The snippet's allow value includes fullscreen, and removing it loses that option; see the allow attribute. The terms also forbid modifying the embed code in ways that remove the permissions the game needs.

1. Unplug the mouse and use only Tab, Shift+Tab, Enter and Space to move around your games page. Can you reach the game, start it and get out?
2. Turn on a screen reader (most computers and phones have one built in) and listen to the page from the top. Do you hear the game's name and the instructions?
3. Zoom the page to 200 percent. Does the layout still work?
4. Turn the sound off. Does the page still make sense?

These checks take ten minutes, and they improve the page for everyone. If you serve children or have specific legal duties around accessibility, take advice for your region; this post is general guidance and not legal advice.