Accessibility Engineering

Touch Targets for Cancel, Fullscreen, and Close Controls

Give icon controls at least 44 by 44 CSS pixel hit areas, spacing, safe-area handling, and press feedback across zoomed viewers and edge gestures.

The dangerous implementation is not one that never works. It is one that works in a demo and loses its boundaries under real networks and real data volume. A visual icon may be 16 px while its hit box is larger and separated from dangerous neighbors, including safe-area insets.

Accessibility is not a late set of ARIA attributes. Keyboard, screen-reader, zoom, reduced-motion, and high-contrast users need the same complete task and a discoverable next step after errors.

Engineering boundaries and tradeoffs

List non-negotiable invariants before selecting performance knobs. Tuning can roll out gradually; identity, permission, and terminal-state rules cannot drift at runtime.

  • Enlarge the actual button via padding, separate cancel from retry, and keep viewer controls in screen coordinates during zoom for one-handed use.
  • Give state one owner, a version, and terminal states; callbacks may mutate only the version that created them.
  • Treat cleanup as protocol behavior: timers, handles, queues, and temporary data must be safely releasable in every terminal state.

The delivery standard for Touch Targets for Cancel, Fullscreen, and Close Controls is a usable normal path, convergent failures, bounded resources, and a state users can understand. The result is a production capability that can be explained, degraded safely, and rolled back—not a demo that works once.

How it fails in production

Production failures often appear when two individually valid actions overlap. Inspect stale messages, duplicate effects, exhausted resources, and mixed versions instead of patching only the current stack frame.

  • Transparent pseudo hit areas can cover neighbors, while transformed containers shrink or move controls with the video.
  • Fixing only the UI leaves queues, locks, or expired credentials for the next operation to inherit and fail again.
  • Without backpressure or quota, a slow consumer raises memory, queue depth, and tail latency until unrelated users are affected.

Turn testing into a closed loop

Build golden cases from known inputs and controlled faults, then align production metrics with those results. Verification extends to production only when signals detect the same degradation early.

  1. At 320 px width, notched safe areas, 200 percent text, and 4x video zoom, verify hit grids, overlap, and mis-taps.
  2. Drive the state machine with reordered, duplicate, and delayed messages, proving stale versions are ignored and explicit stop survives recovery.
  3. Allowlist log and analytics fields, proving payloads, secrets, full IP addresses, and identifying data never leave the device.

The result must be correct, recoverable, and explainable. If any part depends on refreshing the page or an engineer guessing, the protocol loop remains incomplete.

Put the guide to work

Open uCopy and connect two devices securely from the browser.

Start for free