2017年10月19日 Webコンテンツの推奨実装方法集「WAI-ARIA Authoring Practices 1.1」

UI開発者宇賀

Webサイトに登場するUIの中には、HTMLに予め用意されている要素だけでは対応しきれないものが少なからず存在します。

たとえば、ユーザーが閲覧しているページがサイト内のどの位置に当たるかを示すパンくずリストなどは、それ自体を表すための要素は存在していないことから、人によって異なるマークアップで実装されています。

JavaScriptウィジェットも同様に、モーダルウィンドウやカルーセル、タブUIなどを表すための要素が仕様に定義されていません。それらをセマンティック且つアクセシブルに制作するためには、WAI-ARIAの知識や複雑なキーボード操作を自力で実装する時間が必要です。

元々HTMLの仕様では想定されていなかったコンテンツに限らず、制作するコンテンツのベストプラクティスを知るというのは大切なことですが、第3者のエンジニアからコードレビューを受けられない環境で制作に取り組む場合や、経験が浅く、参考にするべき内容がわからない開発者にとっては、より一層重要になってくるでしょう。

WAI-ARIA Authoring Practices 1.1

WAI-ARIAの関連資料に、W3Cが公開している「WAI-ARIA Authoring Practices 1.1」というものがあります。

これはWebアプリケーション制作を行う上で登場する機能などの説明や、WAI-ARIAを用いる際の実装例などがまとめられている資料の草案です。状況によって妥当ではない場合も含まれているため、掲載されている例が絶対的に正しいというわけではありません。しかしそれを踏まえたとしても、（草案とはいえ）大変参考になる資料です。

たとえば、2.5 パンくずリストの項目には次のように記されています。

A breadcrumb trail consists of a list of links to the parent pages of the current page in hierarchical order. It helps users find their place within a website or web application. Breadcrumbs are often placed horizontally before a page's main content.

パンくずリストは、現在のページから親ページへのリンクを階層順に並べたリストであり、ユーザーが現在位置を見つけることを助け、メインコンテンツの直前に水平に配置されることが多いと書かれています。

機能の説明に加えて、exampleには実装例のコードと、「区切り記号はCSSで表示する」など、実装時のポイントが明記されています。

<nav aria-label="Breadcrumb" class="breadcrumb">
<ol>
<li><a href="../../">WAI-ARIA Authoring Practices 1.1</a></li>
<li><a href="../../#aria_ex">Design Patterns</a></li>
<li><a href="../../#breadcrumb">Breadcrumb Pattern</a></li>
<li><a href="./index.html" aria-current="page">Breadcrumb Example</a></li>
</ol>
</nav>

JavaScriptウィジェットのツリービューウィジェットのページ（Navigation Treeview Example Using Computed Properties）では、目的別にツリーウィジェットのページが用意され、挙動の詳細やどのようなキーボード操作をサポートしているかについても記載されているため、実装時に大変役立ちます。

他にも、アラートダイアログや、ボタンではないものをやむを得ずボタンだと認識させる方法なども掲載されています。実装例が準備中のままGitHubで議論が進められているものもいくつかありますが、Webコンテンツで登場する機能やコンテンツの概要と仕組みがまとめられているこの資料は押さえておいて損はないでしょう。