「aria-label」と「aria-hidden」について
本記事では、設定したテキストをスクリーンリーダーで読み上げるようにする「aria-label」と、読み上げの対象から除外する「aria-hidden」の機能と、ユースケースについて解説します。
事前にStudio におけるアクセシビリティをお読みいただくとスムーズです。
なぜ設定が必要なケースがあるか
HTMLの記述が適切であれば、スクリーンリーダーに対してある程度のアクセシビリティは確保できるようになっています。ただし、全てのケースをカバーできるわけでなく、HTMLだけでは意味や構造を表現しきれない場合があります。
その際には「WAI−ARIA」という、HTMLの持っている意味や構造を拡張できる仕組みを用います。この仕組みを利用して、下記をスクリーンリーダー等に伝えることができます。
それが何なのか
どういう操作ができるのか
いまどういった状態なのか
WAI−ARIAは奥が深く、「使っていい箇所、悪い箇所」の判断も容易ではありません。このヘルプ記事では、WAI−ARIAの詳しい解説は行わず、Studioにおける一部のユースケースをご紹介します。
「aria-label 」とは
aria-label とは、WAI-ARIAで定義されている属性のひとつです。
特定の要素にaria-label属性を記述すると、その要素をスクリーンリーダーで読み上げる際に、要素の中身ではなく、aria-label に書かれたテキストを読み上げるようになります。
例：下記のように、ボタン(button要素)にaria-label属性を設定した場合
スクリーンリーダーは「？」を無視し、aria-labelの「ヘルプ」だけを読み上げます。
<button aria-label="ヘルプ">?</button>
aria-labelは、内容の補足ではなく代わりに読み上げられるテキストです。その点に注意した上で、aria-labelには単独で意味が伝わるテキストを記載しましょう。
なお、aria-labelのテキストはブラウザの画面上には表示されません。
「aria-hidden」とは
aria-hiddenは、WAI-ARIAで定義されている属性のひとつです。
aria-hidden属性を設定した要素は、音声読み上げの対象から除外されます。
例：Font Awesome アイコンに aria-hidden="true" を設定した場合
スクリーンリーダーは「directions_car 車」ではなく「車」とだけ読み上げます。
<div>
<i class="material-icons" aria-hidden="true">directions_car</i>
<p>車</p>
</div>
WAI-ARIA（aria-label・aria-hidden）は使わないのがベスト
WAI-ARIA（aria-label・aria-hidden）は、あくまで特定の問題に対するパッチ当て、つまり絆創膏のようなものだと考えてください。不用意に使うと、視覚的に見えている内容とスクリーンリーダーで読み上げる内容にズレが生じ、ページの内容が正しく伝わらなくなります。
WAI-ARIAを使わずに済む方法があれば、そちらを選ぶべきです。WAI-ARIAに詳しくない場合は、このヘルプで紹介しているケースのときだけ使うとお考えください。
aria-label を使わずに Accessibility を確保する方法
情報を伝える画像を配置する時、アクセシビリティを確保する確実な方法は「Imgモードでの配置＋altの記載」です。
例）imgモードの画像ボックスにaltを設定し、aria-labelは空欄にする。
情報を伝える画像にリンクを設定したい時、StudioではImgモードの画像をグループ化して生まれた親ボックスにリンクを設定してください。
StudioではBoxモード画像は背景画像（background-image）として扱われ、altを設定できないためです。
例：imgモードの画像ボックスにaltを設定し、aria-labelは空欄にする。そして親ボックスにリンクを設定する。
その他、アクセシビリティを考慮した構築方法については、Studioアクセシビリティチェックシートも合わせてご確認ください。
Studioにおける aria-label のユースケース
Studioでaria-labelを利用するのは、おもに２パターンです。
情報を伝える画像を「中身がカラのBoxモード画像」として配置する場合
情報を伝えるアイコンを配置する場合
パターン１：情報を伝える画像を「中身がカラのBoxモード画像」として配置する
先に述べたような、「Imgモードでの配置＋altの記載」ができない状況で aria-label は役立ちます。
レイアウトの都合上、情報を伝える画像をBoxモードで配置せざるを得ない場合には、Boxモード画像にその情報を表すaria-labelを設定してください。
例）boxモードの画像ボックスにaria-labelを設定する。
なお、imgのalt属性と比較して、aria-labelは以下の点で劣ります。
altは機械翻訳されるが、aria-labelは多くの自動翻訳でまだ翻訳されません。 （Chrome ブラウザ上で翻訳するときだけ aria-label も翻訳される）
検索エンジンは、サイト上のaltを読み取って解釈することを明言しているが、aria-labelに対しては明言していません。
altは画像読み込み失敗時にも画面にテキストが表示されるが、aria-labelは画像の読み込みに失敗したり、CSS 無効時にテキストが表示されたりはしません。
パターン２：情報を伝えるアイコンを配置する
Studioでは、アイコンボックス（ Material Icons または Font Awesome ）を配置しただけでは、スクリーンリーダーがそれを適切に読み上げられません。
例えばハートのアイコンの場合、Material Icons だと「favorite_border」と読み上げてしまいます。Font Awesome の場合は何も読み上げられません。
「情報を伝えるアイコン」に aria-label を設定することで 、不適切な読み上げを aria-label のテキストで上書きできます。
この例ではスクリーンリーダーはMaterial Icons、FontAwesomeどちらも「お気に入り、イメージ」と読み上げています。
ここまで解説したように、「要素に含まれたテキストが適切でなく、かつ理由があって変更できないとき」に aria-label を使用します。
Studio における aria-hidden のユースケース
Studio で aria-hidden を利用するのは、おもに２パターンのみです。
装飾目的で Box を配置する場合
テキストとセットでアイコンを装飾目的で配置する場合
パターン１：装飾目的で Box を配置する
デザインによっては、テキストなどを装飾目的で配置するケースもあるでしょう。スクリーンリーダーはそれらも読み上げてしまので、そのままだと文章を聞く妨げとなってしまいます。
そうした読み飛ばしたい要素の aria-hidden をオンにすると、スクリーンリーダーは読み飛ばしてくれます。
パターン２：同じ意味のテキストとアイコンをセットで配置する
例えば、ヘルプアイコンと「ヘルプ」というテキストを並べ、それらをまるごとリンクにする、といった状況です。
そのままだと内容が重複して読み上げられてしまうため、アイコンの aria-hidden 設定をオンにします。これで、テキストのみスクリーンリーダーが読み上げるようになります。
<a href="https://studio.design">
<i class="material-icons" aria-hidden="true">help_outline</i>
<p>Help</p>
</a>
なお、同じ意味の画像とテキストを並べる場合は、 aria-hidden は必要ありません。
Imgモード画像なら alt と aria-label を、Boxモード画像なら aria-label のみ空にすれば、スクリーンリーダーはテキストのみを読み上げます。
<a href="https://studio.design">
<img alt="" src="https://....">
<p>Help</p>
</a>
aria-labelの注意点（上級者向け）
Studioの現在の仕様では、aria-labelはすべての要素（ボックス）に設定できます。しかし、実際に読み上げの際にaria-labelのテキストが使われるかどうかは、設定した要素とスクリーンリーダーの組み合わせによって結果が変化します。
このヘルプで紹介している利用方法であれば、複数のスクリーンリーダーで問題なく読み上げることを確認しています（iOS VoiceOver、Mac VoiceOver、Android Talkback、Windows Chrome + NVDAで確認）
組み合わせの詳細については以下の資料を参考にしてください。
aria-labe・aria-hiddenの設定方法
ボックスを選択します。
画面右側の設定パネルを開きます。
下部にあるアクセシビリティ欄で設定します。
aria-hiddenをオンにすると、その要素はスクリーンリーダーでは読み上げられなくなります。aria-labelにテキストを記載すると、スクリーンリーダーではそのテキストを読み上げるようになります。
注意：この二つを同時に設定することはありません。aria-labelに内容を書いてaria-hiddenすると、aria-hiddenが優先されるため、スクリーンリーダーでは読み飛ばされます。