What it does
- Five realistic screens: sign-in, header, checkout, product grid, settings
- Tap to number the focus order, tap again to undo
- Your order next to the right one, with the rule behind it
- Works with a keyboard and a screen reader too
FAQ
What does WCAG 2.4.3 Focus Order require?
When someone moves through a page with the keyboard, focus has to go in an order that preserves meaning and operability. On most screens that is the visual reading order.
Should I use tabindex to fix the order?
Avoid positive tabindex values. Put elements in the right order in the HTML, use tabindex="0" only to make a custom control focusable and tabindex="-1" for elements you focus with script.
Does CSS order or flex-direction change focus order?
No. CSS can change what people see, but focus follows the HTML order, so a visually reordered layout sends keyboard users jumping around.
📖 Keyboard focus order: designing the Tab sequence (WCAG 2.4.3)
More free tools
- Palette Generator - Pick a hue, choose a color harmony, and get a full accessible palette with live AA/AAA contrast checking.
- Contrast Checker - Paste two colors, see the WCAG ratio, and fix a failing pair with a single click.
- Image → Palette - Drop in an image, pull out its dominant colors, and see which pairs are safe to use together.
- Color Blindness Simulator - See a palette through protanopia, deuteranopia, tritanopia and achromatopsia - and catch colors that collapse.
- Type Scale Generator - Pick a base size and a ratio, get a full type scale with live preview, fluid clamp() and tokens to copy.
- Gradient & Mesh Generator - Linear, radial, conic or blobby mesh gradients - drag the points, shuffle the colors, copy the CSS.
- Component States Explorer - Buttons, inputs and cards in every state - hover, focus, pressed, disabled, error - side by side with contrast checks.
- Design Token Converter - Paste W3C tokens, Tokens Studio or Figma Variables JSON and get CSS, SCSS, Tailwind v4 or SwiftUI - aliases included.
- Motion & Easing Playground - Drag cubic-bezier handles, tune a real spring, watch them race, and export motion tokens as CSS linear(), Framer Motion or SwiftUI.
- Auto-Trim - Drop in PNGs and get them back without the empty transparent edges - in bulk, in your browser, as one ZIP.
- Text Expansion Stress Test - See how a UI breaks in German, Spanish or pseudo-localized text - and which CSS fixes make it survive translation.
- Mini A11y Audit - Paste HTML and find missing alt text and labels, unnamed buttons, heading jumps, tiny tap targets and low contrast.
- Multi-size Preview - One message laid out across social and display-ad sizes, with platform safe zones and a draggable focal point. Export every PNG.
- Mobile Preview - Open any website inside iPhone, Pixel, Galaxy and iPad frames at their real viewport sizes. Rotate it or compare four devices at once.
- Hue Hunt - Match five colors by eye with hue, saturation and lightness. Scored by perceptual distance, with a daily challenge to share.
- Pass or Fail - Twenty quick rounds: does this text pass WCAG AA contrast? Trust your eye, then see the real ratios.
- Optical Eye - Fix seven layout flaws by eye: center a play icon, even out padding, size a circle against a square.
- State Panic - Components fall with something happening to them. Pick the right UI state before they hit the floor.
- Easing Golf - Mini golf with animation curves: shape a cubic-bezier so the puck hits every flag on time. Par is three.
- Contrast Survival - The background keeps shifting. Hold the text lightness so it passes WCAG AA, then AAA, as long as you can.
- Token Rush - Swap hard-coded values for the right design tokens, fast. Then flip the theme and see what breaks.
- Kern Me - Space six words by eye. Each has one letter pair too tight or too loose; the answer is the font designer’s own kerning.