こんにちは！ 株式会社JMDCでヘルスケアプラットフォームサービス【Pep Up】 のフロントエンドエンジニアをしている新保です。
突然ですがこのボタンをご覧ください。
「一括入力する」と書かれていますね。しかしこのボタン、実はある技術を使うと「送信」と読まれてしまいます。
どういうことか。コードを見てみましょう。
<button aria-label="送信">一括入力する</button>
aria-label という属性が付与されています。これはスクリーンリーダーなどの支援技術に対して、その要素が読み上げられる場合などの名前 (accessible name) を指定するための属性です。
通常は画面に表示される内容 (可視ラベル) から自動的に accessible name が設定されますが、それを明示的に指定することのできる技術になります。
例えば目の見えない方がスクリーンリーダーでWebページを閲覧しているとき、歯車アイコンの画像は「画像」と読み上げられてしまうのですが、そこに「設定ボタン」と aria-label をつけるとちゃんと「設定ボタン」と読み上げられてわかりやすい、という使い方ができるわけですね。
しかしこの一括入力ボタンのように、見えている文字と異なる文字を aria-label に指定するのは、基本的にアンチパターンだとされています。
aria-label が、子コンテンツによる名前づけをサポートする role を持つ要素に適用される場合、その要素およびその子孫要素に含まれるコンテンツは支援技術の利用者から隠されてしまいます。支援技術の利用者からコンテンツを隠すほうが有益であるというまれな状況を除いて、こういった要素の内容を上書きするために aria-label を使用しないことが強く推奨されます。(拙訳)
音声入力ユーザーがウェブページを操作する場合、通常、コマンドの後に可視ラベル（ボタンやリンクのテキスト、入力のラベルテキストなど）を参照するように話します。可視ラベルがその項目の accessible name と一致しない場合、音声入力ユーザーはその項目を直接操作できないことがあります。(拙訳)
しかし先日、本来アンチパターンであるはずのラベルをあえて付与した方がいいのではないか？ というケースを見つけました。
それがカレンダーです。予定のデータなどと連動しており、日付のクリックでなんらかのアクションが行われたり、予定のデータと連動して日付部分の見た目が変わるなど、多少のインタラクティブ性を持っているミニカレンダー的なものを想定しています。
この日付部分、ただ「なな」と読まれるよりも、「にせんにじゅうごねん ごがつ なのか」と読まれた方が嬉しい気がしませんか？
気になったので、カレンダーの日付の accessible name がどうなっているのか調査してみました。
事例1: Google カレンダー
まず一番手頃な Google カレンダーを見てみました。とはいえメインの月ビューは非常に複雑で比較対象として適切ではないので、ミニカレンダーを。
accessible name: 7、水曜日
いきなり可視ラベルと異なる文字列が出てきました。
要点だけ取り出したHTMLはこんな感じです。
<button aria-label="7、水曜日" type="button"> <!-- 装飾用の span 要素 --> <div>7</div> </button>
事例2: React Aria
React Aria は、Adobe 製のヘッドレスUIコンポーネントライブラリです。
アクセシビリティにこだわっており、そういう観点でも非常に参考になるライブラリです。さてこのコンポーネントではどうなっているでしょうか？
accessible name: 2025年5月7日水曜日
またしても可視ラベルと異なる文字列です。
HTMLはこんな感じ。
<div role="button" aria-label="2025年5月7日水曜日">7</div>
事例3: shadcn/ui
shadcn/ui は、言わずと知れたUIコンポーネント集です。カスタマイズ性の高さとデザインの美しさ、Vibe Coding との相性の良さなどで、ますます人気が増していますね。
ここにもカレンダーコンポーネントがあります。
accessible name: 7
可視ラベルと同じ名前でした。HTMLはこう。
<button name="day" role="gridcell" type="button">7</button>
role が gridcell になっているため、VoiceOver でセルを横方向に移動すると、ヘッダーに書かれている曜日を表す文字列が読み上げられます。その実装はこちら。
<th scope="col" aria-label="Sunday">Su</th>
あ、こっちに aria-label がついてる 🤔
事例4: ARIA Datepickers
アクセシビリティの専門家はどう言ってるんだろう、と色々探した結果、アクセシビリティ関連の情報を積極的に発信しているDigitalA11YというWeb制作会社の記事に辿り着きました。
「アクセシブルな date picker まとめ」というこの記事でオススメされていたのが ARIA Datepicker です。
すごい色だ……
それはさておき accessible name は Wednesday 7 May 2025。実装はこんな感じです。
<td aria-label="Wednesday 7 May 2025" role="button" > <span aria-hidden="true">7</span> </td>
まとめ
ここまで見てきた限りでは、カレンダーの日付については可視ラベルと異なる accessible name をつけている例がほとんどでした。
これがアクセシビリティ的な観点から良いのか悪いのか、わたし自身には明確な答えを出せるだけの知見が残念ながらありません。しかし、アクセシビリティへの対応を重視している React Aria でも可視ラベルと異なる aria-label を使っているあたり、カレンダーの日付に関しては可視ラベルと異なる accessible name をつけることが少なくとも問題にはなっていないようです。
まだまだアクセシビリティについては勉強中なので、間違いがあったらすみません。 🙇♂️
この分野に詳しい方や、実際に支援技術を使っている方からご意見・ご感想・アドバイスなどいただけたら大変嬉しいです。
ご覧いただきありがとうございました！
