00:05
こんにちは。チャコウェブラジオは、株式会社Cyber Catsが運営するチャコウェブのスタッフが、
ウェブアクセシビリティを実践したい制作者やウェブ担当者に向けて、ゆっくりじっくり解説していくポッドキャストです。
進行を担当するゆみこです。よろしくお願いします。
ビアです。よろしくお願いします。
チェックボックスの種類と特徴
本日のテーマは、WayArea解説シリーズパート8。APGに学ぶチェックボックスの実装です。
前回、前々回は、APGに沿ってボタンの実装について学びました。
今回は、WayAreaでサポートされている2種類のチェックボックスについて紹介していきます。
WayAreaでサポートされているチェックボックスには、どんな種類があるのでしょうか?
1つ目は、選択・未選択の2つの状態を持つ一般的なチェックボックスです。
2つ目は、3つの状態を持つチェックボックスです。
選択・未選択に加えて、一部選択が存在します。
3つの状態を持つチェックボックスって初めて聞きました。どんな場面で使われるのでしょうか?
3つの状態を持つチェックボックスは、親として使われ、複数の一般的なチェックボックスをまとめたグループを管理する役割を持ちます。
うーん、ちょっと想像しづらいですね。具体例はありますか?
それでは、モバイルオーダーでコーヒーのトッピングを選ぶ画面を例に考えてみましょう。
ミルク・砂糖・クリームの3つのチェックボックスがあり、その上に全てというチェックボックスが1つ置かれています。
この全てが3つの状態を持つ親のチェックボックスです。ミルク・砂糖・クリームのチェックボックスがこのチェックボックスですね。
このチェックボックスが1つも選ばれていないとき、全てという親のチェックボックスも未選択となります。
反対に、このチェックボックスが全部選択されているときは、全ても選択されます。
そして、ミルクだけ、あるいはミルクと砂糖だけといった具合に、選択・未選択が混在しているとき、親のチェックボックスは塗りつぶしや横線入りのアイコンで表示されます。
これが一部だけ選択されていることを示す一部選択の状態です。
なるほど。親のチェックボックスがこの選択状態を反映しているんですね。
親だけ見れば、このチェックボックスが全て選択されているのか、1つも選択されていないのか、もしくは一部だけ選択されているのかがすぐに把握できますね。
はい、そうなんです。そして、この親のチェックボックスを使って、このチェックボックスを一括で変更することもできます。
例えば、親である全てを選択すると、ミルク、砂糖、クリームの3つが選択されます。逆に、全てのチェックを外すと、ミルク、砂糖、クリームの3つもチェックが外れます。
なるほど。ユーザーが一括操作できるので便利ですね。
言葉で説明するとちょっと難しいのですが、こういったチェックボックスは設定画面や申込フォームなど、探してみると意外と身近にあると思います。
さらに、実装によっては、前回一部選択だったときの状態を記憶しておき、親のチェックボックスを選択や未選択に切り替えた後で、再び一部選択に戻した際に、以前の選択状態を復元することもできます。
APGには3つの状態を持っていて、前回一部選択にしたときの状態を記憶するチェックボックスのサンプルが用意されています。
音声だとややこしいので、実際にサンプルを触ってみるのがおすすめです。
APGのチェックボックスページにはサンプルが2つありますね。
1つ目が一般的なチェックボックス、2つ目が3つの状態を持つチェックボックスのサンプルなんですね。
実際に触って確認できるのは、理解が深まっていいですね。
はい、しかもコードも掲載されているので、とても勉強になると思います。
チェックボックスのキーボード操作と実装
それでは次に、チェックボックスのキーボード操作についてです。
これはボタンに比べると非常に単純です。
チェックボックスにフォーカスがあるとき、スペースを押すと選択状態が切り替わるようにします。
スペースを押したらチェックされ、もう一度押したらチェックが外れるといった感じですね。
確かにボタンに比べると、チェックボックスのキーボード操作はシンプルでわかりやすいですね。
はい、そうなんです。
それではここからはWearlierの具体的な実装についてです。
まずチェックボックスのロール属性はチェックボックスです。
インプット要素のチェックボックスを使用する場合はそのままで良いですが、
Lib要素などでカスタマイズしたチェックボックスを使用する際は、このロールの付与が必要です。
なるほど。できればインプット要素のチェックボックスを使用するのが望ましいですよね。
はい。インプット要素のチェックボックスが使える場面では、そちらを使用した方が良いと思います。
次にアクセシブルラベルの提供方法ですが、次の3つのうちいずれかの方法で提供します。
1つ目、チェックボックスロールを持つ要素内に表示テキストとして含める。
2つ目、ARIAラベルドバイ属性でラベルとなる他の要素を参照する。
3つ目、ARIAラベル属性でチェックボックスに直接ラベルを指定する。
ARIAラベル属性やARIAラベルドバイ属性など、基本的にはボタンの時と同じ属性を使うんですね。
そうなんです。この属性は他にも画像にアクセシブルラベルを付ける時に使用したりするので、しっかり使い方を抑えておきたいですね。
次にチェックボックスの状態を支援技術に伝える方法です。
これは、ARIAチェックド属性を使います。
選択されている場合は、ARIAチェックド属性をTrueとします。
未選択の場合はFalse、そして一部選択の場合はMixedとなります。
3つの状態を持つチェックボックスには、True、FalseだけでなくMixedという値があるんですね。
はい。Mixedは3つの状態を持つチェックボックス特有の値ですね。
また、質問の下に複数のチェックボックスが並んでいるようなものでは、質問やチェックボックスをグループとして扱う必要があります。
具体例としては、健康に関するアンケートで、次のうち当てはまるものをすべて選んでくださいという質問に対し、
毎日運動している、野菜をよく食べる、7時間以上寝ているといった選択肢がいくつも並んでいるようなものが挙げられます。
こういった1つの質問に複数のチェックボックスが用意されているものは、アンケートなどでよく目にしますね。
質問やチェックボックスを1つのグループとして扱う必要があるとのことですが、どうしたらいいんでしょうか?
質問やチェックボックスを囲む要素にグループロールをつけるようにします。
また、グループのラベルとなるものには、アリアラベルド倍属性を使ってひも付けを行います。
ここでは、次のうち当てはまるものをすべて選んでくださいというテキストがグループのラベルになりますね。
グループロールでグループ化し、アリアラベルド倍属性で質問をひも付けるのですね。
はい、その通りです。最後に、チェックボックスやそのグループに補足的な説明テキストがある場合の対応です。
こういった場合は、アリア・ディスクライブド倍属性を使って、説明を含む要素のIDを指定します。
このあたりも前回のボタンと同じです。
先ほどの例で言うと、次のうち当てはまるものをすべて選んでくださいという説明の下に、複数選択かといった補足説明がある場合は、これをアリア・ディスクライブド倍属性を使ってひも付けるのですね。
はい、その通りです。
チェックボックスのグループ化とまとめ
はい、その対応で問題ないと思います。今回は、WayAreaに焦点を当ててチェックボックスを取り上げたので、JavaScriptなどの挙動は一部省略しています。
実際に実装する際は、そのあたりに注意しつつ、APGを参考にしてください。
それでは、今回のまとめです。
WayAreaでは、2種類のチェックボックスをサポートしています。
1つ目は、選択・未選択という2つの状態を持つチェックボックスです。
2つ目は、選択・未選択のほかに、一部選択という状態を持つチェックボックスです。
また、チェックボックスはスペースキーを使って選択状態を切り替えていきます。
選択のほかに 一部選択という状態 を持つチェックボックスです また
チェックボックスは スペースキー を使って選択状態を切り替えられる
ように キーボード操作をサポート する必要があります
WayAreaについては 次の五つを紹介 しました 一つ目 チェックボックス
はチェックボックスロールを持ち ます リブ要素を使ったチェックボックス
の場合はロール付与を忘れない ようにしましょう 二つ目 アクセシブル
ネームの指定には主に三つの方法 があります チェックボックスロール
を持つ要素内に表示テキストとして 含める方法 あるいはラベルドバイ
属性でラベルとなる他の要素を 参照する方法 あるいはラベル属性
でチェックボックスに直接ラベル を指定する方法です 三つ目 支援
技術にチェックボックスの状態 を伝えるときは あるいはチェック
ド属性を使用します 選択はトゥルー 未選択はフォルス 一部選択はミックス
ドを属性の値に設定します 四つ目 チェックボックスをグループ化
する場合は そのグループを囲む 要素にグループロールを付与します
そしてグループのラベルとなる ものは あるいはラベルドバイ属性
を使って紐づけましょう 五つ目 チェックボックスやグループ
に補足説明があるときは あるいは ディスクライブドバイ属性でその
説明を関連づけることが必要です 本日のテーマは ウェイアリア
解説シリーズパート8 APGに学ぶ チェックボックスの実装でした
お聞きいただきありがとうございました 感想をいただけるととっても
嬉しいです ハッシュタグチャコ ウェブラジオをつけて ぜひSNS X
Q Twitterで投稿してください また 概要欄にメールフォームリンク
をご用意しています ウェブアクセシビリティ に対応したい方 シャコウェブに
お仕事を依頼したい方や ご相談 がある方は お気軽にメッセージ
をお寄せください 次回もお楽しみに
