これらの属性は何ですか： `aria-labelledby`および` aria-hidden`

Bootstrapモーダルを使用して、これらのaria属性をよく見ましたが、それらをどのように使用するかは知りませんでした。

これらの属性を使用するケースを誰かが知っていますか？私はググった-単純な答えを見つけられなかった。

HTML5 ARIA属性はあなたが探しているものです。ブートストラップがなくてもコードで使用できます。

Accessible Rich Internet Applications（ARIA）は、WebコンテンツとWebアプリケーション（特にAjaxとJavaScriptで開発されたもの）を、障害を持つ人々がアクセスしやすくする方法を定義しています。

あなたの質問に正確に言うと、これはあなたの属性がARIA属性状態とモデルと呼ばれるものです

aria-labelledby：現在の要素にラベルを付ける要素を識別します。

aria-hidden (state)：要素とそのすべての子孫が、作成者によって実装されたユーザーには表示されないか、認識されないことを示します。

これらのプロパティの主な消費者は、視覚障害者向けのスクリーンリーダーなどのユーザーエージェントです。したがって、Bootstrapモーダルの場合、モーダルのdivhasがありrole="dialog"ます。スクリーンリーダーdivは、この役割を持つが表示されるようになると、そのラベルを読み上げますdiv。

物にラベルを付ける方法はたくさんあります（そしてARIAでいくつか新しいものがあります）が、<label>HTMLタグを使用せずに既存の要素をラベル（セマンティック）として使用することが適切な場合があります。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">