正しいセマンティック HTML 要素を使用することで、キーボード アクセスに関するほとんどのニーズを満たすことができます。その結果、tabindex を操作する時間が減り、ユーザーの満足度が高まります。
キーボードのサポートが無料（モバイル エクスペリエンスの向上）
適切なセマンティクスとキーボードをサポートする組み込みのインタラクティブ要素が多数あります。デベロッパーの多くが使用しているライブラリは次のとおりです。
また、自由形式のテキスト入力には、contenteditable 属性を持つ要素が使用されることもあります。
これらの要素が提供する組み込みキーボードのサポートは、見落としやすいものです。要素の例を以下に示します。マウスの代わりにキーボードを使用して操作してみてください。TAB（または SHIFT +
TAB）を使用してコントロール間を移動し、矢印キーと、ENTER や SPACE などのキーを使用してそれらの値を操作できます。
スマートフォンが手元にあると、モバイルでは、こうした組み込み要素に独自のインタラクションが生じる場合が多いことがわかります。このようなモバイル操作を自分で再現しようとするのは大変な作業です。これは、可能な限り組み込み要素を使用する理由の一つです。
div ではなく button を使用する
一般的なユーザー補助アンチパターンは、div や span などのインタラクティブでない要素にクリック ハンドラを追加して、ボタンとして扱うことです。
ただし、ボタンがユーザー補助に対応していると見なされるには、次の条件を満たしている必要があります。
- キーボードでフォーカスできるようにする
- サポートを無効にしています
ENTERキーまたはSPACEキーによるアクションの実行をサポートする- スクリーン リーダーで正しく読み上げられる
div ボタンにはこれらの要素は一切ありません。つまり、button 要素が無料で提供するものを再現するために、追加のコードを書く必要があります。
たとえば、button 要素には、*合成クリックの有効化*という便利なトリックがあります。button に「クリック」ハンドラを追加すると、ユーザーが ENTER または SPACE を押すと実行されます。div ボタンにはこの機能がないため、keydown イベントをリッスンし、キーコードが ENTER または SPACE であることを確認してからクリック ハンドラを実行する追加のコードを記述する必要があります。痛い！かなりの作業量ですね。
この例の違いを比較してみましょう。TAB を使用して制御し、ENTER と SPACE を使用してクリックを試みます。
既存のサイトまたはアプリに div ボタンがある場合は、button 要素に置き換えることを検討してください。button はスタイル設定が簡単で、ユーザー補助に優れています。
リンクとボタンの違い
別の一般的なアンチパターンは、JavaScript の動作をリンクに適用して、リンクをボタンとして扱うことです。
<a href="#" onclick="// perform some action">
ボタンとリンクの両方が、なんらかの形の合成クリックによるアクティベーションをサポートしています。では、どちらを選ぶべきでしょうか。
- 要素をクリックするとページ上でアクションが実行される場合は、
<button>を使用します。 - 要素をクリックするとユーザーが新しいページに移動する場合は、
<a>を使用します。これには、新しいコンテンツを読み込み、History API を使用して URL を更新するシングルページ ウェブアプリが含まれます。
これは、スクリーン リーダーによってボタンとリンクが異なる方法で読み上げられるためです。適切な要素を使用すると、スクリーン リーダーを使用するユーザーは、どのような結果が得られるかを知ることができます。
TODO: DevSite - 考えると確認する評価
スタイル設定
一部の組み込み要素（特に <input>）は、スタイル設定が難しい場合があります。巧妙な CSS を使用することで、これらの制限の一部を回避できる場合があります。（面白い名前の）WTFForms プロジェクトには、難解な組み込み要素のスタイル設定に使用できるさまざまな手法を紹介するサンプル スタイルシートが含まれています。
次のステップ
組み込みの HTML 要素を使用すると、サイトのユーザー補助性が大幅に向上し、ワークロードが大幅に削減されます。サイトをタブ移動して、キーボードがサポートされていないコントロールがないか確認します。可能であれば、標準化された HTML に置き換えてください。
HTML に同等の要素がない要素が見つかることがあります。この場合、以降では、tabindex を使用してカスタム インタラクティブ コントロールにキーボード サポートを追加する方法について説明します。