1 of 8

Focus Appearance Midway Brief

May 2024

2 of 8

Initial Set

Short Name

Exploratory Outcome Set

Distinguishable controls

The function of controls can be distinguished visually.

  • Needs additional research

Visually Distinguishable Controls

Controls are visually distinct from non-controls (static content)

Pointer Location

Users are able to determine where the pointer is located.

  • Current platform behavior

Visible keyboard focus indicator

The keyboard focus is visually indicated.

Change focus with pointer device

Selecting an element with a ‘pointer’ sets the focus to that element.

  • Current platform behavior
  • Proposed behavior with viewport needs more research

Keyboard mode

The keyboard input mode is indicated.

  • Current platform behavior

3 of 8

Approach

  • Start with:
    • The focus must be visually indicated
    • The focus indicator is visually discernible
  • Scratchpad
  • Built a set of examples (two below)

4 of 8

Guideline: The point of interaction (including focus and pointer) must be visually indicated

​

Outcome: The keyboard focus must be visually indicated (Draft Decision Tree)

​

Is the default platform keyboard indicator shown for each focusable item?

If Yes:

  • The default indicator is not hidden/disabled/overridden
  • The default indicator is not obscured or partially obscured (more than 50?%)

If No:

  • The focus indicator is persistent while the element has focus.
  • The focus indicator does not persist after the element loses focus.

​

(Continues on next slide)

5 of 8

Guideline: The point of interaction must be visually indicated

​

  • The default indicator is not obscured or partially obscured (more than 50?%)
  • Adjacent operable control elements are not styled the same way as the focus indicator.
  • The area of the focus indicator change is sufficient to be noticeable
  • The contrast change of the pixels that indicate the keyboard focus is sufficient in a) standard mode, b) dark mode, and c) high contrast mode
  • The focus indicator has sufficient contrast with the adjacent colors in a) standard mode, b) dark mode, and c) high contrast mode
      • Note: There is a relationship between the area of the focus indicator and contrast that will need to be clarified
  • The keyboard focus indicator uses a style that is distinct from the style of other controls, so that the item in focus can be distinguished without reference to the non-focused state.
  • The indicator is sufficiently adjacent to the element that has focus that there is no ambiguity which element has focus

6 of 8

Separate methods depending on the type

  • Line: Is the indicator using a line?
    • The line is thick enough to be visible by meeting some minimum, at least 2 pixels.
  • Color: Is the indicator using a change of color within the control?
    • The area of the control that changes is at least 50% of the size of the control.
  • Icon / shape: Is the indicator using an icon or or shape
  • Size change: Is the indicator using a change of size

​

7 of 8

Definitions (DRAFT)

  • Focus indicator: pixels that are changed to visually indicate when a user interface component is in a focused state
  • Platform: Operating system, user agenda, and assistive technology (Items outside the
  • Point of Regard: UAAG definition
  • Point of interaction: Where interactions will occur if the user activates current location

8 of 8

Separate but related outcome

Outcome: When located over an interactive element, the pointer location and interaction type must be visually indicated