Building a layout that works for everyone

The acceptance criterion is a responsive layout that is fully operable by keyboard.

Keyboard operation. Every interactive element must be reachable with Tab, in an order matching the visual order, and must show a visible focus indicator. A div with a click handler is neither reachable nor announced; a button is both. Adding tabindex and role to a div rebuilds a control the platform already provides.

Focus indicators. Removing the default outline without providing a replacement is the most frequent defect in submissions. :focus-visible allows focus to be styled for keyboard users without appearing on mouse clicks.

Responsive behaviour. Place breakpoints where the layout breaks rather than at device widths. Test at 320 pixels. Horizontal scrolling on a narrow screen is a defect and is checked first.

Hiding content. display: none removes an element from the accessibility tree. That is correct for content which is genuinely irrelevant, and incorrect for a label intended to be hidden only visually; use a visually-hidden utility for the latter.

Submission. A repository, and a README section describing how the interface is operated by keyboard. A reviewer will tab through it.