When developing TV Web application, we found that the interaction mode is very different from traditional Web development. Unlike pages on a PC that interact with a mouse, A TV that interacts with buttons on a remote control has operations like click, move (up, down, left, right), return, and home. The essence of movement is shifting focus, so we need to understand what focus.

Focusable elements: elements that can be focused, such as button and input

Next we need to take a look at the TabIndex property, which is important because focus management is impossible without it.

Tab Index

According to the HTML5 specification, the attribute TabIndex defines whether an element can be focused or not. That is, if an element declares tabIndex =”0″, then the element is allowed to focus.

<div tabindex="0"></div>
Copy the code

There are some rules for tabIndex values, which we’ll look at next. Its value must be an Integer (Integer), including positive Integer, negative Integer, 0.

Negative integer

If the attribute value is a negative integer, the browser must allow the element to be focused, but not to allow it to be touched by continuous focused navigation.

Continuous focus navigation: Continuous navigation through the keyboard, such as the TAB key

For example, in Chrome, set tabIndex =”-1″ to a div.

<div id="test" tabindex="1" ></div>
Copy the code

If you use the TAB key to switch focus, this div is not selected, but if you use the focus event, it can be selected.

document.getElementById("test").focus()
Copy the code

0

If the attribute value is 0, the browser must allow the element to be focusable, allow the element to be reachable by continuous focused navigation, and follow platform conventions to determine the relative order of the elements.

This means that elements can be selected either by the keyboard (TAB) or by the focus event.

Positive integer

If the value of this attribute is a positive integer, the browser must allow the element to be focusable, allow the element to be reachable by continuous focus navigation, and arrange the order of the elements in the continuous focus navigation

The idea of a navigational order appears in 0 and positive integers, so what is this?

Navigation order

Navigation order, use the TAB key to switch focus order. According to the HTML5 documentation, if there is an element with tabIndex set and the attribute value is a positive integer, there are several rules for sorting elements:

  • Before any tabIndex attributes are ignored or their value is parsed and an incorrect focusable element is returned
  • Before any focusable element whose tabIndex attribute value is less than or equal to zero
  • After any element whose tabIndex value is greater than zero and less than the tabIndex value of that element,
  • After any element whose tabIndex attribute value is equal to that element’s TABIndex value and is higher than that element in the #tree order of the document,
  • Before any element whose tabIndex attribute value is equal to that element’s TABIndex value and is lower than that element in the #tree order of the document,
  • Before any element whose tabIndex property value is greater than the tabIndex value of that element.

I tested it in Chrome according to the spec, and the order in Chrome is simply:

  • The navigation order is in ascending order, positive order,0Special, always at the back. (um participant.[1, 2, 3, 4, 5, 6... 0] ）
  • Negative integers are not in the navigation order
  • If the values of the attributes are the same, they are sorted according to the order in the document flow (0 and positive integers apply)

The default focus element

HTML5 states that some elements are focus elements by default

  • The a element with the href attribute
  • Link element with href attribute
  • No button element is disabled (#disabled)
  • An input element whose type attribute is not in the #Hidden state and is not disabled
  • There are no disabled SELECT elements
  • There are no disabled Textarea elements
  • A command element with no disabled attribute
  • Element with a draggable attribute, if possible user Agent that allows the user to use a non-pointer device for drag operations
  • #Editing Host
  • Browsing Context Containers

In addition, every shape generated by the area element should be a focusable element. Unless the platform convention describes it differently.

I tested a few elements in Chrome and found some discrepancies between the implementation and specification. For example, link elements with href attributes cannot be focused.

Focus usage scenario

  • TV, remote control operation
  • Web accessibility
  • The form input box switches automatically
  • …

other

  • For style control of focus elements, use:focusSelector.
  • In the Chrome console, usefocusEvents are invalid because they are not real actions of the user and will be intercepted by the browser

By using the default focus elements and tabIndex properly, you can control the focus of a Web page.

The resources