MENU

WAI-ARIAとは

目次

WAI-ARIA(ウェイアリア)とは

Webコンテンツにおける情報アクセシビリティを確保した実装方法の名称です。
Web Accessibility Initiative – Accessible Rich Internet Applications」の略で、「ウェイ・アリア」と読みます。
WebアプリケーションやWebサービスがより複雑で動的なものになると、新しいアクセシビリティの機能と問題が明らかになってきます。
単にHTMLだけではなく属性を用いた実装をすることにより、スクリーンリーダー(画面情報の読み上げ音声ソフト)などの支援技術を用いてWebコンテンツに触れている障害を持つ方に対して、適切な情報を伝えられるようになります。

WAI-ARIA オーサリング・プラクティス 1.1
https://waic.jp/docs/2019/NOTE-wai-aria-practices-1.1-20190207/——————

関連する情報アクセシビリティに関する法令

「障害を理由とする差別の解消の推進に関する法律(障害者差別解消法)」が2016年4月1日に施行されました(2013年6月26日公布)。

法令の内容については、障害を理由とする差別の解消の推進に関する基本方針に触れられており、「障害を理由とする差別を解消するための支援措置」についても取り上げられています。

障害を理由とする差別の解消の推進に関する法律 – 内閣府
https://www8.cao.go.jp/shougai/suishin/law_h25-65.html

また、JIS X 8341-3:2016(正式名称『高齢者・障害者等配慮設計指針−情報通信における機器,ソフトウェア及びサービス−第3部:ウェブコンテンツ』)も同時期(2016年4月7日)に公開されています。

アクセシビリティを理解する

「アクセシビリティ」というものが体感的にはよくわからない場合は、まずはPCでスクリーンリーダーを一度使ってみると良いでしょう。
Windowsでは「ナレーター」という機能が標準搭載されています。

Microsoftサポート 第 4 章: テキストを読み上げる
https://support.microsoft.com/ja-jp/windows/%E7%AC%AC-4-%E7%AB%A0-%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%82%92%E8%AA%AD%E3%81%BF%E4%B8%8A%E3%81%92%E3%82%8B-8054c6cd-dccf-5070-e405-953f036e4a15—————–


また、Macに標準搭載されているVoiceOver機能では、トレーニング(チュートリアル)もついているので一度触ってみて、どのように画面が読み上げられるのか、障害を持つ方はどのように操作をしているのか、などを少しでも学ぶことは、Web制作者として大事な心掛けです。

VoiceOverを学ぶまでの手順

  1. 画面左上のアップルのマークを選択する
  2. 「システム環境設定…」を開く
  3. 環境設定パネルにある13項目の「アクセシビリティ」を選択
  4. 概要パネルにある「VoiceOver」を選択
  5. 「VoiceOverトレーニング…」のボタンを選択

この後は画面表示に従って、進めてみてください。少なからず今後の制作における要件定義や、コーディング作業において大事な考慮材料になることと思います。

WAI-ARIAの仕様

WAI-ARIAには様々な仕様が用意されていますが、おもに、

・これは見出しなのか、セクションなのかなどコンテンツの役割を表すためのrole属性
・表示されている/隠れているなどコンテンツの状態や、どこから参照されるのかなど性質を表すためのaria属性

の2つの属性が定義されています。

コンテンツに役割や性質、状態を明確に指定することで、コンテンツを読み取る支援技術はWebページやアプリケーション内の文脈を理解することができます。よってユーザーに情報を的確に提供する材料となりアクセシビリティが高まります。

Webページやアプリケーションが「だれもが情報にたどり着くことができる」、「より多くの人に使ってもらえる」コンテンツになるかは制作者の力量次第になっていきます。

実装上の注意点

role属性

role=”**”

要素の「役割」を定義します。

たとえば「フレームワークの仕様でdivタグしか使えない」といったような、適切なHTMLが使用できないときに効果があります。

<div role=”navigation”>サンプル</div>

また、HTMLタグだけでは実現できない役割もあります。たとえばroleの属性値にalertを設定することで「今のタイミングで重要な情報」という役割を付与できます。

<div role=”alert”>入力内容はエラーです。</div>

aria-label属性

aria-label=”**”

要素に「ラベル付けする文字列」を定義できます。ボタンや画像の意味・要素のラベルを設定します。

<button aria-label=”閉じる” class=”js_btn”>X</button>

<svg role=”img” aria-label=”画像の説明”>…</svg>

aria-labelledby属性

aria-label属性が値にラベルテキストを取ることの反対に、aria-labelledby属性はラベルになる要素のidを指定できます。

aria-expanded属性

要素、もしくは要素のグループが展開されているか、折りたためられているかの状態を示します。展開されている場合の値は「true」、折りたためられている場合は「false」になります。アコーディオンのときに使います。

aria-controls属性

要素が制御するidを値に指定し、制御する要素を明示します。今回だとアコーディオンの中身のidを指定できます。

aria-hidden属性

要素が表示であるか非表示であるかの状態を示します。表示されている場合の値は「false」、非表示の場合は「true」になります。

tabindex属性

要素がtabキーで選択できるかどうか制御します。
tabindex=”0″でタブ移動が可能となり、tabindex=”-1″でタブ移動ができなくなります。

実装上の注意点

必要以上にrole属性を指定せず、HTMLで解決できるのであればHTMLで対応しましょう。必要以上に設定しないことで実装効率が過度に下がるということはありません。

現代ではWebサイトやWebアプリケーションの構造は昔に比べて複雑なものが多くなりました。レスポンシブ化は当たり前のことですが、スマホなどの小さな画面に、ドロップダウンメニューやカルーセルを目にするようになりましたし、Ajaxでコンテンツを後から追加することもあります。

適切にWAI-ARIAを理解することで「誰でも」「簡単に」情報にアクセスできるような制作・開発をしていきましょう。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

肩書:Webプログラマー兼Webライター
名前:ゆいちゃん
経歴:ライド株式会社ではコーポレートエンジニアとしてWebサイトの開発・保守・運用を行う。
   ホテルマン、総合商社で勤務していた経験から顧客との対話は大切にしている。
   IT系と育児系の情報収集が得意。
保有資格:ITパスポート
使用言語:HTML/CSS, PHP
好きな言葉:Done is better than perfect.

目次