CSS3：nav-up、nav-right、nav-down、nav-leftプロパティ

【方向的ナビ（directional navigation）：フォーカスを、利用者から指図された方向にある標的へナビゲートする。】

ユーザーエージェントは、方向的ナビキーを備える装置に対しては、対応する 4 つの nav-＊方向的ナビプロパティ（nav-up、nav-right、nav-down、nav-left）に則って、フォーカスをナビゲートするように応答する。この仕様は、装置のどのキーが方向的ナビキーになるかは、定義しない。

注記：代表的なパソコンのキーボードは、4 種の矢印キーを備える。それらのキーを方向的ナビに利用するものが、可能な実装の一つとして挙げられる。アクセス能、および利用者の便利用に、ユーザーエージェントは、キーボード上のどのキーを方向的ナビに利用するか、環境設定できるようにするべきである。

名前	`nav-up、 nav-right、 nav-down、 nav-left`
値	auto \| <id> [current \| root \| <target-name>]?
初期値	auto
適用対象	すべての enabled 要素【フォーカスが可能化された（または :enabled ？）要素】
継承	されない
百分率	受容しない
算出値	指定値
正準的順序	文法に従う
アニメーション型	離散的

有位置なボタンの例： position プロパティに対する absolute により位置され、上・右・下・左に置かれた button に対し、利用者がフォーカスを方向的にナビゲートするとき、各 button を時計回りに（または反時計回りに）ナビゲートするように設定する例：

button { position:absolute }

button#b1 {
  top:0; left:50%;
  nav-right:#b2; nav-left:#b4;
  nav-down:#b2; nav-up:#b4;
}

button#b2 {
  top:50%; left:100%;
  nav-right:#b3; nav-left:#b1;
  nav-down:#b3; nav-up:#b1;
}

button#b3 {
  top:100%; left:50%;
  nav-right:#b4; nav-left:#b2;
  nav-down:#b4; nav-up:#b2;
}

button#b4 {
  top:50%; left:0;
  nav-right:#b1; nav-left:#b3;
  nav-down:#b1; nav-up:#b3;
}

button の具体的なマークアップは、この例には指定されない。マークアップは、有位置な要素のレイアウトには関連しない ― 重要なのは、フォーカスナビのふるまいを指定されたレイアウトに適度に関係させることなので。

特定のフレーム内の要素にフォーカスを移動させる例。そのためには、要素 id とフレーム名を要する。

［id="foo" を有する button］から左へナビゲートされるとき、フォーカスを name="sidebar" を有するフレームの中にある［id="bar" の要素］へ移動させるようにする例：

button#foo { nav-left: #bar "sidebar"; }

スクリプト：

スクリプト：

CSS3

プロパティ

nav-up、nav-right、nav-down、nav-left

テスト