はじめに

情報アクセシビリティに関する法整備などの背景もあり、アクセシビリティの確保は、今後、エンジニアとして無視できない技術となってきました。

あなたがこれまで、アクセシビリティに対して、あまり興味のないマークアップ・エンジニア、フロントエンド・エンジニアだったとしても、HTMLとSVGの追加仕様であるWAI-ARIA（ウェイ・アリア）を理解すれば、Webサイトのアクセシビリティを強化できるのはもちろんのこと、CSS設計やJavaScriptでのUI実装の際にも、WAI-ARIAの考え方を役立てることができます。

このシリーズでは、実務での知見も織り交ぜて、WAI-ARIAの基礎知識と実装例を解説します。

情報アクセシビリティに関する法律施行

「障害を理由とする差別の解消の推進に関する法律（障害者差別解消法）」が2016年4月1日に施行されました（2013年6月26日公布）。法律本文はやや抽象的な内容ですが、この法律に対する政府の施策と考え方が示されている障害を理由とする差別の解消の推進に関する基本方針に、もう少し具体的な内容が述べられています。

その中では「情報アクセシビリティ」についても取り上げられており、Webの制作現場においても対応が求められるケースが出てくるでしょう。

実際、ピクセルグリッドでも、WebサイトやWebアプリケーションの改修や変更に伴って、法的な義務を背景にアクセシビリティの確保を行う実装を依頼されることがあります。

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

企業サイトの変化

こうした社会情勢の変化もあってか、企業サイトでもアクセシビリティへの配慮をしたサイトが見受けられるようになりました。たとえば味の素のトップページや三井住友銀行のトップページのカルーセルには停止ボタンが付きました。

カルーセルなどに対する停止ボタンに関しては、JIS X 8341-3:2016における「2.2.2 一時停止,停止及び非表示の達成基準」で述べられています。

皮肉なことに、JIS X 8341-3:2016のPDFは多くのブラウザで表示することができません。JIS X 8341-3:2016の元となっているWCAG2.0*でも同じ内容が確認できます。上記の「2.2.2 一時停止,停止及び非表示の達成基準」は（Pause, Stop, Hide）で確認することができます。

Auto-updating: For any auto-updating information that (1) starts automatically and (2) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it or to control the frequency of the update unless the auto-updating is part of an activity where it is essential.

自動更新： 自動更新される情報が、

（1）自動的に開始される かつ （2）他のコンテンツと切り替わりながら表示される

場合、ユーザーが一時停止、停止、非表示できる仕組みを製作者側が用意しているか？ （ただし、頻繁な更新自体が必須であるコンテンツは除く）

JIS X 8341-3:2016はWCAG2.0を日本語に翻訳した規格ですので、WCAG2.0自体を参考にしてもいいでしょう。

また、ソニーのサイトや、りそな銀行のサイトでは、role属性やaria属性が使われています（role属性やaria属性がどのような技術かということは後ほど解説します）。

このように、比較的大きな規模の企業を中心に、アクセシビリティに関連した技術実装が見られるようになっています。

さて、Webアクセシビリティといってもその領域は幅が広く、デザイン（色の使い方やレイアウトなど）、企画（コンテンツ構成やテキストの扱いなど）などさまざまな分野に関わってきます。しかし、アクセシビリティ確保ための方策の一つとして、私たちエンジニアが実装技術でカバーできる範囲もあります。

エンジニアが覚えておくべき技術仕様としては、WAI-ARIAとHTMLのマークアップがまず挙げられるでしょう。Webページだけが対象ではありません。Webアプリケーションの例として、YouTubeのDOMを見てみると、aria関連の属性が多数埋め込まれています。

今回は、WAI-ARIAについて、その仕様を解説し、次回では実装例を解説予定です。HTMLマークアップにおけるセマンティクス提供とアクセシビリティについては、過去に取り上げた「詳細HTML5のセクション セクションの理解を深める」も参考になるでしょう。

WAI-ARIA

WAI-ARIAは、Web Accessibility Initiative - Accessible Rich Internet Applicationsの頭文字であり、HTMLやSVGで利用できるアクセシビリティ確保のための属性の仕様です。

2016年9月の段階での、仕様としての最新はWAI-ARIA 1.0（2014年3月20日勧告）です。一方、WCAG2.0との互換性を図るために一部をアップデートしたWAI-ARIA 1.1が最新の草案となっていますので、こちらも合わせて参照するといいでしょう。

加えて、WAI-ARIAの使い方の解説やブラウザ開発者向けの実装例などのドキュメントも用意されており、これらはまとめてWAI-ARIA Suiteといわれています。

さまざまな関連仕様が用意されていますが、WAI-ARIAの本体仕様では、主に、

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

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

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

これらの属性がどのように機能するか、順を追ってみていきましょう。

役割を明示するrole属性

role属性は、コンテンツの役割を明示することができます。

もちろん、HTMLの適切なマークアップを利用していれば、タグで見出しやセクションの役割を明示することができます。しかし、HTMLは本来、ドキュメント（Webページ）のためのマークアップ言語であり、あらかじめ用意されている「意味」には限りがあります。また、同じくマークアップ言語であるSVGの要素は、図形描画が本来の目的であるため、HTMLの各要素のようにコンテンツとしての意味を与えることができません。

role属性には、HTMLよりもさらに多くの役割が用意されています。また、SVGを含むあらゆる要素に付与可能な属性です。

たとえば、本来意味を持たないdiv要素に対して、ナビゲーションとして振る舞わせたいのであれば、次のようにします。

<div role="navigation">...</div>

これと同じことは、専用のHTMLタグであるnav要素を使えば、もちろん実現可能です。

<nav>...</nav>

次のデモはroleがどのように機能するかの一例として、コードの読み上げを比較しています。読み上げにはNVDAというスクリーンリーダーを使用しています。

• 読み上げたHTML

<div>
通常のdiv要素
</div>

<div role="navigation">
ロールを使ったdiv要素
</div>

<nav>
nav要素
</nav>

div要素にrole="navigation"が指定されている場合とnav要素は「ナビゲーション ランドマーク*」と読み上げられます。

もちろん、SVGの要素にもrole属性は利用可能です。たとえば、図形をグルーピングする以外に意味を持たないSVGのg要素に対して、ナビゲーションとして振る舞わせたいのであれば、次のようにします。

<g role="navigation">...</g>

なんらかの制限上（たとえばJavaScriptライブラリとの相性など）で特定のHTMLの要素を利用できない場合であっても、role属性を利用することで、任意の役割を与えることができます。

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

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

次の音声は、音声読み上げソフトであるNVDAで以下のデモ内の「試す」ボタンを押した時の結果です。

この録音中に行った操作は次のとおりです。最初に、「先行テキスト、ボタン:試す、後続テキスト」の順でページ全体が読み上げられます。次に、私がボタンをフォーカスたため「試す」ボタンが読み上げられます。ボタン上でエンターキー押すと、すでにページ全体の読み上げが終了しているにも関わらず、「アラート:エラーなどのテキスト」と追加で読み上げが行われています。

上記の「試す」ボタンを押すと、視覚的に「後付けのテキスト」が後付けで展開されることがわかります。この「後付けのテキスト」にはalertのrole属性が設定されています。これにより、非同期で展開された要素であってもNVDAを使ってる場合には後から読み上げられるのです。

参考として、ソースコードは次のようになっています。

<p>先行テキスト</p>
<div id="container">
    <button id="button">試す</button>
</div>
<p>後続テキスト</p>

<script>
var $container = $( '#container' );
var $button    = $( '#button' );

$button.on( 'click', function () {

    $container.append( $( '<div role="alert">エラーなどのテキスト</div>' ) );

} );
</script>

role属性にはこのほかにも、アプリケーションで有用な属性値が仕様として多数用意されています。roleの全種類はW3Cの仕様書5.4. Definition of Roles（日本語訳）で一覧できます。

状態や性質を明示するaria属性

aria属性は、要素に状態や性質を明示することができ、用途に応じて多数の属性が用意されています。状態明示と性質明示の2つのタイプがあり、role属性における役割にさらに詳細な情報を与えることができます。

aria属性は、特にJavaScriptとの連携による動的なコンテンツで効果を発揮します。たとえば「ドロップダウン式のメニューが、今、開いているのか、閉じているのか」などの状態を明確に伝えることができます。

• 状態明示に関するariaは、多くの属性で、属性値にtrueかfalseを指定します。
• 性質明示に関するariaは、属性値に参照先のIDや数値または真偽値を指定します。

状態の明示

状態を示すaria属性の一つにaria-busyがあります。aria-busyは「何かを更新中である状態」として機能します。Ajaxでのロード中や、JavaScriptでの重い処理などでの利用が考えられます。処理中ならtrue、処理完了ならfalseを指定します。

<div class="LazyPlaceholder" aria-busy="true">読込中</div>

この他にも、コンテンツの展開／格納の状態を示すaria-expanded、選択状態を示すaria-selectedなど、さまざまな状態が属性として用意されています。

性質の明示

性質明示に属するaria属性の一つにaria-labelがあります。aria-labelはコンテンツのラベルテキストを明示するための属性で、HTMLのtitle属性と似た意味があります。ただし、title属性の内容はブラウザ上でツールチップとして表示されるのに対し、aria-labelにはそれはありません。

たとえば、アイコンフォントを利用する場合、要素が空になってしまうこともしばしばあります。そうした場合、aria-labelでラベルテキストを提供することができます。

<a href="http://pxgrid.com">
    ピクセルグリッド Webサイト
    <span class="Icon--window" aria-label="新しいウインドウで開く"></span>
</a>

この他にも、あるボタンがどの要素に対する制御なのかなどを明示するaria-controls、複数選択可能かを示すaria-multiselectableなど、さまざまな性質が属性として用意されています。

<a href="/admin.html" class="Link Link--disabled">管理者専用リンク</a>

<a href="/admin.html" class="Link" aria-diabled="true">管理者専用リンク</a>

.Link[aria-diabled="true"]{
    cursor: not-allowed;
    ...
}

role属性やaria属性を利用したコンテンツの作り方は次回解説するとして、今回はどんな属性が用意されているのかを知っておきましょう。実際にコンテンツを作る際には、仕様書にある属性郡から適切な属性を選択し、利用することになります。

aria属性はWAI-ARIAの仕様内「6.6. Definitions of States and Properties （日本語訳）」にすべてが一覧化されています。

まとめ

WebサイトやWebアプリケーションの構築は昔に比べて複雑になりました。たとえばモバイル端末などの小さな画面向けに、ドロップダウンメニューが登場する機会は増えていますし、Ajaxでコンテンツを後から追加することもあります。

しかし、こうした複雑な情報は正しく伝わっていない人や機械（検索エンジンなど）がいるかもしれません。WAI-ARIAは、アクセシビリティ確保のために定義されており、属性を追加することで、より正確に情報を届けることができます。

Webページ／アプリケーションが「だれもが情報にたどり着くことができる」、「より多くの人に使ってもらえる」コンテンツになるかは、エンジニアの力量で左右されます。派手さはなく、目には見えづらい効果ですが、あなたの実装に助けられる人もいるでしょう。アクセシビリティ関連の技術を扱えることは、エンジニアとしてのあなたのスキルになります。

次回は、実際に実装と合わせて利用方法について紹介したいと思います。