ボタンの基本と種類
こんにちは。チャコウェブラジオは、株式会社Cyber Catsが運営するチャコウェブのスタッフが、
ウェブアクセシビリティを実践したい制作者やウェブ担当者に向けて、ゆっくりじっくり解説していくポートキャストです。
進行を担当するゆみこです。よろしくお願いします。
ミヤです。よろしくお願いします。
本日のテーマは、ウェイアリア解説シリーズパート6、APGに学ぶボタンの実装全編です。
はい。APGについては、前回で詳しくやりましたが、どんなものだったか覚えていますか?
はい。アリアオーサリングプラクティシーズガイドの略で、ウェイアリアの実践ガイドのようなものでしたよね。
はい。その通りです。
APGは、ウェイアリアを使ってコンポーネントと呼ばれる部品を作るための実践ガイドなんですね。
今回はその中から、ボタンについて詳しくやっていきたいと思います。
この全編では、APGに沿ってボタンの基礎や種類といった基本事項と、キーボード操作について見ていきます。
実装時のウェイアリアについては、後編で紹介したいと思います。
それではさっそく、ボタンの基本事項からお願いします。
はい。まずボタンというのは、ユーザーが処理を実行できるようにするものです。
具体的に言うと、フォームの送信やダイアログの表示、操作のキャンセル、削除の実行などがあります。
ボタンについて、ウェイアリアでは3種類がサポートされています。
1つ目は通常のボタンです。フォーム送信やファイルのダウンロードに使用されるようなもので、押すと処理が実行されるものです。
2つ目はトグルボタンです。これはボタンを押すたびに2つの状態、例えばオンとオフが切り替わるようなボタンです。
例えばオーディオプレイヤーのボタンを押すとミュートしたり、ミュート解除したりできるようなボタンが挙げられますね。
このボタンでは、ARIA PRESSED属性が使われます。
3つ目はメニューボタンです。これはメニューを開くためのボタンです。
下向きの矢印や三角形がついたデザインで、ボタンを押すとメニューが表示されることを示していることが多いです。
ARIA HAS POP UP属性がMENUまたはTRUEに設定されていると、支援技術にこれはメニューボタンですよと伝わります。
この3つがWayARIAでサポートされているボタンです。
通常のボタン、状態が切り替わるトグルボタン、メニューを開くためのメニューボタンがサポートされているんですね。
はい、実際の使い方については後編でやりたいと思いますので、種類の紹介は一旦このあたりにしておきます。
ボタンとリンクの違い
続いて、ボタンとリンクの違いについても整理しておきたいと思います。
この2つは混同されがちですが、実は役割が全然違うんです。
言われてみれば、同じように使われることがありますよね。
ボタンで画面遷移できるようになっていたり、リンクで資料がダウンロードできるようになっていたり、一体どのような違いがあるんでしょうか。
先ほどもお話しした通り、ボタンはユーザーが処理を実行できるようにするものです。
ポイントは、ボタンが押されたら何かしらの処理をその場で実行するという点です。
それに対し、リンクは他の情報やページを参照するためのものです。
このような機能の違いがあるため、コンポーネントの見た目と提供する機能は一致するようにするのが重要だと、APGには書かれています。
なるほど。これはどのように一致させるのがいいのでしょうか。
例えば、送信ボタンやダウンロードボタンはボタン要素を使ってボタンとして実装します。
一方、画面遷移はA要素を使ってリンクとして実装するといった感じです。
なるほど。機能で使い分けるということですね。
はい。とはいえ、デザインの問題なので、見た目はリンクだけど、実際にはボタンのような動きをしているということです。
しかし、デザインと実際の機能を一致させることによって、デザインと実際の機能を利用するといった要素も存在します。
こういったものがA要素で作られている場合には、ボタンロールをつけることで支援技術のユーザーに、これはボタンですよ、と要素の機能を正しく伝えることができます。
一番適切な解決策は、デザインと実際の機能を一致させることです。
つまり、処理を行うものにはボタン要素を使い、他の情報やページを参照する場合にはA要素を使うということですね。
やっぱり、機能で使い分けるのが一番適切な対応なんですね。
はい、そうなんです。
キーボード操作の実践
それでは、続いてキーボード操作について見ていきましょう。
アクセシビリティを高めるには、マウスを使わずにキーボードだけで操作できることが重要ですよね。
はい、そうです。
そのため、APGにはコンポーネントをどのようにキーボードで操作できるようにするといいかが書かれています。
基本的にボタンの場合は、スペースキーとエンターキーで押すという動作ができるようにします。
そして、押した後のフォーカス移動も重要なポイントとなります。
フォーカス移動ですか。
はい、ボタンやコンテンツの状況によって適切なフォーカス移動先が異なるんです。
例えば、ボタンでダイアログを開いた時には、フォーカスがそのままボタンに残るのではなく、ダイアログの中に移動するのが自然な動作です。
一方で、ダイアログを閉じた時には、開くために使用したボタンにフォーカスを戻すのが適切です。
確かに、そのようにするとボタンとダイアログの移動がスムーズですよね。
はい。ただ、このページを削除するというような確認ダイアログの場合、ページ削除後は別のフォーカス先にすることもあります。
そうですね。ダイアログで削除するを選んだら、ダイアログを開く時に使ったボタンもページと一緒に削除されている可能性がありますもんね。
いつも自然と使っていますが、思い返すとさまざまなウェブサイトがそのようになっていると思います。
そうなんですよね。また、ボタンのフォーカスが移動しない方がいいとされている場合もあります。
例えば、ボタンの処理が現在のコンテンツを閉じたりするものではない場合です。
フォーカスがそのボタンに留まり続けるということですね。どういう状況でそのような動きが適切なんでしょうか。
例えば、ブラウザで使える電卓を想像してみてください。
3、3、3と入力したい場合、ボタンを押した後にいちいちフォーカスが別の部分に移動するより、一度押したボタン、ここでは3に留まってくれる方が使いやすいと思いませんか。
ああ、なるほど。確かにそっちの方が連続で押せて使いやすいと思います。
そうですよね。
それでは次に、セットアップウィザードなど、段階を踏むコンポーネントの場合はどうでしょうか。
APGでは、次へといったボタンを押して次のステップに進むものに関しては、次のページの操作開始位置にフォーカスを移すのが適切だと書かれています。
セットアップウィザードって、ソフトウェアをインストールするときなんかによく出てくるステップを一つずつ進めていく画面ですよね。
一つのステップが終わったら、次へボタンを押して次に進んで、また選択や操作が求められる。
そういう流れを考えると、次へを押した後は、その次のステップの操作開始位置にフォーカスがあると、迷わず操作できてスムーズだと思います。
はい、そうですね。それなら無駄なアイドルを減らせるので使いやすいと思います。
最後に、エフェクトアップウィザードについて説明します。
はい、そうですね。それなら無駄なアイドルを減らせるので使いやすいと思います。
最後に、APGで挙げられている例として、ショートカットキーでボタンを押す例があります。
この時は、ボタンを押してもフォーカスは動かさず、元の場所に留まるのがいいとされています。
うーん、ショートカットキーに割り当てられているボタンに移動するのが良い気がするんですが、そうではないんですね。
そうなんですよ。実際に例を挙げて考えてみましょう。
例えば、あるリストコンテンツがあって、その中の項目の順番をボタンで変更できるとします。
リスト内の選択中の項目を上に移動させる上へボタンがあって、その操作にはショートカットキーとしてALTプラスUが割り当てられているとします。
この場合、フォーカスがリスト内の特定の項目にある状態で、ALTプラスUを押すと項目は上に移動しますが、
フォーカス自体はそのままその項目に残っていた方が連続操作がしやすくて便利だと思いませんか?
なるほど、確かに。毎回フォーカスがリストの外に移動してしまうと、操作が中断される感じがして面倒ですね。
項目の順番を変えるときには、同じ項目にフォーカスが留まっていてくれた方が連続で操作しやすくて便利だと思います。
ここまでいろいろな例を見てきましたが、どこにフォーカスを当てるべきかというのは、状況ごとにかなり異なるんですね。
はい、そうなんです。フォーカスがどのような挙動をするかにより、使い勝手が大きく変わってきます。
ですから、キーボード操作と一言で言っても、フォーカスの移動先にまで注意する必要があるんですね。
さて、前編はここまでとし、ボタンに必要なウェイアリアの実装については、次回の後編で具体的に見ていきたいと思います。
それでは、今回のまとめです。今回は、ウェイアリアの実践ガイド、APGをもとに、ボタンの基礎や種類といった基本事項と、キーボード操作について解説しました。
ウェイアリアがサポートしているボタンには、通常のボタン、トグルボタン、メニューボタンの3種類があります。
また、ボタンはその場で処理を実行するための要素であり、他のページや情報を参照するリンクとは明確に役割が異なります。
見た目と機能が一致するように、処理にはボタン要素、ページ遷移にはA要素を使うことが推奨されます。
キーボード操作では、スペースキーやエンターキーでボタンが押せるようにし、処理後のフォーカス移動先にも注意が必要です。
例えば、ダイアログを開いた場合は、その中に、閉じた場合は、元のボタンや適切な位置にフォーカスを戻すといった配慮が使いやすさにつながるとのことでした。
本日のテーマは、ウェイアリア解説シリーズパート6、APGに学ぶボタンの実装・前編でした。
お聞きいただきありがとうございました。
感想をいただけるととっても嬉しいです。
ハッシュタグ、ChacoウェブRadioをつけて、ぜひSNS、XQ Twitterで投稿してください。
また、概要欄にメールフォームリンクをご用意しています。
ウェブアクセシビリティに対応したい方、Chacoウェブにお仕事を依頼したい方や、ご相談がある方は、お気軽にメッセージをお寄せください。
次回もお楽しみに。
