正しいセマンティック 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 を使用したコントロール。