Research paper
Touch Targets and Mobile Casino Controls
On a phone, casino controls compete for a few square inches: odds buttons, stake steppers, game tiles, close icons and safer play links. WCAG 2.2 now sets a minimum target size, and the sticky bars common in sportsbooks can hide what has keyboard focus.
In brief
- WCAG 2.2 criterion 2.5.8, Target Size (Minimum), level AA: targets for pointer input are at least 24 by 24 CSS pixels, with five exceptions.
- Criterion 2.5.5, Target Size (Enhanced), level AAA: at least 44 by 44 CSS pixels, with exceptions.
- Criterion 2.4.11, Focus Not Obscured (Minimum), level AA: focused components are not entirely hidden by author-created content such as sticky bars.
- Criterion 1.4.10, Reflow: content works without two-direction scrolling at narrow widths.
Target sizes in WCAG 2.2
Criterion 2.5.8 reads: "The size of the target for pointer inputs is at least 24 by 24 CSS pixels, except when:" one of five exceptions applies. The exceptions are named Spacing, Equivalent, Inline, User agent control and Essential. The spacing exception covers small targets that have enough clear space around them; the W3C's explanation says the aim is "to help ensure targets can be easily activated without accidentally activating an adjacent target." See target size in the glossary.
The stricter criterion 2.5.5, at level AAA, starts: "The size of the target for pointer inputs is at least 44 by 44 CSS pixels except when:" its own exceptions apply. For the controls that move money or change safer play settings, aiming for the larger size is a reasonable design choice even when AA is the formal target.
Where casino interfaces run small
| Control | Risk | Design response |
|---|---|---|
| Odds buttons in a dense market list | Tapping the wrong selection | At least 24 by 24 CSS pixels with spacing; larger where layout allows |
| Stake plus and minus steppers | Wrong stake entered | Large steppers plus a typed amount field |
| Close icons on pop-ups and banners | Banner cannot be dismissed, or a link behind it is hit | A labeled close button of at least 44 by 44 CSS pixels |
| Game tile info icons | Opening the game instead of its details | Separate the info control from the tile's main tap area |
| Safer play links in a crowded footer | Hard to hit, easy to miss | Full-width list items in the account menu |
Sticky bars and hidden focus
Sportsbooks often pin a bet slip to the bottom of the screen; casinos pin a navigation bar, a chat launcher or a consent banner. Criterion 2.4.11 says that when a component "receives keyboard focus, the component is not entirely hidden due to author-created content." A keyboard or switch user tabbing down a market list can end up with focus behind the bet slip. Leave scroll padding equal to the sticky bar's height, or let the bar collapse while focus is in the content above it.
Sticky bars also reduce the space left for content at high zoom. Under criterion 1.4.10, content should work "without requiring scrolling in two dimensions" at narrow widths; a fixed header and a fixed bet slip together can leave almost no room at 400% zoom.
Layouts that hold up on phones
- One column for forms. Registration and cashier fields stack vertically with labels above.
- Horizontal scroll only where it makes sense. Wide tables, such as a game comparison or our journey matrix, can scroll inside a labeled region rather than the whole page.
- Thumb reach. Put the main action within easy reach at the bottom, but not where it covers focused content.
- No hover-only controls. Anything revealed on hover needs a tap or focus route as well.
- Orientation. Do not lock the page to portrait unless the content needs it.
Worked example (invented)
A bet slip on a 390-pixel-wide screen: the stake field is 48 pixels tall, with minus and plus buttons of 44 by 44 pixels either side and 8 pixels of space between them. The "Place bet" button spans the full width. When the player tabs into the market list above, the page keeps 120 pixels of scroll padding at the bottom so the focused odds button never sits behind the slip.
Questions
Is 24 by 24 CSS pixels enough for odds buttons?
It meets the level AA minimum, especially with spacing between targets. For controls that place bets or change limits, the 44 by 44 size from criterion 2.5.5 lowers the chance of mistakes and is worth aiming for where space allows.
Do inline text links need to be 24 pixels tall?
No. Targets in a sentence or block of text fall under the Inline exception to criterion 2.5.8.
How do we test for hidden focus?
Tab through each page with the sticky elements showing, at a phone width and at high zoom. Watch whether any focused element disappears behind a bar, banner or chat button.
Sources
- W3C, Web Content Accessibility Guidelines (WCAG) 2.2, W3C Recommendation, December 12, 2024.
- W3C WAI, Understanding Success Criterion 2.5.8: Target Size (Minimum), updated May 11, 2026.
- W3C WAI, Understanding Success Criterion 2.5.5: Target Size (Enhanced), updated September 6, 2026.
Every source was read on October 27, 2026. How we choose and date sources: data sources.