知っていると便利なaria-label属性の使い方

WAI-ARIAといえば、ランドマークなどのロール（role属性）が話題になることが多いようですが、aria-*属性の方にも便利な（アクセシビリティ対応がスマートに簡潔なコードで行える）機能はたくさんあります。本日は、その中でも特に有用性の高いaria-label属性を紹介します。

まずは、aria-label属性の解説を『わかりやすい「WAI-ARIA 1.0」仕様解説書』から抜粋して掲載します（部分的に簡略化・補足しています）。aria-label属性はグローバルな属性ですので、HTML5の文書であればどの要素にでも指定可能です。

aria-label属性

要素のラベルにする文字列を属性値として指定する属性です。

この属性で指定したラベルは画面上には表示されません。この属性は、画面には表示させずに支援技術に対してのみラベルを設定しておきたい場合に利用できます（この属性で指定したラベルはスクリーンリーダーなどでは読み上げられます）。

たとえば次のように指定しておくことで、支援技術のユーザーは複数のナビゲーションを区別できるようになります。
<nav aria-label="グローバルナビゲーション">
  <ul>
  ・・・
  </ul>
</nav>
<nav aria-label="ローカルナビゲーション">
  <ul>
  ・・・
  </ul>
</nav>
また、次のように指定することで、画面上では「続きを読む」とだけ表示されているリンクを、支援技術向けには「ルリモンハナバチについての続きを読む」「アサギマダラについての続きを読む」といった詳しい内容に置き換えることが可能です（こうすることで、ページ内のリンクのテキストだけを抜粋して読み上げさせた場合でもリンク先がわかるようになります）。
<h2>名古屋の自然観察会情報</h2>

<p>
幸せを運ぶ青い蜂と呼ばれる昆虫が名古屋にもいるのを御存じですか？...
<a href="news01.html" aria-label="ルリモンハナバチについての続きを読む">続きを読む</a>
</p>

<p>
今年もアサギマダラの見られる季節となりました。アサギマダラは...
<a href="news02.html" aria-label="アサギマダラについての続きを読む">続きを読む</a>
</p>

さきほど、WordPressのテーマ「Twenty Fifteen」を使用している自分のサイトを見てみたら、「続きを読む」の部分のソースコードは次のようになっていました。

◇ HTML
<p>
<a href="〜" class="more-link">続きを読む <span class="screen-reader-text">WAI-ARIAのKindle本を出してみました</span></a>
</p>

◇ CSS
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	height: 1px;
	overflow: hidden;
	position: absolute !important;
	width: 1px;
}

これと同様のことが、aria-label属性を使用すると「aria-label=”WAI-ARIAのKindle本を出してみましたの続きを読む”」という指定だけで済んでしまうわけです。余分な要素やクラスを追加する必要もありませんし、裏技的な方法を使ってテキストを隠す必要もありません。

Website Usability Infoさんの「アイコンフォントに aria-label でラベルを付ける」という記事によると、aria-label属性でアイコンフォントもアクセシブルにできるようですし、支援技術の対応状況も悪くはないようです。

『わかりやすい「WAI-ARIA 1.0」仕様解説書』では、WAI-ARIA 1.0で定義されているロールと属性をすべて解説しています。Kindle版のみの提供ではありますが、Kindleの無料アプリをインストールするとパソコンでもスマホでも閲覧可能です。興味のある方はぜひ読んでみてください！

Pocket