OATMEAL
  • OATMEAL
  • Issue Priorities
  • Help
    • Fix TAB Key in Safari
  • OATMEAL Checklists
    • eBay Core Accessibility Tests
    • eBay Situational Tests
  • Color Contrast Methods
    • Color Contrast Analyzer
    • Colour Contrast Analyser - color codes
    • Colour Contrast Analyser - color picker
  • Keyboard Methods
    • Focus Moveable
    • Focus Visible
    • Focus Reachable
    • Focus Management
    • Skip to Main
    • Buttons and Links
  • Screen Reader Methods
    • NVDA Setup
    • NVDA Smoke Test
Powered by GitBook
On this page
  • Prerequisites
  • Browsers to Test With
  • Steps
  • Creating Issues
  • Keyboard focus indicator lost
  • Keyboard focus indicator insufficient
  • About
  1. Keyboard Methods

Focus Visible

Steps to ensure that a user can remain orientated on the page at all times using a keyboard alone

PreviousFocus MoveableNextFocus Reachable

Last updated 3 years ago

Prerequisites

See .

These steps assume that the following tests have been completed and that issues found have been resolved:

Browsers to Test With

Test for visible focus using browsers with and without a stylized visual indicator.

Non-stylized focus indicator

Stylized focus indicator

Firefox

Chrome

Internet Explorer

Safari

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 focusable elements of the page; pause on every key press to verify that keyboard focus is still visible

    • Do not hold down the TAB key

  4. If the focus indicator is lost, create an issue

    • See "Keyboard focus indicator lost" section below

  5. If the focus indicator is visible, but relies on colour alone, create an issue

    1. See "Keyboard focus indicator insufficient" section below

  6. If the focus indicator is visible, but not easily distinguishable, create an issue

    1. See "Keyboard focus indicator insufficient" section below

  7. Repeat steps 3 to 6 until focus returns to the browser chrome

Creating Issues

Provide enough information to identify when focus is not visible or insufficient.

Keyboard focus indicator lost

  • Description: Keyboard focus indicator lost

  • Priority:

    • Focus indicator returns after one additional TAB key press: P3

    • Focus indicator returns after multiple additional TAB key presses: P2

    • Focus indicator fails to return: P1

  • Label or Tag: #a11y247

Keyboard focus indicator insufficient

  • Description: Keyboard focus indicator insufficient

  • Priority:

    • Focus not clearly on one element or another: P2

    • Focus relies on colour alone: P3

    • Focus distorted: P3

  • Label or Tag: #a11y247

About

Author(s): Ian McBurnie & Luis Garcia

Last Updated: 2021 Jan 25th

Focus Moveable
Keyboard Prerequisites