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