Focus Moveable

Steps to ensure that a user can move keyboard focus forward without becoming stuck or trapped

Prerequisites

See Keyboard Prerequisites.

Steps

  1. Place keyboard focus into the browser's address bar

    1. There should now be a blinking caret, indicating that the input has keyboard focus

  2. Use TAB key to move forwards through the browser chrome

    • Do not create any issues for the browser chrome

  3. Use TAB key to move forwards through all focusable elements of the page

    1. Do not worry (for now) if the focus indicator disappears and reappears from time to time

  4. The focus should eventually re-appear in the browser chrome

    1. For a long page, it may take some time to navigate all the way through the page

  5. If the focus does not reappear in the browser chrome, and becomes stuck or trapped somewhere in the page, create an issue

    • See "Keyboard focus is trapped" section below

Creating Issues

Make sure you provide enough information to reproduce each keyboard trap.

  • Description: Keyboard focus is trapped

  • Priority: P1

  • Label or Tag: #a11y212

Exceptions

  • Focus should be trapped within a modal dialog (i.e. the page behind the opened dialog should not be reachable with keyboard).

About

Author(s): Ian McBurnie & Luis Garcia

Last Updated: 2020 Jan 25

Last updated