正しいセマンティック 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 はスタイル設定が簡単で、ユーザー補助に優れています。
リンクとボタン
もう 1 つの一般的なアンチパターンは、JavaScript 動作をアタッチしてリンクをボタンとして扱うことです。
<a href="#" onclick="// perform some action">
ボタンとリンクはどちらも、なんらかの形の合成クリックの有効化をサポートしています。どちらを選択すればよいでしょうか。
- 要素をクリックするとページ上でアクションが実行される場合は、
<button>を使用します。 - 要素をクリックするとユーザーが新しいページに移動する場合は、
<a>を使用します。これには、新しいコンテンツを読み込み、History API を使用して URL を更新するシングルページ ウェブアプリが含まれます。
これは、スクリーン リーダーではボタンやリンクの読み上げが異なるためです。正しい要素を使用すると、スクリーン リーダーのユーザーが結果を把握しやすくなります。
TODO: DevSite - 思考とチェックの評価
スタイル
一部の組み込み要素、特に <input> は、スタイル設定が難しい場合があります。巧妙な CSS を使用することで、こうした制限の一部を回避できる場合があります。（面白い名前の）WTFForms プロジェクトには、より高度な組み込み要素をスタイル設定するためのさまざまな手法を示すサンプル スタイルシートが含まれています。
次のステップ
組み込みの HTML 要素を使用すると、サイトのアクセシビリティが大幅に向上し、作業負荷を大幅に削減できます。サイトをタブで移動して、キーボードに対応していないコントロールを探します。可能であれば、標準化された代替 HTML に切り替えます。
HTML には、対応する要素がない要素もあります。
この場合、ここでは、tabindex を使用してカスタム インタラクティブ コントロールにキーボード サポートを追加する方法について説明します。