Focus order

  • When the screen reader is on or an accessibility device is connected, a focus mark should be shown to make it clear what element is selected.
  • Make sure that the focus flows logically from one element to the next.

①If there is no item on the right, the focus is moved to the first item in next line.

②If there is no item on the left, the focus is moved to the last item in previous line.

③Looping is not supported. No actions by the left key on the leftmost side and by the right key on the rightmost side.

  • There's no need to focus on decorative elements, auxiliary images, or empty spaces.
  • Related elements can be grouped as a single focused element.
Do

Naturally grouping nearby UI Elements for better readability.

Don't

Every individual item within the same group is separated.

  • The focus should be on the location where the action can be done. If an action can be continuously done in that location, keep the focus there.
  • Screen reader
  • Color and contrast