Point：Studio全体でのアクセシビリティの考え方は、Studio におけるアクセシビリティを参照してください。
aria属性が必要になる場面
HTMLが適切にマークアップされていれば、スクリーンリーダーに対して一定のアクセシビリティは確保できます。
一方で、HTMLだけでは意味や構造を十分に表現できない場面もあります。
そのようなときに、HTMLの意味や構造を補う仕組みとして「WAI-ARIA」を利用します。
WAI-ARIAを使うと、スクリーンリーダーなどに次の情報を伝えられます。
それが何か（ラベルや役割）
どのような操作ができるか
現在どのような状態か
WAI-ARIAは範囲が広く、使うべき場所と避けるべき場所の判断が難しい場合があります。
本記事では、その中でも「aria-label」「aria-hidden」の利用パターンに絞って説明します。
aria-labe・aria-hiddenの設定方法
注意：aria-labelとaria-hiddenは同時に使いません。
aria-labelを設定した要素にaria-hiddenもオンにすると、aria-hiddenが優先され、その要素は読み上げの対象外になります。
ボックスを選択します。
右パネルで[設定]タブを選択します。パネルが閉じている場合は、右パネルを開いてください。
[タグ・属性]のそれぞれの設定欄で設定します。
[aria-hidden]にチェックを入れると、その要素はスクリーンリーダーで読み上げられなくなります。
[aria-label]にテキストを入力すると、そのテキストがスクリーンリーダーで読み上げられます。
「aria-label 」とは
要素にaria-labelを設定すると、その要素がスクリーンリーダーで読み上げられるとき、要素内のテキストではなくaria-labelのテキストが読み上げられます。（aria-labelのテキストは画面には表示されません。）
例：button要素にaria-labelを設定した場合。
<button aria-label="ヘルプ">?</button>
この例では、スクリーンリーダーは「？」を無視し、「ヘルプ」とだけ読み上げます。
aria-labelは「補足」ではなく「置き換え」のテキストです。
そのため、aria-labelには単体で意味が伝わるテキストを設定してください。
「aria-hidden」とは
aria-hiddenも、WAI-ARIAで定義されている属性のひとつです。
aria-hiddenを設定した要素は、アクセシビリティツリーから除外され、スクリーンリーダーの読み上げ対象になりません。
例：アイコンに aria-hidden="true" を設定した場合。
<div>
<i class="material-icons" aria-hidden="true">directions_car</i>
<p>車</p>
</div>
この場合、スクリーンリーダーは「directions_car 車」ではなく、「車」とだけ読み上げます。
WAI-ARIA（aria-label・aria-hidden）使用時の考え方
WAI-ARIA（aria-label・aria-hidden）は、特定の問題に対する補助的な手段として利用します。
むやみに使うと、画面上の見え方と読み上げ内容がずれ、内容がかえって伝わりにくくなる場合があります。
WAI-ARIAを使わずに実現できる方法があれば、そちらを優先してください。
aria-label を使わずにアクセシビリティを確保する
情報を伝える画像は、「Imgモードで配置してalt属性を設定する」ことが基本です。
この場合、aria-labelは空欄のままで問題ありません。
画像にリンクを設定したい場合は、次の構成を推奨します。
Imgモードの画像ボックスに、代替テキスト（alt）を設定します。
aria-labelは空欄にします。
その他、アクセシビリティを考慮した構築方法については、Studioアクセシビリティチェックシートも合わせてご確認ください。
Studioにおける aria-label のユースケース
Studioでaria-labelを使う主なケースは次の2つです。
情報を伝える画像を「中身が空のBoxモード画像」として配置する場合
情報を伝えるアイコンを配置する場合
パターン1：情報を伝える画像を「中身が空のBoxモード画像」として配置する
レイアウトの都合で、情報を伝える画像をBoxモードで配置することがあります。
このようにImgモード＋altを使えない場合は、Boxモード画像に意味を表すaria-labelを設定します。
例：Boxモードの画像ボックスにaria-labelを設定する。
<div class="image-box" aria-label="セミナー開催のお知らせバナー"></div>
ただし、img要素のalt属性と比べると、aria-labelには次のような制約があります。
altは多くの環境で自動翻訳の対象になるが、aria-labelは翻訳されない場合が多い
検索エンジンはaltの利用を明言しているが、aria-labelについては明言されていない
altは画像読み込み失敗時に画面に表示されるが、aria-labelは表示されない
そのため、まずはImgモード＋altを検討し、それが難しい場合にaria-labelを使うのが安全です。
パターン２：情報を伝えるアイコンを配置する
Studioでアイコンボックスを配置しただけでは、スクリーンリーダーが意図した名前で読み上げないことがあります。
Material Iconsのハートアイコンは「favorite_border」と読み上げられる場合がある
Font Awesomeのアイコンは何も読み上げられない場合がある
「要素内のテキストが適切でなく、かつデザインなどの理由で変えられないとき」にaria-labelを使い、適切なラベルで上書きします。
例：ハートアイコンにaria-labelを設定する。
<i class="material-icons" aria-label="お気に入り、イメージ">favorite_border</i>
この設定により、対応するスクリーンリーダーでは「お気に入り、イメージ」と読み上げられます。
Studio における aria-hidden のユースケース
Studioでaria-hiddenを使う主なケースは次の2つです。
装飾目的でBoxを配置する場合
同じ意味のテキストとアイコンをセットで配置する場合
パターン１：装飾目的で Box を配置する
背景・罫線・飾りなど、意味を持たない装飾目的のBoxを配置することがあります。
これらをそのままにすると、スクリーンリーダーが余計な情報として読み上げ、本文理解の妨げになる場合があります。
装飾として読み飛ばしたい要素にはaria-hiddenをオンにし、読み上げ対象から外します。
パターン2：同じ意味のテキストとアイコンをセットで配置する
ヘルプアイコンと「ヘルプ」のテキストを横並びにし、まとめてリンクにするケースです。
<a href="https://studio.design">
<i class="material-icons" aria-hidden="true">help_outline</i> <p>Help</p>
</a>
aria-hiddenを設定しない場合、スクリーンリーダーがアイコンとテキストを重複して読み上げることがあります。
アイコン側にaria-hiddenを設定すると、テキストだけが読み上げられ、冗長な読み上げを避けられます。
同じ意味の画像とテキストを並べる場合は、aria-hiddenは不要です。
Imgモード画像の場合：alt="" とし、aria-labelも空にする
Boxモード画像の場合：aria-labelを空にする
<a href="<https://studio.design>">
<img alt="" src="https://....">
<p>Help</p>
</a>
この設定では、スクリーンリーダーは「Help」のテキストのみを読み上げます。
aria-labelの注意点（上級者向け）
Studioでは、aria-labelを多くの要素（ボックス）に設定できますが、実際に読み上げで使われるかどうかは、要素の種類とスクリーンリーダーの組み合わせによって変わります。
本記事で紹介している利用パターンについては、主要なスクリーンリーダー環境で問題なく読み上げられることを確認しておくと安心です。
より詳細な挙動を知りたい場合は、次の資料を参照してください。