From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../web/html/global_attributes/tabindex/index.html | 94 ++++++++++++++++++++++ 1 file changed, 94 insertions(+) create mode 100644 files/ja/web/html/global_attributes/tabindex/index.html (limited to 'files/ja/web/html/global_attributes/tabindex') diff --git a/files/ja/web/html/global_attributes/tabindex/index.html b/files/ja/web/html/global_attributes/tabindex/index.html new file mode 100644 index 0000000000..9794aaf13b --- /dev/null +++ b/files/ja/web/html/global_attributes/tabindex/index.html @@ -0,0 +1,94 @@ +--- +title: tabindex +slug: Web/HTML/Global_attributes/tabindex +tags: + - HTML + - Reference + - グローバル属性 + - リファレンス +translation_of: Web/HTML/Global_attributes/tabindex +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

tabindex グローバル属性は、要素が入力フォーカスを持てることと、キーボードの順次ナビゲーション (ふつうは名前の由来である Tab キーによる) に加わるかどうか、どの位置に加わるかを示します。

+ +
{{EmbedInteractiveExample("pages/tabbed/attribute-tabindex.html","tabbed-standard")}}
+ + + +

値としては整数値を受け付け、値によって次のような様々な結果になります。

+ + + +

tabindex 属性を{{htmlelement("div")}} に設定する場合は、子のコンテンツにも tabindex を設定しなければ、矢印キーを使用して子のコンテンツをスクロールできなくなります。 tabindex のスクロール効果を理解するには、こちらの fiddle を確認してください。

+ +

アクセシビリティの考慮事項

+ +

キーボード入力で対話的にフォーカスを設定できるようにするために、 対話型コンテンツではないものに tabindex 属性を組み合わせて使用することは避けてください。例えば、 {{HTMLElement("button")}} 要素を使用する代わりに {{HTMLElement("div")}} 要素を使用してボタンを記述する場合などです。

+ +

対話的要素でないものを使用して対話的コンポーネントを記述すると、アクセシビリティツリーに掲載されません。これは、支援技術によって移動や操作を行うことを阻害します。このようなコンテンツは、代わりに ({{HTMLElement("a")}}, {{HTMLElement("button")}}, {{HTMLElement("details")}}, {{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}, などの) 対話型要素を使用して意味的に記述するべきです。これらの要素には、 ARIA によって管理しなければならないアクセシビリティにステータスを伝える、組み込みのロールと状態があります。

+ + + +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', "interaction.html#attr-tabindex", "tabindex")}}{{Spec2('HTML WHATWG')}}最新のスナップショットである {{SpecName('HTML5.1')}} から変更なし。
{{SpecName('HTML5.1', "editing.html#attr-tabindex", "tabindex")}}{{Spec2('HTML5.1')}}{{SpecName('HTML WHATWG')}} のスナップショットであり、 {{SpecName('HTML5 W3C')}} から変更なし。
{{SpecName('HTML5 W3C', "editing.html#attr-tabindex", "tabindex")}}{{Spec2('HTML5 W3C')}}{{SpecName('HTML WHATWG')}} のスナップショット。 {{SpecName("HTML4.01")}} との違いは、すべての要素でこの属性に対応したこと (グローバル属性化)。
{{SpecName('HTML4.01', 'interact/forms.html#adef-tabindex', 'tabindex')}}{{Spec2('HTML4.01')}}{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}} 要素でのみ対応。
+ +

ブラウザーの互換性

+ + + +

{{Compat("html.global_attributes.tabindex")}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf