※サポートされているブラウザは現在調査中です。
nav-indexプロパティは、タブキーによるフォーカス移動の順序を指定する際に使用します。
フォーカス移動の順序は番号（0でない正の数、1が最初）で指定します。
異なる要素に同じ番号を指定した場合には、文書内の記述順となります。
※メモ：nav-indexプロパティについては、動作を確認中です。
上記の説明は大体合っていると思いますが、以下のサンプルはイマイチ自信がありません。
■値
- auto
- 要素のナビゲーション順序は、ユーザーエージェントによって自動的に割り当てられる（初期値）
- 番号
- 番号（0でない正の数）で要素のナビゲーション順序を指定する
- inherit
- 親要素の値を継承する
■初期値・適用対象・値の継承
- 初期値
- auto
- 適用対象
- すべての適用可能な要素
- 値の継承
- しない
■使用例
CSSソースは外部ファイル（sample.css）に記述
input.sample1 {nav-index:1;}
input.sample2 {nav-index:2;}
input.sample3 {nav-index:3;}
input.sample4 {nav-index:4;}
input.sample5 {nav-index:5;}
input.sample6 {nav-index:6;}
input.sample7 {nav-index:7;}
input.sample8 {nav-index:8;}
input.sample9 {nav-index:9;}
input.sample0 {nav-index:10;}
HTMLソース
<html>
<head>
<link rel=”stylesheet” href=”sample.css”
type=”text/css”>
</head>
<body>
<form action=”xxx.php” method=”post”>
<input class=”sample7″ type=”button” value=”7″>
<input class=”sample8″ type=”button” value=”8″>
<input class=”sample9″ type=”button” value=”9″><br>
<input class=”sample4″ type=”button” value=”4″>
<input class=”sample5″ type=”button” value=”5″>
<input class=”sample6″ type=”button” value=”6″><br>
<input class=”sample1″ type=”button” value=”1″>
<input class=”sample2″ type=”button” value=”2″>
<input class=”sample3″ type=”button” value=”3″><br>
<input class=”sample0″ type=”button” value=”0″>
</form>
</body>
</html>
ブラウザ上の表示