aria-labelは文字のないbuttonへ操作の名前を付け見た目の文言と分けて使う

虫眼鏡、三本線、矢印だけで作ったbuttonは、見た目から操作を推測できる場合があります。しかし、画像が読み込まれない場合や、画面を音声で読む場合には、何をするbuttonかを文字で伝える必要があります。aria-labelは、要素に表示されていない名前を与える属性です。文字のない検索button、menuを開くbutton、閉じるbuttonなどへ、操作の目的を付けるために使います。

WAI-ARIA 1.1では、aria-labelは現在の要素を示す文字列を定義する属性です。ただし、全ての要素へ機械的に入れる属性ではありません。画面に「問い合わせる」と書かれたbuttonがあるなら、その文字自体が名前になります。表示文字と異なるaria-labelを付けると、画面で読む文言と操作名が食い違うことがあります。

iconだけのbuttonには何をするかを書く

aria-labelには、buttonの形ではなく操作を書きます。「虫眼鏡button」ではなく「サイト内を検索する」、「三本線」ではなく「menuを開く」と書きます。利用者が知りたいのは、画像の名前ではなく、押すと何が起きるかです。

<button type="button" aria-label="menuを開く">
  <span class="menu-icon"></span>
</button>

このbuttonがmenuを開いたあと、同じbuttonで閉じるなら、状態に合わせて操作名も見直します。開いているのに「menuを開く」と伝え続けると、次の操作が分かりません。開閉の状態はaria-expandedで別に伝えられます。aria-labelは名前、aria-expandedは開いているかどうかを表すため、二つを同じ意味にしません。

表示文字があるbuttonへ別の名前を重ねない

「資料を請求する」と表示されているbuttonへaria-label="お問い合わせ"を付けると、画面上の文言とHTMLの名前が違います。資料請求なのか問い合わせなのか、どちらの操作なのかが曖昧になります。表示文字で意味が伝わるbuttonは、まずその文字を分かりやすく直します。aria-labelで別の説明を足して取り繕うのではありません。

説明用の仮例として、headerに文字のない検索icon、本文に「料金表を見る」button、formに「送信する」buttonがあるpageを考えます。検索iconだけにはaria-labelが必要です。料金表を見るbuttonと送信buttonは、表示された文字が操作名になります。formの送信buttonを「確認」と書き換えたい場合は、送信前に確認画面へ進むのか、送信まで行うのかを表示文字から分かるようにします。

WordPress themeでは操作ごとに確認する

WordPress themeでは、header、slider、gallery、mobile menu、form pluginなど、icon buttonを出す場所が分かれます。一つのCSS classへ属性を足せば終わるとは限りません。検索iconがheaderでは検索欄を開き、別のpageでは外部検索へ移動するなら、同じ名前を付けられません。buttonが行う操作から確認します。

確認はmouseだけで終えません。Tab keyでbuttonへ移動し、focusが見えるか、EnterまたはSpaceで意図した操作が起きるかを見ます。menuを開くbuttonなら、開いたあとにmenu内へ進めるか、閉じたあとにfocusが見失われないかを確認します。aria-labelを付けても、buttonがkeyboardで操作できなければ、必要な導線は完成していません。

1. 文字のないbuttonとlinkをpageごとに書き出す。
2. それぞれについて、押すと何が起きるかを短い動詞で書く。
3. 画面に同じ意味の文字がある場合は、aria-labelではなく表示文字を使う。
4. menuやdialogでは、名前と開閉状態を別に確認する。
5. Tab keyで移動し、focus、操作後の画面、次の移動先を確認する。
6. template、対象class、確認したpageを記録する。

この順序は、ARIA属性を増やすためのものではありません。文字を見ずに操作しても、必要なmenu、検索、問い合わせへ進めるようにするためのものです。最初の一手は、headerのicon button一つへ、押した結果が分かる名前を付け、Tab操作で確かめることです。

iconの画像へ代替textを入れてbuttonの名前にする方法もありますが、同じbutton内で画像の説明と操作名が競合しないようにします。飾りとして使うiconなら、利用者が必要とするのは画像の形ではなくbuttonの操作です。検索、閉じる、次へ進むという名前をbuttonへ持たせ、画像を説明の中心にしません。反対に、写真そのものを開くlinkでは、写真の内容と移動先の関係を別に確認します。

公開後にheaderのmenuを変更したり、form pluginを替えたりすると、icon buttonのHTMLも変わることがあります。CSSだけを直した記録では、どの操作名を確認したかが分かりません。更新時には、buttonが示す操作、付けた名前、開いたあとに表示する内容を一緒に残します。操作名が変わったなら、表示文字、aria-label、案内文の三つを同じ意味へ直します。