これらの属性は、「aria-labelledby」と「aria-hidden」です。

Question

ブートストラップモーダルを使用すると、これらの属性が多く見られましたが、その使用方法はわかりませんでした。

これらの属性を使用するケースは誰にも分かりますか？私はグーグルで答えました。まったく簡単な答えは見つかりませんでした。

Answer 1

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

アクセシブル・リッチ・インターネット・アプリケーション（ARIA）は、障害を持つ人々へのWeb コンテンツとWebアプリケーション（Ajaxと JavaScriptで開発され、特にもの）は、よりアクセスしやすくする方法を定義します。

あなたの質問のために正確には、ここにあなたの属性はARIA attribute states and model

aria-labelledbyと呼ばれるものである：現在の要素をラベル要素（または要素）を識別します。

aria-hidden (state)は：著者によって に実装される要素とその子孫のすべてが任意のユーザに可視又は知覚されないことを示します。

Answer 2

これらのプロパティの主な消費者は、盲人用のスクリーンリーダーなどのユーザーエージェントです。したがって、ブートストラップモーダルの場合、モーダルのdivはrole="dialog"です。この役割を持つdivが表示されることをスクリーンリーダーが認識すると、それはdivのラベルを発することになります。

ARIAでラベル付けする方法は数多くありますが、ARIAで新しいラベルを付ける方法はいくつかありますが、<label> HTMLタグを使用せずに既存の要素をラベル（意味）として使用するのが適切な場合もあります。 HTMLモーダルでは、ラベルは通常<h>ヘッダーです。 Bootstrapモーダルの場合、aria-labelledby=[IDofModalHeader]を追加すると、モーダルが表示されたときにスクリーンリーダーがそのヘッダーを表示します。

一般に、スクリーンリーダーは、DOM要素が表示または非表示になるたびに通知するため、aria-hiddenプロパティは頻繁に重複し、ほとんどの場合スキップされる可能性があります。

Answer 3

ARIAは機能を変更せず、提示されたロール/プロパティのみをスクリーンリーダーユーザーに変更します。 WebAIM’s WAVE toolbarは、ページ上のARIAロールを識別します。

Answer 4

aria-hidden="true"は、混乱を招かないように意味のある発音を持たないスクリーンリーダーからのグリフィアイコンアイコンのような装飾的なアイテムを非表示にします。良い練習の問題としてはいいことです。