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-label と同じく、WAI-ARIA で定義されている属性のひとつです。
aria-hidden 属性を設定した要素は、音声読み上げの対象から除外されます。
例）FontAwesome アイコンに aria-hidden="true" を設定。スクリーンリーダーは「directions_car 車」ではなく「車」とだけ読み上げる。
<div>
<i class="material-icons" aria-hidden="true">directions_car</i>
<p>車</p>
</div>
STUDIO での aria-label, aria-hidden 設定方法
要素（ボックス）を選択して画面右の設定パネルを開くと、下部にアクセシビリティ欄があります。
aria-hiddenをオンにすると、その要素はスクリーンリーダーでは読み上げられなくなります。
aria-labelにテキストを記載すると、スクリーンリーダーではそのテキストを読み上げるようになります。
なお、この二つを同時に設定することはありません。aria-labelに内容を書いてaria-hiddenすると、aria-hiddenが優先されるため、スクリーンリーダーでは読み飛ばされます。
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 における 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で確認）
組み合わせの詳細については以下の資料を参考にしてください。