[解決済み] aria-labelとは何ですか、どのように使用すればよいですか？

質問

数時間前、私は以下の記事を読みました。 アリアラベル 属性で、その

現在の要素にラベルを付ける文字列値を定義します。

しかし、私の考えでは、これは title 属性は、本来そうあるべきものでした。さらに調べてみると モジラデベロッパーネットワーク を使い、例や解説を得ることができましたが、唯一見つけたのは

<button aria-label="Close" onclick="myDialog.close()">X</button>

これでは何のラベルも表示されません（だから私はこのアイデアを誤解していたのだと思います）。私はそれをここで試してみました jsfiddle .

そこで質問なのですが、なぜ aria-label また、どのように使用すればよいのでしょうか？

どのように解決するのですか？

を助けるために作られた属性です。 支援技術 (スクリーン・リーダーなど) が、そうでなければ無名の HTML 要素にラベルを付けます。

そこで <label> 要素を使用します。

<label for="fmUserName">Your name</label>
<input id="fmUserName">

は <label> に自分の名前を入力するよう明示的に指示します。 input というボックスがあります。 id="fmUserName" .

aria-label も同じようなことをしますが、 これは label を画面上に表示します。取る MDN の例 :

<button aria-label="Close" onclick="myDialog.close()">X</button>`

ほとんどの人は、このボタンでダイアログが閉じられることを視覚的に推測できるはずです。支援技術を使用している目の見えない人は、"X"の読み上げを聞くだけかもしれませんが、視覚的な手がかりがなければあまり意味をなしません。 aria-label ボタンが何をするものかを明示的に伝える。