これらの属性は何ですか？ `aria-labelledby`と` aria-hidden`
Bootstrapモーダルを使って、私はこれらのaria属性をたくさん見ました、しかし、私はそれらをどう利用するかを知りませんでした。
これらの属性をどのような場合に使用するべきかを誰かが知っていますか？私はグーグルで話しました - 簡単な答えを見つけることができませんでした。
HTML5 ARIA 属性があなたが探しているものです。ブートストラップがなくてもコードで使用できます。
Accessible Rich Internet Applications（ARIA）は、WebコンテンツおよびWebアプリケーション（特にAjaxおよびJavaScriptで開発されたもの）を障害のある人々にとってよりアクセスしやすくする方法を定義しています。
あなたの質問を正確にするために、ここにあなたの属性が ARIA属性状態とモデル と呼ばれるものです。
aria-labelledby：現在の要素にラベルを付ける要素を識別します。
aria-hidden (state)：要素およびそのすべての子孫が、作成者によって実装されたとおりに、どのユーザーにも表示または認識されないことを示します。
これらのプロパティの主な消費者は、視覚障害者用のスクリーンリーダーなどのユーザーエージェントです。したがって、Bootstrapモーダルの場合、モーダルのdivはrole="dialog"を持ちます。スクリーンリーダーが、この役割を持つdivが表示されるようになったことに気付くと、そのdivのラベルを読み上げます。
物事にラベルを付ける方法はたくさんあります（そしてARIAを使った新しい方法もいくつかあります）が、HTMLタグ<label>を使わずに既存の要素をラベルとして使う（セマンティック）ことが適切な場合があります。 HTMLモーダルでは、ラベルは通常<h>ヘッダーです。したがって、Bootstrapモーダルの場合は、aria-labelledby=[IDofModalHeader]を追加すると、モーダルが表示されたときにスクリーンリーダーがそのヘッダーを読み上げます。
一般的に言って、DOM要素が可視または不可視になるときはいつでもスクリーンリーダーが気づくでしょう。そのため、aria-hiddenプロパティは冗長であることが多く、ほとんどの場合はスキップできます。
aria-hidden="true"はスクリーンリーダーからグリフアイコンのような装飾的なアイテムを隠しますが、混乱を招かないように意味のある発音はありません。それは良い習慣の問題としてするのはいいことです。
ARIAは機能を変更するのではなく、提示されたロール/プロパティをスクリーンリーダーユーザーに変更するだけです。 WebAIMのWAVEツールバー はページ上のARIAロールを識別します。
Ariaは、視覚障害のあるユーザーのユーザーエクスペリエンスを向上させるために使用されます。視覚障害のあるユーザーは、JAWS、NVDAなどのスクリーンリーダーソフトウェアを使用してアプリケーションをナビゲートします。アプリケーションをナビゲートしている間、スクリーンリーダーソフトウェアはユーザーにコンテンツをアナウンスします。 Ariaは、スクリーンリーダーのユーザーがコントロールの役割、状態、ラベル、および目的を理解するのに役立つコードにコンテンツを追加するために使用できます。
アリアは視覚的に何も変更しません。 （アリアもデザイナーが怖いです）。
aria-hidden：
aria-hidden属性は、スクリーンリーダー（JAWS、NVDAなど）を使用してアプリケーション内を移動する視覚障害のあるユーザーのためにコンテンツを隠すために使用されます。
aria-hidden属性は、true、falseの値で使用されます。
使い方：
<i class = "fa fa-books" aria-hidden = "true"></i>
<i>でaria-hidden = "true"を使用すると、アプリケーションを視覚的に変更することなく、スクリーンリーダーのユーザーにコンテンツが非表示になります。
aria-label
aria-label属性は、ラベルをスクリーンリーダーのユーザーに伝えるために使用されます。通常、検索入力フィールドには視覚的なラベルがありません（デザイナーのおかげで）。 aria-labelは、コントロールのラベルをスクリーンリーダーのユーザーに伝えるために使用できます。
使い方：
<input type = "edit" aria-label = "search" placeholder = "search">
アプリケーションに視覚的な変更はありません。しかし、スクリーンリーダーはコントロールの目的を理解できます
aria-labelledby
Aria-labelとaria-labelledbyの両方がラベルの通信に使用されます。しかしaria-labelledbyはページ内に既に存在する任意のラベルを参照するために使用することができますがaria-labelは私が視覚的に表示されていないラベルを伝えるために使用されます。
アプローチ1：
<span id = "sd"> Search </span>
<input type = "text" aria-labelledby = "sd">
aria-labelledbyは、スクリーンリーダーユーザーのために2つのラベルを組み合わせるためにも使用できます。
アプローチ2：
<span id = "de"> Billing Address </span>
<span id = "sd"> First Name </span>
<input type = "text" aria-labelledby = "de sd">