チェックボックスベースのナビゲーションのアクセシビリティの懸念は何ですか？
これ は、css-tricksの古い記事で、チェックボックスを使用してJavaScriptなしで実行できる優れた機能のいくつかを示しています。このパターンの更新バージョンを自分のサイトで使用したいのですが、アクセシビリティの懸念が心配です。
チェックボックスがキーボードで制御可能であること、またはスクリーンリーダーにアクセスできることを確認するために追加する必要があるものはありますか？
アクセス可能なチェックボックスを制御するには、通常2つの操作が必要です。最初にユーザーはチェックボックスを「フォーカス」する必要があり（通常は「タブ」キーを使用して、適切なコントロールに到達するまでインターフェイスを移動します）、次にユーザーは状態を変更する必要があります。チェックボックス（通常は「スペース」キーを使用）。視力のあるユーザーは、見出しや画像などの視覚的な手がかりを使用してページをスキップしますが、視覚に障害のあるユーザーは、テキストを読まずに、リンクからリンクまたはコントロールからコントロールに移動します。 。
それが最初のハードルです。ユーザーは、コントロールが何であるか、または何をするかをどのようにして知るのですか？ -周囲のテキスト、アイコン、画像に依存することなく、ユーザーがコントロールが何をするかをユーザーが正確に理解できるように、コントロールには適切なラベルを付ける必要があります。また、「ARIAロール」を調べて、インタラクティブな要素をよりアクセスしやすい方法でマークできるようにすることもできます。
使用を提案しているコードを見ると、別の問題も確認できます。ユーザーがコントロールを操作した後で、変更が行われたことをユーザーはどのようにして知るのでしょうか。リンクしたコードで、視覚的でない唯一の変更は、チェックボックスがアクティブ化されたときに「チェック済み」として報告されることです。コントロールの目的とステータスの全範囲を示すのに、それだけでは十分だとは思いません。
他のテクノロジーの使用を回避するためにこのテクニックの使用を提案していると思いますが、他のテクノロジーを使用せずにこれをアクセシブルなソリューションにすることはできないと思います。私はこれを放棄し、JavaScriptを使用してアクセス可能なソリューションを探します。