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

321

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

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

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

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

これは私にラベルを提供していません（それで私は考えを誤解したと思います）。ここjsfiddleで試してみました。

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

html assistive-technology

— サルバドール・ダリ
ソース

3

リンクしたリソースを見ると、aria-labeltitle属性によって提供されるツールチップを表示したくない場合に使用される可能性があります。可視ラベルまたは可視ツールチップが望ましくない場合、作成者は、 aria-labelを使用した要素

— Fabrizio Calderan 2014

13

fyi ARIA = Accessible Rich Internet Applications

— Eric D'Souza

<h1>要素内の実際に表示されるテキストが短すぎて、テキスト全体を表示したくない場合に、より説明的な<h1>テキストにaria-labelを使用することが適切かどうか誰かが知っていますか？このスレッドの例では、ラベルを使用できます。しかし、ラベルは見出しには適用されません。そのため、私が尋ねるのはなぜ

— HelloWorld

あなたが求めている唯一の適切な同様のものは、より多くの情報を必要とする「画像」のみの「longdesc」プロパティです-それは常にとにかく私は恐れて説明的であるべきなので、テキスト用のものがあるとは想像できません。-@HelloWorld

— ジェイミーパターソン

427

これは、支援技術（スクリーンリーダーなど）が、匿名の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ボタンの動作を明示的に伝えます。

— オリーホジソン
ソース

4

説明してくれてありがとう、でも彼はどうやって仲良く聞きますか？これを聞くには、ブラウザー（クロム）で何ができますか？そして、視覚障害者がどこにあるかわからない場合、どうすればこのボタンを選択できますか？

— サルバドールダリ

1

ChromeVoxのような拡張機能から始めるのが良いと思いますか？私はそれを使ったことがありません。彼らは、HTMLから手がかりを取って、利用者に声を出して画面を読み取ることによって、作業（例えばh1より強調されるべきでp、a明確にリンクされ, た情報を入力するためにどこかを示しform`、 aria-*属性がなど、要素が何をするかにさらなる手がかりを与えます）。

— オリーホジソン

2

この特定のケースでは、タイトルに追加しattributeます。ユーザーがXに

— カーソルを合わせ

3

ChromeVoxに加えて、NVDAがあります。どちらもインストールと起動はかなり簡単で、習得は非常に困難です。

— ivarni

1

@SalvadorDali-情報提供のみ。モバイル視覚障害者では、Androidモバイルの場合はTalkBack、iOSモバイルの場合はVoiceOverのようなユーザー補助ツールを有効にできます。これを使用すると、ページは1行ずつ読み取られます。

— Rahul J. Rane、

71

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

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

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

W3C aria-labelがtitle属性ではなく、ここで属性を促進しているように見えるという事実にもかかわらず、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>

— アダム
ソース

35

実際にどのようにaria-label役立つかを知りたい場合は、次の手順に従ってください。自分でそれを取得します。

以下のコードを持つ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ユーザーは牙スクリーンリーダーアドインを使用できます

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

私はあなたが今それをうまくやったと思います!!

— ムミット
ソース

1

重要な点はtitle、最初のボタンでも属性が無視されることです。さらに詳しい情報：silktide.com/...

— Sphinxxx

2

それはまだ事実ですか？まだ良いのいずれか提供するtitle と aria-label？

— カマフェザー2018年

2

これはまさに私が欲しかったものです。私はそれが実際の世界でどのように機能し、chromevox魅力的に機能し、aria-labelledbyフィールドを暗唱するかを見て、聞きたかっただけです。ありがとう。

— Raj Rajeshwar Singh Rathore

7

前提条件：

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

— ndioewbnc
ソース

3

titleマウスが要素をホバリングされたときに属性がツールチップが表示されます。これはすばらしい追加ですが、マウスを使用できない人（運動障害のため）やこのツールチップを表示できない人（例：視覚障害のある人やスクリーンリーダーを使用している人）には役立ちません。

したがって、ここでの注意深いアプローチは、すべてのユーザーにサービスを提供することです。私はtitleとaria-label属性の両方を追加します（さまざまなタイプのユーザーとさまざまなタイプのWebの使用を提供します）。

これは詳細に説明する良い記事ですaria-label

— ルカランカ
ソース