Update 2017
It has come to light, as pointed out by @Wallop in the comments, that the nav-index
property was removed from the specification in 2015 due to a "lack of implementation interest."
Explore the introduction of the nav-index
property by W3C in the CSS3-UI documentation.
This property functions similarly to a tabindex
and can be applied to any element.
The ‘nav-index’ property serves as an input-method-neutral way of defining the sequential navigation order, commonly known as the "tabbing order."
This property is meant to replace the HTML4/XHTML1 attribute ‘tabindex’.
Considered as one of the most standards-compliant solutions for this particular use case, nav-index
is currently only supported by Opera (as of June 2012) and has been tagged as "Feature at risk" by W3C, suggesting it may be removed at any time.
Other cross-browser alternatives include:
Non-standards-compliant approach: apply the tabindex
attribute to a DIV
. This method will function across all major browsers.
Standards-compliant method: substitute the DIV
with an anchor element (A
) lacking a href
attribute, format it using display: block
, and incorporate the tabindex
attribute.
In agreement with BoltClock´s observation, the tabbing order does indeed follow a logical pattern (both text selection order and tabbing order align closely with the document's element arrangement sequence). However, CSS now encompasses a broader spectrum of capabilities. It not only controls the document content through properties like content
, but also influences event firing behavior, such as utilizing pointer-events
, display
, or z-index
to alter the pointer event order. Given that these are fundamental CSS attributes, why should one not have the ability to impact KeyBoardEvents as well?