WAI-ARIA の設定例

読み方はウェイ・アリア。W3C の Webアクセシビリティ推進組織「WAI」によって策定される仕様。

WAI-AREA属性の種類

role（役割）

要素の役割を示す。

WAI-ARIA ロール（MDN）

使いそうな場面

属性	使用例	使用例の説明
role=”img”	<svg role=”img”>…	インラインSVGに画像の役割を与える
role=”button”	<a href=”” role=”button”>	a要素で作成したボタンにボタンの役割を与える
role=”tablist”	<ul role=”tablist”> <li role=”none presentaion”>	リストにタブリストの役割を与える

下記はすでに role が与えられているHTML要素を使用すれば記述不要。（冗長になるので）
<main role=”main”> ←エラーでは無いけど無駄

• role=”main”
• role=”article”
• rolr=”navigation”

property（性質）

要素の性質を表す。

使いそうな場面

属性	使用例	使用例の説明
aria-label=””	<button type=”button” aria-label=”メインメニューを開く”>{ ハンバーガーアイコン }</button> <button type=”button” aria-label=”閉じる”>{ ×アイコン }</button>	ハンバーガーメニューをスクリーンリーダーで「メインメニューを開く」と読み上げさせる例。 ×アイコンの閉じるボタンをスクリーンリーダーで「閉じる」と読み上げさせる例。
aria-haspopup=””	<a href=”#popup” aria-haspopup=”true”>動画を観る</a>	ポップアップを開くためのボタンに指定
aria-controls=””	<button type=”button” aria-expanded=”false” aria-controls=”menu”>開く</button> <div id=”menu” class=”menu”>…</div>	制御する要素をIDで指定する。

state（状態）

要素の現在の状態を示す。

属性	使用例	使用例の説明
aria-hidden=”true/false“	<i class=”fa fa-search” aria-hidden=”true”>	検索アイコンの読み上げをさせない
aria-current=” true/false page step location date time”	<ul class=”pagenation”> <li>1</li> <li aria-current=”page”>2</li> <li>3</li> </ul>	ページ送りで現在のページを示す。 「2 現在のページ」と読み上げる
aria-expanded=”true/false”	<button type=”button” aria-expanded=”false” aria-controls=”menu”>開く</button> ↓↓↓　押す <button type=”button” aria-expanded=”true” aria-controls=”menu”>閉じる</button>	※”true”は開いた状態、”false”は閉じた状態を示す ※言葉で「開く/閉じる」と表記されている場合は不要。 ボタンにアイコンを使う時などに。

jQueryで aria-expanded の true/false を切り替えする例

$('#js-hamburger').on('click', function() {
	$('body').toggleClass('is-no-scroll');
	$(this).attr('aria-expanded', function (index, attr) {
		return attr == 'true' ? 'false' : 'true'
	});
});