Keyboard Accessibility Ticket Examples
Keyboard tickets should say exactly where focus goes, which control cannot be reached or operated, and how a developer can prove the fix works.
What to capture
- The page, component, and browser used for testing.
- The keyboard path: Tab, Shift+Tab, Enter, Space, Escape, arrow keys.
- Where focus starts, where it moves, and where it should move instead.
- Whether the issue blocks completion or only adds extra effort.
- Any related screen reader symptom if the focus problem affects announcement.
Examples
Custom dropdown cannot be opened with keyboard
Ticket title: [High] Product filters: custom size dropdown cannot be opened with keyboard User impact: Keyboard-only users cannot refine the product list by size, which can block product discovery. Evidence: Tab reaches the visual size dropdown. Enter and Space do not open it. Mouse click works. Likely WCAG references to verify: - 2.1.1 Keyboard - 4.1.2 Name, Role, Value Acceptance criteria: - Keyboard users can open, navigate, select, and close the dropdown. - Focus order remains logical before and after selection. - The selected state is exposed programmatically.
Focus indicator disappears on primary checkout button
Ticket title: [High] Checkout: primary payment button has no visible keyboard focus User impact: Keyboard users can tab to the payment button but cannot see where focus is before submitting payment. Evidence: In Chrome and Safari, the default focus outline is removed by CSS on .payment-submit without replacement. Likely WCAG references to verify: - 2.4.7 Focus Visible - 2.4.11 Focus Not Obscured, if the focused element is also covered by sticky UI Acceptance criteria: - The button has a visible focus indicator with sufficient contrast. - The focus indicator is not hidden by overlays, sticky bars, or clipping. - The checkout can be completed by keyboard without losing track of focus.
Modal close control is skipped in tab order
Ticket title: [Medium] Size guide modal: close button is skipped by keyboard navigation User impact: Keyboard users may need to press Escape or reload the page because the visible close control cannot be reached. Evidence: After opening the size guide, Tab moves from the heading to the size table and then back to background page links. The close icon has tabindex="-1". Likely WCAG references to verify: - 2.1.1 Keyboard - 2.4.3 Focus Order - 2.1.2 No Keyboard Trap Acceptance criteria: - Focus moves into the modal when it opens. - The close control is reachable and operable by keyboard. - Focus is contained in the modal and returns to the trigger after close.