web-dev-qa-db-ja.com

Aria-labelとは何ですか？またどのように使用すればよいですか？

数時間前、私は aria-label 属性について読みました。

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

しかし、私の意見では、これがtitle属性がするべきことだったのです。いくつかの例や説明を得るために Mozilla Developer Network でさらに調べましたが、私が見つけた唯一のことは

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

これは私にラベルを何も与えてくれない（だから私はその考えを誤解したと思う）。ここで試してみたのは jsfiddle です。

だから私の質問は：なぜaria-labelが必要なのですか、そしてどのようにそれを使うべきですか？

html5assistive-technology
252
Salvador Dali

これは 支援技術 （スクリーンリーダーなど）がラベルを匿名のHTML要素に添付するのを助けるように設計された属性です。

<label>要素があります。

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

<label>は、id="fmUserName"のinputボックスに自分の名前を入力するようにユーザーに明示的に指示します。

aria-labelはほとんど同じことをしますが、スクリーン上でlabelを持つことが実用的でないか望ましくない場合のためのものです。 MDNの例 ：

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

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

334
Olly Hodgson

あなたが与える例では、あなたは完全に正しい、あなたはtitle属性を設定しなければなりません。

aria-labelが（スクリーンリーダーのような）支援技術によって使用されるツールの1つである場合、それはブラウザでネイティブにサポートされておらず、それらに影響を及ぼしません。たとえば知的障害者など、WCAGの対象となるほとんどの人（スクリーンリーダーを除く）には役に立ちません。

「X」は、ボタンによって導かれたアクションに情報を提供するのに十分ではありません（コンピューターの知識がない人について考えてください）。それは「閉じる」、「削除」、「キャンセル」、「減らす」、奇妙な十字架、落書き、何もないことを意味するかもしれません。

W3Cがここでtitle属性ではなくaria-labelを宣伝するように思われるという事実にもかかわらず： http://www.w3.org/TR/2014/NOTE-WCAG20-TECHS-20140916/ARIA14 同様の例では、技術サポートには標準のブラウザが含まれていないことがわかります： http://www.w3.org/WAI/WCAG20/Techniques/ua-notes/aria#ARIA14

実際にはaria-label、この正確な状況ではアクションにより多くのコンテキストを与えるために使用されるかもしれません：

例えば、盲目の人々は私たちのもののようなポップアップを良い視力で知覚するのではなく、それは文脈の変化のようなものです。 「閉じる」がスクリーンリーダーを持たない人にとってより重要な場合、「ページに戻る」がスクリーンリーダーにとってより便利な代替手段になります。

  <button
      aria-label="Back to the page"
      title="Close" onclick="myDialog.close()">X</button>
50
Adam

aria-labelがpracticallyにどのように役立つかを知りたい場合は、手順に従ってください....

以下のコードを持つhtmlページを作成します

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
</head>
<body>
    <button title="Close"> X </button>
    <br />
    <br />
    <br />
    <br />
    <button aria-label="Back to the page" title="Close" > X </button>
</body>
</html>

ここで、違いを観察するためにブラウザーで実行される仮想スクリーンリーダーエミュレーターが必要です。したがって、chromeブラウザーユーザーは chromevox 拡張機能をインストールでき、Mozillaユーザーは fangsスクリーンリーダー addinでインストールできます

インストールが完了したら、ヘッドフォンを耳に入れ、htmlページを開き、両方のボタンに（タブを押すことで）フォーカスを1つずつ作成します。first x button .. x buttonのみ。ただし、second x buttonの場合は、back to the page buttonのみが聞こえます。

私はあなたが今それをうまく得たことを望みます!!

27
Moumit

前提条件：

Ariaは視覚障害のあるユーザーのユーザーエクスペリエンスを向上させるために使用されます。視覚障害のあるユーザーは、JAWS、NVDAなどのスクリーンリーダーソフトウェアを使用してアプリケーションをナビゲートします。アプリケーションをナビゲートしている間、スクリーンリーダーソフトウェアはユーザーにコンテンツをアナウンスします。 Ariaは、スクリーンリーダーのユーザーがコントロールの役割、状態、ラベル、および目的を理解するのに役立つコードにコンテンツを追加するために使用できます。

アリアは視覚的に何も変更しません。 （アリアもデザイナーが怖いです）。

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">

アプローチ2：

aria-labelledbyは、スクリーンリーダーユーザーのために2つのラベルを組み合わせるためにも使用できます。

<span id = "de"> Billing Address </span>

<span id = "sd"> First Name </span>

<input type = "text" aria-labelledby = "de sd">
0
Pavan Sai Mohan Kolli