frontendmemo

このサイトは、「html、css、js、ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

WAI-ARIA基礎まとめ カルーセルを例に実装方法の解説

スポンサードリンク


スポンサードリンク


WAI-ARIAとは

WAI-ARIAの語源は、Web Accessibility Initiative - Accessible Rich Internet Applications(ウェブ・アクセシビリティ・イニシァティブ・アクセシブル・リッチ・インターネット・アプリケーション)です。
WAIは、あらゆる人がWWWを利用できるように、アクセシビリティの向上を率先する組織です。

Web開発者は、HTMLだけでは作成できないユーザーインターフェイスコントロールを作成するために、クライアント側のスクリプトを使用し
Webサーバーから新しいページを要求することなくページのセクションを更新します。
このようなウェブサイト上の技術は、リッチインターネットアプリケーションと呼ばれています。

WAI-ARIA - Wikipedia

WAI-ARIAの読み方

WAI-ARIAの読み方ですが、イニシャルを取った略称なのであまりこだわる必要もないと個人的に思いますが、
余計発音が分からないですよね。口頭で発音した時訂正されてしまうのは恥ずかしいです。
こういう時は、自分はそれぞれ考えられる読み方を検索して一致数、有力な情報度で確かめます。
考えられる読み型は以下です。

  • ワイアリア 約 156 件
  • ウェイアリア 約 873,000 件
  • ワイエリア 約 94 件
  • ウェイエリア 約 12,600,000 件だがアクセシビリティの件ではないので対象外

よってウェイアリアが正しいようです。

WAI-ARIAはSEOに有効?

SEOについては、直接的な効果は期待しない方が良いかと思います。
情報を正しく伝えるという点では有用な気もしますが、WAI-ARIAはスクリーンリーダーに正しい読み上げを理解させるのが本来の目的の為、SEOとは切り離して考えた方が過度な使用を避けられそうです。

www.frontendmemo.xyz

WAI-ARIAの例

ではいったいWAI-ARIAを指定するとどうなるか。以下はhtml要素にWAI-ARIAを指定した一例です。

  • 読まれては困る部分にaria-hidden属性をつけると、スクリーンリーダーに無視される
  • 情報が書き換わる個所にaria-live属性をつけると、書き換わった際に読み上げられる
  • role属性を使うとその要素がなんなのか通知される
  • aria-label属性でスクリーンリーダー向けの説明を提供できる

このように読み込み(更新)時から要素が表示非表示するなどwebサイトの情報が書き換わった場合、aria-*属性も変化させることで状態などをスクリーンリーダーを通してユーザーに伝えることができます。

WAI-ARIAの種類

WAI-ARIA、role属性の種類は以下です。
ARIA in HTML

非常に多くて覚えずらいかと思います。
これを受験勉強のように一つずつ覚えていくことは不要で、必要なものを必要なだけ実例を通して覚えていくことが効率的と言えます。

カルーセルを例にしたWAI-ARIAの解説

アクセシビリティやオプションを網羅しているカルーセルのプラグインslick.jsを例に見ていきましょう。
slick - the last carousel you'll ever need

※ style属性は削除しています。

<div class="slider single-item slick-initialized slick-slider slick-dotted" role="toolbar">
<button type="button" data-role="none" class="slick-prev slick-arrow" aria-label="Previous" role="button">Previous</button>
<div aria-live="polite" class="slick-list draggable">
<div class="slick-track" role="listbox">
<div class="slick-slide slick-cloned" data-slick-index="-1" aria-hidden="true" tabindex="-1"><h3>6</h3></div>
<div class="slick-slide slick-current slick-active" data-slick-index="0" aria-hidden="false" tabindex="-1" role="option" aria-describedby="slick-slide00"><h3>1</h3></div>
<div class="slick-slide" data-slick-index="1" aria-hidden="true" tabindex="-1" role="option" aria-describedby="slick-slide01"><h3>2</h3></div>
<div class="slick-slide" data-slick-index="2" aria-hidden="true" tabindex="-1" role="option" aria-describedby="slick-slide02"><h3>3</h3></div>
<div class="slick-slide" data-slick-index="3" aria-hidden="true" tabindex="-1" role="option" aria-describedby="slick-slide03"><h3>4</h3></div>
<div class="slick-slide" data-slick-index="4" aria-hidden="true" tabindex="-1" role="option" aria-describedby="slick-slide04"><h3>5</h3></div>
<div class="slick-slide" data-slick-index="5" aria-hidden="true" tabindex="-1" role="option" aria-describedby="slick-slide05"><h3>6</h3></div>
<div class="slick-slide slick-cloned" data-slick-index="6" aria-hidden="true" tabindex="-1"><h3>1</h3></div>
</div>
</div>
<button type="button" data-role="none" class="slick-next slick-arrow" aria-label="Next" role="button">Next</button>
<ul class="slick-dots" role="tablist">
<li class="slick-active" aria-hidden="false" role="presentation" aria-selected="true" aria-controls="navigation00" id="slick-slide00">
<button type="button" data-role="none" role="button" tabindex="0">1</button></li>
<li aria-hidden="true" role="presentation" aria-selected="false" aria-controls="navigation01" id="slick-slide01"><button type="button" data-role="none" role="button" tabindex="0">2</button></li>
<li aria-hidden="true" role="presentation" aria-selected="false" aria-controls="navigation02" id="slick-slide02"><button type="button" data-role="none" role="button" tabindex="0">3</button></li>
<li aria-hidden="true" role="presentation" aria-selected="false" aria-controls="navigation03" id="slick-slide03"><button type="button" data-role="none" role="button" tabindex="0">4</button></li>
<li aria-hidden="true" role="presentation" aria-selected="false" aria-controls="navigation04" id="slick-slide04"><button type="button" data-role="none" role="button" tabindex="0">5</button></li>
<li aria-hidden="true" role="presentation" aria-selected="false" aria-controls="navigation05" id="slick-slide05"><button type="button" data-role="none" role="button" tabindex="0">6</button></li>
</ul>
</div>

aria-label

要素に対してラベル付けを行うことができます。ボタンに対して「前、次」というラベル付をしてます。

aria-live

内容が更新された際にユーザーに伝達するかどうかを指定できます。値のpoliteは伝達する、offは伝達しないです。

aria-hidden

ユーザーエージェントに認識させたくない要素に指定します。その為スクリーンリーダーで無視されます。
値のtrueは隠す、falseは隠さない、つまりスクリーンリーダーで読み上げられます。表示されてる要素にaria-hidden="false"、表示されていない要素にaria-hidden="true"を指定します。

aria-describedby

説明文とコントロールを直接結びつけます。ここではカルーセル要素とドットナビゲーションを結びつけるために使用しています。

aria-selected

現在選択された状態であることを示します。選択されたドットナビゲーションの値をtrueとしています。

aria-controls

指定した要素が値に指定した要素を制御することを示します。ドットナビゲーションにそれぞれ連番で値を割り振っています。

この中でaria-hidden、aria-selectedの値をJavascriptで変更します。
aria-hiddenはカルーセルがスライドしたタイミングで、aria-selectedはナビゲーションが選択されたタイミングで処理しましょう。