ラベル付け

要素に直接ラベルを設定する

ある要素（厳密にはその要素に設定されているロール）に対して直接アクセシブルな名前を付けるのがaria-label属性である。aria-label属性で設定したラベルはコンテンツのテキストやtitle属性、label要素など他の技術で提供されたラベルを上書きする。

  1. テキストが明示されていないボタン
    ⇒コンテンツテキストが「×」となっているbutton要素を「閉じるボタン」として使用しているケース。「×」自体には「閉じる」という意味はないため、資格情報が取得できない場合ユーザを混乱させる恐れがある。このような場合、aria-label属性によってラベルを上書きすることで正確な目的を伝達できる。
  2. テキストが明示されていないボタン
    ⇒font awesomeなどのアイコンフォントはCSSの疑似要素でアイコンを出力するが、絵柄が見えない場合、何の意味も持たない。アイコンそのものに意味を持たせる必要がある場合には、aria-label属性によってラベルを設定することでアクセシブルにすることが可能である。
  3. リンクの目的を説明する
    ⇒見出し・本文・リンクと全て順番に読み上げていけばa要素のコンテンツである「詳しくはこちら」でも意味は理解できるが、キーボードでリンクだけを追っている場合、そのリンクの目的が分からないという問題が生じる。このような場合も、aria-labelで具体的なリンクの目的を記述しておけばそのリンクの目的をスクリーンリーダーに対して明確に伝えられる。
<!-- 1.テキストが明示されていないボタン -->
<button aria-label="閉じる">×</button>

<!-- 2.アイコン自体に意味をもたせる -->
<i class="fab fa-twitter" aria-label="Twitter"></i>

<!-- 3.リンクの目的を説明する -->
<h2>ロシアンブルー</h2>
<p>ロシアンブルーはロシア原産の短毛種です。毛の色はブルーグレーのソリッドカラーで、鮮やかなエメラルドグリーンの目を持つことが特徴です。</p>
<p class="more"><a href="xxx.html" aria-label="ロシアンブルーの特徴について詳しく見る">詳しく見る</a></p>

他の要素のテキストをラベルとして関連付ける

aria-labelledby属性はaria-labelと同じだが、aria-labelがその要素に直接ラベルを付けるのに対して、aria-labelledby属性は「他の要素によってラベル付けされている」という形でラベルを関連付けるのが特徴である。具体的には、id属性で命名された他の要素のテキストをラベルとして指定するという方法で使用する。

  1. 内包する見出しを領域に関連付ける
    ⇒要素内に見出しが存在して、見出しのテキストを自分自身のラベルとして明示的に関連付けたい場合にはaria-labelledby属性を使用する。aria-labelとaria-labelledbyで重複して同じラベルを付けても意味が無いので、見出しを内包しているならaria-labelledby、していないならaria-labelと使い分けをするようにする。
  2. 親子関係にない要素をラベルとして関連付ける
    ⇒HTML構造的にどうしても自身の要素内にラベル用の要素を内包できない場合でも、aria-labelledbyであれば親子関係にない、離れた場所にある要素であっても対象のid属性で関連付けることでラベル付けができる。
  3. 複数のラベルを関連付ける
    ⇒aria-labelledbyは複数のラベルを指定できるので、二重のラベル構造になっている場合でも、マークアップを複雑にすることなくラベル付けすることが可能である。
<!-- 例1：内包する見出しを領域に関連付ける -->
<nav aria-labelledby="menu-title">
　<h2 id="menu-title">メインメニュー</h2>
　<ul>～省略～</ul>
</nav>

<!-- 例2：親子関係にない要素をラベルとして関連付ける -->
<ul aria-labelledby="my-label">
　<li>項目1</li>
　<li>項目2</li>
</ul>
<p id="my-label">○○の一覧</p>

<!-- 例3：複数のラベルを関連付ける -->
<h2 id="billing">請求書</h2>
<div>
　<span id="name">名前</span>
　<input type="text" aria-labelledby="billing name">
</div>
<div>
　<span id="address">住所</span>
　<input type="text" aria-labelledby="billing address">
</div>

アクセシブルな名前

aria-label、aria-labelledbyを正しく理解するには、WAI-ARIAの「アクセシブルな名前」の算出方法に関する仕様をしっかり理解する必要がある。アクセシブルな名前とはロールの名前のことで

  • コンテンツ由来
  • 著者由来

の2種類がある。コンテンツ由来の名前とは、要素のコンテンツテキストがそのまま名前として読み上げられるもので、コンテンツ由来の名前を持てるかどうかはロールによって決まっている。著者由来の名前とは、aria-label、aria-labelledby属性によって明示的につけられた名前のことで、これは一部のロールを除きほぼ全てのロールが持つことができる。また、コンテンツ由来・著者由来いずれかのアクセシブルな名前が必須となるロールもある。

  • アクセシブルな名前が必須のロール（alertdialg／application／button／heading／img／link／searchbox／tabpanel／tooltip／tree／treeitem 他）
  • コンテンツ由来の名前を持てるロール（button／cell／checkbox／columnheader／gridcell／heading／link／menuitem／menuitemcheckbox/ menuaitemradio／option／radio／row／rowgroup／rowheader／switch／tab／tooltip／tree／treeitem）
  • 著者由来の名前を持てないロール（presentation／none）
<!-- 「送信」というコンテンツ由来のアクセシブルな名前を持つ -->
<button>送信</button>

<!-- 「インフォメーション」という著者由来のアクセシブルな名前を持つ -->
<a href="#" aria-label="インフォメーション" class="mark">！</a>

<!-- navigationロールはコンテンツ由来の名前を持たないので
アクセシブルな名前は無い（必須ではないので無くても構わない） -->
<nav>ナビゲーション</nav>

<!-- presentationロール、noneロールには
著者由来のアクセシブルな名前を設定できない（aria-label等を設定してはいけない） -->
<i class="fa fa-arrow-right" role="presentation"></i>
inserted by FC2 system