読み方はウェイ・アリア。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'
	});
});

コメントを残す

メールアドレスが公開されることはありません。