このページの本文へ移動

Keyboard2.1.1 キーボード(レベルA)

コンテンツのすべての機能は、個々のキーストロークに特定のタイミングを要することなく、キーボードインタフェースを通じて操作可能である。

出典:WAIC. “ 達成基準 2.1.1 を理解する新しいウィンドウを開きます ” WCAG 2.0 解説書(参照2024年6月1日)

概要

ウェブコンテンツがどのようにキーボード操作で利用可能であるかを求めています。すべてのユーザーがキーボードだけでナビゲーションや操作を行うことができるようにすることで、特に視覚障害者や運動障害者にとってアクセスしやすいウェブサイトを提供することができます。

このページでは、ウェブサイト制作でよく直面する課題に対して、基本的で取り組みやすい方法を紹介しています。
ただし、他にも対処すべき状況や多くの手段があり、具体的な状況に応じて最適な方法を選ぶことが大切です。

課題に対する実践的な方法

すべての機能にキーボード操作を確保(G202)

すべての機能がキーボードで操作可能であることを保証します。ユーザーがキーボードのみでウェブサイトのすべての機能にアクセスできるようにすることが重要です。

G202:すべての機能に対してキーボード制御を確保する

HTMLフォームコントロールとリンクの使用(H91)

標準のHTMLフォームコントロール(<input><button><select>など)およびリンク(<a>タグ)を使用します。これにより、ブラウザのデフォルトのキーボード操作が自動的にサポートされます。

H91:HTML のフォームコントロール及びリンクを使用する(HTML)

次の達成方法の一つを用いて、G90:キーボードがトリガーとなるイベントハンドラを提供する。

キーボードとデバイス固有機能の併用(SCR20)

キーボードとマウス、タッチスクリーンなどのデバイス固有の機能を両方ともサポートするようにスクリプトを設計します。例えば、クリックイベントとキーイベントの両方をサポートすることで、多様な操作方法に対応します。

onclickイベントの活用(SCR35)

<a>タグや<button>タグに対して、onclickイベントを用いてアクションを定義します。これにより、キーボードユーザーがエンターキーやスペースキーを使用して操作できるようにします。

キーボードとマウスのイベントハンドラの使用(SCR2)

キーボードイベント(例えば、keydown)とマウスイベント(例えば、click)の両方をハンドリングするスクリプトを実装します。これにより、どちらの操作方法にも対応可能となります。

まとめ

達成基準 2.1.1 を満たすためには、すべてのインタラクティブな要素がキーボード操作で利用可能であることが重要です。これにより、視覚障害者や運動障害者を含むすべてのユーザーがウェブサイトを効果的に利用できるようになります。適切なHTML要素の使用やスクリプトの実装を通じて、キーボードアクセスを確保することが求められます。

WCAG 2.0とその翻訳文書の利用について

本ページの内容は、「Web Content Accessibility Guidelines (WCAG) 2.0新しいウィンドウを開きます」、「WCAG 2.0 解説書新しいウィンドウを開きます」および「WCAG 2.0 達成方法集新しいウィンドウを開きます」からの引用を含んでいます。引用された内容は、W3CおよびWAICによって公開されており、以下のクリエイティブ・コモンズライセンスに基づいて使用されています。これらのガイドラインを参考にしつつ、ウェブアクセシビリティの向上に向けた具体的な取り組みを分かりやすく説明しています。

WCAG 2.0

この作品はクリエイティブ・コモンズ 表示 4.0 国際ライセンス新しいウィンドウを開きますの下に提供されています。

WCAG 2.0 解説書及び達成方法集

この作品はWCAG 2.0 解説書及び達成方法集からの引用を含みます。翻訳はWAICによって提供されており、文書のステータスは「勧告」です。なお、この文書の正式版はあくまでW3Cのサイト内にある英語版であることにご注意ください。

Contactお問い合わせ

当社ではウェブアクセシビリティ診断を提供しております。すべてのユーザーにアクセスできるウェブサイトを目指して、一緒に取り組みましょう。診断のご依頼や詳細については、お気軽にご連絡ください。

お問い合わせ