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