HTML5 Experts.jpが誇るエキスパートたちに、「UX」というテーマでインタビューするシリーズ第二弾です。

株式会社ミツエーリンクスCTO、そしてエキスパートNo.40の木達一仁さんに、「UXとWebアクセシビリティ」について聞いてきました。 「UXとWebアクセシビリティって、関連あるのかな？」なんて、自分で企画したにも関わらず無責任な疑問を抱える中、そんな疑問を吹き飛ばすような気付きをいただける貴重なインタビューでした。

alt属性からWeb Componentsのアクセシビリティまで、たっぷり聞いてきました！皆さんどうぞ、お楽しみください。

Webアクセシビリティについての現状

白石: 今日は、「UXとWebアクセシビリティ」というテーマでいろいろお話を伺いたいと思います。どうぞよろしくお願いします。

木達: はい、よろしくお願いします。

白石: まずはちょっと「UX」というキーワードは横に置いておいて、アクセシビリティに関する現状についてお聞きしたいです。アクセシビリティに関する意識は、Web業界全体で高まっていますか？

木達: 私の感じるところでは、特に高まってはいないですね。アクセシビリティに関する意識の向上に繋がるようなイベントなども、まだまだ不足していると思います。

白石: そうですかー、まだまだって感じなんでしょうか。

木達: ただ、良いニュースもあります。今度、ヤフーさんやビジネス・アーキテクツさんと、アクセシビリティやるぞ！祭りというちょっと変わった名前の（笑）イベントを開催するのですが、あっという間に満員になりまして。これは少し追い風かな、と。でも参加者のリストを見ると、（イベント参加の必要がないほど）既にアクセシビリティに詳しそうな方も結構いらっしゃるんですよね。そういう方々はもしかすると、「アクセシビリティを盛り上げたい」という思いで申し込んでくださったのかもしれません。どちらにしても、ありがたいことです。

　▲HTML5 Experts.jpエキスパート木達一仁さん

白石: いいですね！タイトルもゆるくて面白そうです。

木達: このように、意識を高めるべく民間主導で取り組み始めているほか、国が主導してアクセシビリティ対応を推進していこうという動きがあります。 例えば、総務省は「みんなの公共サイト運用モデル」をガイドラインとして公開、公的機関に対しアクセシビリティ対応を推奨しています。しかし、これはあくまで手引きでしかなく義務ではないので、強制力は弱い。

もっと強い枠組みを求める、法制化に向けた動きもあります。
国連が定めた障害者の権利に関する条約への批准に伴い、障害者差別解消法が制定されました。この法律は来年が周知期間で、再来年から施行されます。その基本方針に対し、私が副委員長を務めるウェブアクセシビリティ基盤委員会は、「アクセシビリティへの対応を怠ることは障害者差別にあたる」との観点から、内閣府に意見書を提出しています。

白石:アクセシビリティ対応が、法律でルール化されるかもしれないということですか。

木達: はい。ただ、法律に定められているからアクセシビリティに対応する、やらないと罰せられるから取り組むというのは、正直言ってちょっと意識低いよな、と思います。
Web技術者たるもの、Webのアーキテクチャが持つ可能性を最大化するためにも、アクセシビリティ向上には積極的に取り組んでいきたいですね。

白石: 啓蒙や法制化の他にも、ビジネス的なメリットを打ち出すことができれば、企業にとってもアクセシビリティ対応の動機付けになるのではと思います。ビジネスの観点からアクセシビリティを見た場合、どのようなポイントがありますか？

　▲インタビュアーHTML5 Experts.jp 白石俊平編集長

木達: アクセシビリティという概念は、コスト意識やROI（投資利益率）といった話題と相性がよくないと感じます。ビジネス的なメリットは確かにあるのですが、具体的にいくら儲かるから対応しましょう、とは言いがたいです。

CSR（企業の社会的責任）という観点からは、例えば沖電気さんは、昔からアクセシビリティ対応を行っていらっしゃいます。

海外では日本国内と異なり、アクセシビリティに対する意識は高まっていて、法律で対応が義務付けられている国もあります（編集部注: ウェブアクセシビリティ基盤委員会 障害者差別解消法の基本方針に関する意見書の後半に、海外各国の動向がまとめられている）。 それゆえ、グローバルビジネスを展開されている企業は比較的、アクセシビリティ対応に積極的ですね。

海外展開を行う企業にとっては、アクセシビリティ対応が国際競争力に関わる可能性がある…とも言えるかもしれません。

UXとWebアクセシビリティ

白石: ではいよいよ、UXというキーワードについても触れていきたいと思います。UXとアクセシビリティは、どのような関連がありますか？

木達: Webコンテンツを中心として考えると、ユーザがコンテンツにアクセスする前、アクセス中、アクセス後のそれぞれにUXがあります。アクセシビリティはその中でも、コンテンツにアクセスしている最中のUXに紐付いていると言えるでしょう。つまり、コンテンツのUIと密接に関連があります。UIがどれだけアクセシブルか、それがUXとアクセシビリティを考える上で重要ですね。

白石: なるほど。そして、WebのUIといえばHTMLですね。

木達: はい。WebのUIをアクセシブルにするなかで、必然的に「マシンリーダブル」^[1]なHTMLマークアップを目指すことになります。かつて、マシンリーダブルなHTMLマークアップを推し進める原動力となっていたのはSEOでした。検索エンジンのクローラを視覚を持たないユーザになぞらえ、クローラにとって解釈しやすいコードを書くことで、検索結果上のランキングを向上させようとしていたわけです。

しかし今後は、別の大きなトレンドが、マシンリーダブルなHTMLマークアップを目指す原動力になっていくでしょう。

[1]マシンリーダブル…人間ではなく、機械やプログラムにも読み取り可能なこと。

白石: と、いうと？

木達: デバイスの多様化です。ユーザーは既に、一つのWebコンテンツに対して様々なデバイスから様々な方法でアクセスするようになっていますし、今後その動きは加速していくでしょう。Webは、基本的にコンテンツをアクセシブルに提供できるよう設計されていますが、そのポテンシャルを最大化するためにも、アクセシビリティの確保は今後重要になってくるだろうな、と考えています。

現代ビジネスに掲載されていた古川健介氏へのインタビュー記事で、ハッとさせられた言葉があるんです。それは、インターネットにおける次の大きなトレンドは何か？という質問に対し、古川氏が「画面がなくなることだ」と答えていらっしゃったんですね。この将来予測はとても面白い。

もし画面がなくなってしまったら、Webを視覚以外で利用することが一般化するはず。ぱっと思い浮かぶのは、Webコンテンツ音声で読み上げてもらうことでしょう。そうなった場合、Webコンテンツがマシンリーダブルであることが（スクリーンリーダーなどのプログラムがWebコンテンツを読み取る必要があるので）非常に重要です。

白石: 確かに、デバイスによってはWebコンテンツへのアクセス方法は全く変わってきそうですね。Google Glassやスマートウォッチなどの、画面の非常に小さなデバイスも出てきていますし、そうしたデバイス上ではWebコンテンツは全く違った消費のされ方をするかもしれません。

木達: そうですね。多様なデバイスからアクセスされることを前提とした場合、アクセシビリティに配慮したWebコンテンツのほうが、高いレベルのUXを提供できるのは間違いないと思います。

HTML5はWebアクセシビリティを変えるか？マイクロデータは？JavaScriptは？Web Componentsは？

白石: HTMLの話が出たので、ちょっとこのまま、HTMLやJavaScriptなどのフロントエンド技術と、アクセシビリティの関係についていろいろ伺いたいと思います。例えば、HTML5ではWebページのアクセシビリティ向上が期待できる新しい要素がいくつも追加されました。例えばmain要素やnav要素が挙げられると思います。こうした要素が増えたことで、アクセシビリティの高いWebページを、Web制作者が自然と記述するようになった…といった変化はありますか？

木達: 新しい要素は既に普及し始めてはいるものの、ユーザーエージェントや支援技術の対応状況からすると、それでアクセシビリティが劇的に向上したという印象はまだありません。ただ、今後に期待はしています。例えばmain要素については、2012年のHTML5 Advent Calendarでも取り上げたのですが、非常に重要な要素です。main要素の登場以前は、Webページ内の「主要なコンテンツ」にアクセスする手段は、スキップリンク（ページ先頭などに仕込まれた、「本文へ」のような隠しリンク）や、レベル1の見出しを主要コンテンツの先頭に置くといった方法が取られてきました。main要素が登場したおかげで、ユーザーの「主要なコンテンツに素早くアクセスしたい」というニーズを、よりスマートに満たすことができるようになると思います。

白石: マイクロデータなどの、メタデータを表す技術はいかがでしょうか？アクセシビリティ向上に役立つ可能性はありますか？

木達: はい、それはありますね。ユーザーエージェントが意図した通りにコンテンツを解釈し、ユーザーに伝えてくれる可能性が高まります。

白石: 日付を表すデータの通知をスマートウォッチ上で受け取り、それをそのままカレンダーに登録するといったこともできそうですね。

木達: HTML5で新たな要素が数多く追加されましたが、無限に増やしていくわけにもいきません。そうなるとマイクロデータなどの、既存の要素に新たな意味を付与していける枠組みは重要になると思います。

白石: 「要素を無限に追加していけるわけではない」というお話で思いついたのですが、Web Componentsなら、要素を無限に追加することはできそうですね。Web Componentsとアクセシビリティの関係はどうなるとお考えですか？

木達: Web Componentsによるカスタム要素は、ブラウザ内部では既存の要素群に展開・処理されます。展開後の状態がアクセシブルである限り、影響はあまりないのではないか…と思います。ただちょっと心配なのは、「アクセシビリティへの配慮に欠ける、でもUIがカッコいい」みたいなカスタム要素が世界的に流行して、Web全体のアクセシビリティが低下してしまうような事態が起こらないといいな、と。カスタム要素を使う側からすると、カプセル化されたマークアップの質にはあまり注意を払わないでしょうから。

白石: 確かにそれは心配ですね…でもまあ、そのカスタム要素がバージョンアップすることで、一気にアクセシビリティが改善するということもあるかもしれませんし、逆に言えばアクセシビリティの高いコンポーネント群が流通すれば、容易にアクセシビリティに優れたWebサイトを構築できるようになるかもしれませんね。ちなみに、JavaScriptなどを用いた動的なUIであっても、アクセシビリティは確保できるものなのでしょうか？

木達: WAI-ARIA[2]を適切に実装している前提においては、大きな問題は起こりにくいでしょう。たとえばaria-liveプロパティを使って、JavaScriptなどにより動的に変更される部分を明示することができます。野球のスコアボードをHTMLで作ったとして、その点数が動的に変更された場合、変更部分の情報だけをユーザーに伝えることも可能です。

WAI-ARIAはいいですね。アクセシビリティを明らかに改善する技術です。正直なところ、大昔はWAI-ARIAの効果については懐疑的だったのですが、今は改心しました（笑）。

[2]WAI-ARIA…W3C内のWeb Accesibility Initiativeによって策定された、WebコンテンツやWebアプリケーションのアクセシビリティと相互運用性を向上させる技術。roleなどの属性をHTML要素に設定することで、UIのアクセシビリティを向上させることができる。W3C仕様

白石: なるほど、それは知りませんでした。JavaScriptを用いた動的なページを作って、アクセシブルにするには、そうした分野の知識も学んでおく必要があるんですね。

受託制作とUX

白石: ここまで、たくさんの興味深いお話をどうもありがとうございました。最後にまたUXの話題に立ち戻りたいのですが、先だってインタビューさせていただいた長谷川恭久さんが、日本固有の「Web制作の受託」という業態が、UXのトータルな改善を難しくしているという問題提起をされていました。木達さんが取締役を務めているミツエーリンクスも、Webサイトの受託制作を数多く手がけていらっしゃると思いますが、受託という立場からUXを改善していくという点にあたっては、どのようなご意見をお持ちですか？

木達: 案件にもよりますが、確かに、受託として入り込める限界というのはあります。やはり、お客様との距離が近ければ近いほうが、WebサイトのUX改善については実現できることが多い。例えば弊社では、社員がお客様のオフィスに常駐するようなかたち（オンサイト）でお仕事させていただくこともありますが、UXのトータルな改善という点から言うとそのほうが理想的です。制作部分だけではなく、運営全体をお客様と一緒になってやっていけますから。

また、お客様のサイトを運用するためのチームをミツエーリンクス社内に設置しているケース（オフショア）もあります。制作だけではなく、運用面についてもお任せいただける場合のほうが、やはりUXの改善に深く取り組めますね。

白石: 制作だけのお仕事の場合、運用のことを全く考えないマークアップをしてしまうことも防ぎにくいですしね。

木達: 社内の人間がそんなマークアップをしていたら、怒っちゃいますけどね（笑）。典型的な受託制作案件であっても、「運用のことを考えて作る」というのは日頃から心がけているつもりですし、コードに対するレビューをワークフローに組み込むことで、品質の担保は心がけています。ちなみに弊社では、基本的なアクセシビリティ対応については追加コストなしで提供するようにしています（プレスリリース「ウェブコンテンツ・アクセシビリティ・ガイドライン（WCAG）2.0への標準対応の開始について」）。Webページの品質という観点からすれば、最低限のアクセシビリティ確保は基本的な品質なので。

白石: UXについての、企業としての取り組みはいかがですか？

木達: 弊社にはUX部という専門の部署やユーザーテストスタジオと名付けた施設があり、ユーザビリティテストやユーザー調査を実施できる体制、環境を整えていますね。ユーザーテストスタジオでは、アイトラッカーを使ってユーザーの視線がどう動くかを調査したり、ハーフミラー越しにその様子を観察することができます。

白石: ユーザビリティテストのための専用の部屋があるんですね。見たい…（編集部注: この日はお部屋が終日使用中で、見せていただくことは適いませんでした。残念！）

「アクセシビリティが当たり前」の社会を作る

白石: 最後に今回のインタビューのまとめとして、一言いただけますでしょうか？

木達: 「いつ、誰が、どのようなデバイスを用いてWebにアクセスするかわからない」という時代は既に始まっています。そういう時代においては、アクセシビリティに配慮することが「いつでも、誰でも、どんなデバイスからでもアクセスしやすいWeb」につながり、ひいてはUXを向上させることにもつながります。

そして「アクセシビリティに配慮する」と言っても、難しく考える必要はありません。できることから確実に実践していけばよいと思います。例えば、まずはimg要素には適切な代替テキストをalt属性で指定するようにする…というだけでもよいのです。そうした個々人の行動が、「アクセシビリティが当たり前」の社会を作ることに繋がると思っています。

白石: 「アクセシビリティが当たり前の社会」、素晴らしいビジョンですね。HTML5 Experts.jpとしても、お手伝いできることは何でもさせてください！本日は、長時間に渡るインタビュー、どうもありがとうございました。

• HTML+RDFa 1.1
• RDFa 1.1 Core – Second Edition
• XHTML+RDFa 1.1 – Second Edition

RDFaとは、コンテンツのメタデータを記述するためのフォーマットであるRDF (Resource Definition Framework) を、要素の属性（attribute）で指定できるようにした仕様です。HTML Microdataと競合する仕様ですが、Microdataと異なり、RDFaは（もともとXML由来の技術であった）RDFの流れを組むため、XHTMLをはじめとするXML文書全般でも利用が可能であるなどの違いがあります（その代わりMicrodataのような、JavaScriptによるDOM APIは持ちません）。

例えば、RDFaを使用したマークアップは以下のようになります。

:html:
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Example Document</title>
  </head>
  <body vocab="http://schema.org/">
    <p typeof="Blog">
      Welcome to my <a property="url" href="http://example.org/">blog</a>.
    </p>
  </body>
</html>

同じメタデータを、Microdataを使用してマークアップすると以下のようになります。マークアップの手間はあまり変わらないように思います。

:html:
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Example Document</title>
  </head>
  <body itemscope itemtype="http://schema.org/Blog">
    <p>
      Welcome to my <a itemprop="url" href="http://example.org/">blog</a>.
    </p>
  </body>
</html>

ちなみに、RDFaのもろもろが勧告に至ったのに比べ、Microdataは未だにワーキングドラフト。仕様の成熟度で言うと、少しMicrodataに分が悪いか、というところ。

その他のサービスによる対応状況ですが、GoogleもBingも、MicrodataとRDFaの双方をサポートしています。また、OGPよりもMicrodataを優先することで知られているGoogle+が、RDFaに対応しているかどうかは、ちょっと調べきれませんでした。

少なくとも、Microdataもここまで普及している以上、RDFa勢に押されてすぐに駆逐されるということはあり得ません。 当面、安心して使えるテクノロジーと言ってよいのではないでしょうか。

追記（2013/9/2）

[エキスパートNo.18 矢倉 眞隆さん]から、この件に関して有用な追加情報をいただきましたので、以下に追記します。

Microdataについては、W3C HTML WGにより、7月23日に以下のような決定が下されています。

• HTML5.0の勧告候補から、Microdataへの参照を全て削除する
• MicrodataのJavaScript APIを仕様から削除する
• HTML Microdataという拡張仕様として公開し直す

JavaScript APIが削除されるに至った主な理由は、実装の欠如です。具体的には、FirefoxとOpera (Presto)が一度は実装したものの、OperaがChromiumに移行したため実装例が減ってしまい、勧告の条件（二つ以上の相互運用可能な実装が存在すること）を満たせるか怪しくなったというもの。 Blinkからはすでに実装が削除されており、Firefoxでも削除を検討中、WebKitからもMicrodataのAPIに関連するコードは削除されたそうで、MicrodataのJavaScript APIは実質上「終わった」と言っても良いかもしれません（ただし、WHATWG仕様においては、「代替案がない」という理由で仕様が残されることが決定しています）。