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