ボタンの基本とARIAロール
こんにちは。チャコウェブラジオは、株式会社Cyber Catsが運営するチャコウェブのスタッフが、
ウェブアクセシビリティを実践したい制作者やウェブ担当者に向けて、ゆっくりじっくり解説していくポッドキャストです。
進行を担当するゆみこです。よろしくお願いします。
ミヤです。よろしくお願いします。
本日のテーマは、ウェイアリア解説シリーズパート7。APGに学ぶボタンの実装・後編です。
前回は、APGに沿ってボタンの基礎や種類といった基本事項と、キーボード操作についてやりました。
今回は、実装時のウェイアリアを紹介していきます。
より実践的な内容になってきましたね。
今回もさっそく、よろしくお願いします。
はい。ではまずは、支援技術にこの要素はボタンだと伝える方法です。
これは、今までやってきたロールのお話ですね。
はい、その通りです。ボタン要素を使えば、最初からボタンロールが付いているので、支援技術は自動的にボタンだと認識してくれます。
ところが、実際のウェブサイトでは、DIV要素やSPAN要素などを使ってボタンを作ることがあるんです。
これは、デザインの都合や既存のコードとの兼ね合いなど、いろいろな理由があります。
そこで問題となるのが、こういったボタンがスクリーンリーダーにはボタンとして認識されないということです。
だから、ボタンロールを付けるんですよね。
はい。DIV要素やSPAN要素のロール属性をボタンとすることで、この要素はボタンですと支援技術に伝えることができます。
ボタン要素が使える場合は、最初からそちらにした方が、ロールを付ける手間やJavaScriptを実装する手間が省けるのでいいですね。
そうですね。可能な限りボタン要素を使うのがいいと思います。
アクセシブルネームとARIA属性
次は、支援技術にボタンの名前、つまりアクセシブルネームを伝える方法です。
アクセシブルネームとは何でしょうか?
アクセシブルネームは、ユーザーインターフェースコンポーネントの名前のことです。
その要素の目的や意図を支援技術を通してユーザーに伝えるために必要とされます。
ボタンにおいては、ボタンラベルということでしょうか?
はい、そうなります。
例えば、保存する、印刷するというようにテキストラベルが書いてあるボタンなら、それが自動的に支援技術に読み取られます。
ですが、最近のウェブサイトではアイコンだけのボタンも多いですよね。
ああ、プリンターやゴミ箱アイコンのボタンなどですね。
はい、そうなんです。
そういったボタンは、ビジュアル的に印刷ボタン、削除ボタンと分かるようになってはいますが、スクリーンリーダーにはそれが伝わりません。
確かに、スクリーンリーダーはアイコンを読み取れないですもんね。
そこで使うのが、アリアンスボタンです。
そこで使うのが、アリアラベル属性やアリアラベルドバイ属性です。
例えば、ゴミ箱アイコンのボタン要素にアリアラベル属性を付け、値に削除と指定すれば、スクリーンリーダーにもそれが伝わります。
ちなみに、アリアラベルドバイ属性は、別の場所にあるテキストを参照する場合に使います。
この場合、まずボタン要素にアリアラベルドバイ属性を付けます。
次に、参照したいテキストの要素に設定されているID属性の値を、アリアラベルドバイ属性の値に設定します。
うーん、そうするとボタンとテキストを紐づけることができるんですね。
はい、そうです。
同じ方法でボタンに説明文を紐づけることもできます。
例えば、フロッピーアイコンの保存ボタンがあり、ボタンの下に保存ボタンを押すと現在の設定が保存されます、といった詳しい説明があったとします。
そのような場合、アリアディスクライブドバイ属性を使います。
まず、保存ボタンであるボタン要素に、アリアディスクライブドバイ属性を付けます。
そして、保存ボタンを押すと現在の設定が保存されます、というテキストに設定されているID属性の値を、アリアディスクライブドバイ属性の値に設定します。
こうすると、ボタン選択時に説明文も読み上げてくれるようになります。
なるほど。アリアダベルドバイ属性と同じ要領で、アリアディスクライブドバイ属性を使えば、ボタンと説明文を結びつけられるんですね。
はい、その通りです。
それでは、次はボタンが使えない状態であることを支援技術に伝える方法です。
フォームが未入力の場合などに、押せないように設定されているボタンがありますよね。
フォーカスが当たらないようになっていたり、グレーアウトされているボタンですね。
はい、ボタン要素であれば、ディスエイブルド属性を付けてボタンを非活性にすることができます。
この方法で非活性になったボタンは使えない状態であることが支援技術にも伝わります。
一方、DIV要素などで作ったボタンの場合は、見た目をグレーにしたり、JavaScriptで押せないようにしただけでは、状態が支援技術に伝わりません。
そこで、アリアディスエイブルド属性を使います。
これをトゥルーにすることで、ボタンが使えない状態であることが支援技術にも伝わります。
アリアディスエイブルド属性をトゥルーにすることで、支援技術に使用不可だと伝えるんですね。
ただし、一点注意があります。
アリアディスエイブルド属性は、使用不可であることを伝えるだけで、ボタンを非活性にする機能はありません。
ボタンの動作は、ボタン要素ならディスエイブルド属性をつけたり、DIV要素で作ったボタンなら、JavaScriptで制御する必要があります。
なるほど。アリアディスエイブルド属性は、あくまで状態を伝えるだけなんですね。
はい、その通りです。
次は、前編で少し取り上げたトグルボタンについてです。
音量のミュートボタンや、お気に入り登録ボタンのような、2つの状態が切り替わるものをトグルボタンと言うんでしたよね。
このボタンでは、アリアプレスド属性が使われるというお話だったと思います。
はい、このボタンでは、アリアプレスド属性を使って、今そのボタンが押されているか押されていないかを支援技術に伝えます。
メニューボタンの実装
アリアプレスド属性がトゥルーなら押されている、つまりオンの状態。フォルスなら押されていない、つまりオフの状態という感じでしょうか。
はい、その通りです。
また、ミックスドという値も存在します。
これは、そのボタンが複数項目を制御しているとき、すべての項目が同じ値ではない状態というのを指しています。
うーん、ミックスドというのもあるんですね。
このアリアプレスド属性についても、自動で切り替わるわけではないので、JavaScriptで制御する必要があります。
また、ボタンの名前は変えないということが重要です。
名前は変えないとはどういうことでしょうか。
音量オンという名前のボタンは、ボタンを押して状態が変わっても音量オンのままにします。
そうなんですか。音量がオンに切り替わったなら、ボタンの名前を音量をオフにした方がいいでしょうか。
音量をオフにした方がわかりやすいような気がします。
一見そう見えますが、アリアプレスド属性を使う場合は、ボタンの名前は固定して、状態だけを変更するようにAPGで推奨されています。
ボタンの名前が変わる場合は、アリアプレスド属性をつけないのが望ましいとされているんですね。
それでは最後はメニューボタンです。
こちらも前回少しだけやりましたよね。
メニューを開くためのボタンのことでしたね。
アリアハズポップアップ属性がメニューまたはトゥルーに設定されていると、支援技術にメニューボタンだと伝わるんですよね。
はい、その通りです。
アリアハズポップアップ属性にはいくつかの値が存在しますが、メニューだけでなくトゥルーに設定した場合も、多くの支援技術でメニューボタンだと認識されます。
ですが、明確にメニューボタンであることを示す場合には、メニューにしておく方が無難だと思います。
明確にメニューボタンである場合は、値をメニューに設定するんですね。
今回はすごく実践的な内容でした。ボタン一つとってもたくさんのアリア属性を使用する必要があるんですね。
数が多いように感じるかもしれませんが、すべてを暗記する必要はありません。
一通り使い方を押さえておいて、あとは実装時に調べながらやっていけば良いと思います。
それでは今回のまとめです。
ボタン要素には自動的にボタンロールが付与されますが、DIV要素などを使う場合は、ボタンロールを設定する必要があります。
テキストラベルがあるボタンは、それがアクセシブルネームになります。
アイコンのみのボタンには、ARIAラベル属性やARIAラベルドバイ属性で名前を付ける必要があります。
また、詳細説明が必要な場合は、ARIAディスクライブドバイ属性で別要素のテキストを参照することができます。
ボタン要素を非活性化する場合には、Disabled属性を使用します。
DIV要素などを使用したカスタムボタンの場合、ARIADisabled属性で状態を伝達する必要がありますが、
非活性化はJavaScriptなどを使用します。
トグルボタンは、ARIAPressed属性で状態を表現します。
ボタンの名前は固定し、状態のみ変更するのが推奨される実装方法です。
メニューボタンの場合、ARIAHasPopup属性をMenuまたはTrueに設定します。
本日のテーマは、WayARIA解説シリーズパート7、APGに学ぶボタンの実装、後編でした。
お聞きいただきありがとうございました。感想をいただけるととっても嬉しいです。
ハッシュタグ、ChacoウェブRadioをつけて、ぜひSNS、XQTwitterで投稿してください。
また、概要欄にメールフォームリンクをご用意しています。
ウェブアクセシビリティに対応したい方、Chacoウェブにお仕事を依頼したい方や、ご相談がある方は、お気軽にメッセージをお寄せください。
次回もお楽しみに。
