適切なセマンティック 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 を使用してカスタム インタラクティブ コントロールにキーボード サポートを追加する方法について説明します。