当事者が語る、アクセシビリティーを考慮したHTML・JavaScriptの書き方

HTMLとJavaScriptに関してアクセシビリティーを考慮したページ作りを考えいていきたいと思います。というのもあの検索大手のYahooがアクセシビリティーに真面目に対応してる様子を見つけまして、ウェーブが来たと1人で喜んでいる次第です。以下はそのページです。

https://about.yahoo.co.jp/csr/report/005.html

目に障害のある視覚障害者はかつて情報弱者と言われていました。テレビも見れない、新聞も読めない、あの子からのラブレターも読めない、そんなないないづくしな上に、ネットが普及してもパソコンが見れない、携帯が見えない、あの子からのメールも読めない、そんな状態が続いていたわけです。

ところが技術はますます進歩し、機械が喋るようになり、視覚障害者にも楽に情報を届けることが出来るようになりました。今や視覚障害者でも様々なデバイスを利用して、自分の意思で世の中の情報に触れることが出来るのです。今の流行りの曲は何だろう、世の中は何をつぶやいているのだろう、あの子とどこの店に行こう、そういった情報が自分の意思で得ることが出来るようになったのです。

ではこういった人たちはどうやってそのような情報にアクセスしているのでしょう。特に視覚障害者向けに作られたコンテンツではありません。健常者向けに作られたコンテンツにアクセスして、様々な情報を得たり書き込んだりほくそ笑んだりしているのです。それを可能にしているのがスクリーンリーダーと呼ばれるツールです。

そのようなスクリーンリーダーの1つが、iPadやiPhoneなどのIOS機器に標準搭載されているボイスオーバーです。ボイスオーバーは画面に表示されているアイコンや文字などを区別し、それらを利用者に声で知らせます。そのため利用者は例え目が見えなくても、画面に何が表示されているのかを認識し、様々な操作を行うことが出来るのです。

例えばWebブラウザーのサファリを開いた時を見てみます。サファリには戻るボタンや進むボタン、アドレス欄などがありますが、これらに触れるとボイスオーバーがボタン名を知らせてくれるのです。そこで利用者はトントンとダブルタップすることにより、そのボタンを押すことが出来るのです。

またボイスオーバーはボタンやリンク、テキストなどの順番を保持しています。例えばサファリなら戻るボタンが一番始めにあり、続いて進むボタン、それからしばらくまたいでアドレス欄となっています。利用者はこういった順番を正しく認識することで、左右フリック操作によりそれぞれの項目に移動できるのです。

またこういった順番は利用者の意思で飛ばすこともできます。一番手っ取り早いのはその辺をタップしてその場にある項目に飛ぶことでしょう。しかしこれははっきり言ってほとんどしません。なぜなら今画面がどうなっていて、どこをタップしたらどの項目に当たるかなんてさっぱり分からないのです。そのため大抵はもう1つの機能を使います。

それはローター操作と呼ばれる、2本指でネジを回すように画面をなぞることで、ジャンプする単位を変更する操作です。例えば見出しに設定すれば、、上下フリックにより見出しごとにジャンプできるようになるのです。この単位は見出しの他にリンク、画像、表などがあります。それらの中でも最もよく使うのが見出しごとのジャンプです。視覚障害者はこのようにIOSボイスオーバーを利用して、ネットを閲覧しているのです。もちろん、IOSボイスオーバー以外にもスクリーンリーダーは存在します。

さてそのように視覚障害者にとってありがたく便利なスクリーンリーダーですが、そもそもスクリーンリーダーはコンテンツ制作者ではありません。コンテンツの内容を完全に理解し、利用者をナビゲートしているわけでは無いのです。もし優秀な執事がそのサイトを30分ぐらい実際に使って内容を把握した後で、視覚障害者の側に座ってここにこういったのがあるよ、ここをクリックすればこれこれのページに行けるよ、なんていうことを言ってくれれば、それはとても使いやすいでしょう。しかしスクリーンリーダーは機械であり、そのコンテンツ制作者の意図を正確に汲み取ることは出来ないのです。

例えば画像1つにしてもスクリーンリーダーは画像解析技術なんて備えていないために、その画像が何を表し、何の意図でそこにあるかはさっぱりチンプンカンプンなのです。そのためスクリーンリーダーはこういった画像はその画像ファイルのURLを読み上げます。最近のURLは長くなる傾向にあるため、その度に利用者はその長ったらしいURLを延々聞かされた後、結局何のための画像だったのか分からずに終わってしまうのです。特にフラットデザインで画像がボタンに割り当てられていたりした場合は、利用者はそれがボタンであることすら気づかないでしょう。

こういったことを避けるためにも、画像にはALT属性を付与することが推奨されています。っこれはAlternate、つまり代替テキストを指定することにより、その画像が何であるのかをスクリーンリーダーに知らせることが出来ます。さらにALT属性は検索エンジンに拾ってもらいやすくするSEOにも有効とされています。特にサイト全体に使用されているグローバルナビゲーションや、コンテンツ内のボタンなどの重要な要素の画像にはALT属性は必須と言えるでしょう。

前述の画像に関した代替テキストの話は一般的に広く知られているところです。HTML解説サイトなどでもALt属性はスクリーンリーダーにも使用されていることが記されているでしょう。しかしあまり日の目を見ない重要な要素が存在します。それがH1、H2、H3などの見出しタグです。

そもそも健常者がサイトを使う場合、そのデザインからおおむねの構造を把握します。トップバーにはサムネイルやグローバルメニューがあり、サイドバーには各種ウィジェット類が並び、さらには色で大抵は目立たなくなっています。これらのことから健常者はそれらの項目はコンテンツの補佐であり、主要部分、つまり読むべき場所は中央だと分かります。

しかし視覚障害者はそもそもデザインが見えません。どこに主要部分があり、どれがメニューでどこを読めば良いのかさっぱり判別できないのです。そのため視覚障害者は大抵見出しタグを頼りにその構造を把握しようとします。スクリーンリーダーは前述のように見出しタグごとにジャンプすることが出来ます。その際スクリーンリーダーはその見出しタグのレベル、つまりH1なら見出し1、H2なら見出し2、H3なら見出し3と読まれます。

これがデザインも見えない視覚障害者が構造を把握するのにとても重要な要素なのです。例えば記事タイトルがH1で記されていたとすると、それ以下のH2、H3、H4はその記事内容に関するものだろう、H2が新着情報なら、それ以下のH3、H4、H5は新着情報に関したことだろう、と推測を立てるわけです。もしこのように見出しでしっかりと構造が組み立てられていれば、視覚障害者はデザインが見えなくても正しくサイト構造を把握することが出来ます。

なお以上は構造に関する話でした。続いて見出しタグバラバラ分割事件についても書きたいと思います。よくH1、H2、H3などの中に他のタグが入っていることが良くあります。これは見栄えを良くするためとても良いのですが、それが行き過ぎると見出しタグバラバラ分割事件が発生するのです。

例えばH2タグのな中にAタグが入っていたとします。主にリンク要素で見出しをクリックすることで他ページへジャンプさせたり、または隠していたコンテンツを開いたりなどの処理を入れるでしょう。これ自体は特に問題はないのですが、困るのはこれが見出しをバラバラに分割してしまった時です。例えば見出しの中で注目ワードの安室奈美恵のみにAタグが挿入されていたとすると、そこでスクリーンリーダーは見出しを分割して読んでしまうのです。そのため見出しジャンプの効果が薄くなり、操作上大変分かりにくくなるのです。

この見出しタグバラバラ分割事件は何もAタグに限ったことではありません。FONTタグやIタグ、Uタグなどもバラバラ分割事件の犯人になり得ます。そのため見出しタグの中は出来るだけスッキリさせておくととても使いやすくなります。

さて続いてメニューとメインコンテンツの順番についてです。多くはスタイルシートのFLOATを用いて段組されていることと思いますが、例えばfloat:leftとして目次を左に配置すると、HTML上は目次が先に入っていることとなります。その場合スクリーンリーダーは目次を先に読んでしまい、メインコンテンツは後回しにされてしまいます。ただ目次のみなら良いのですが、もしここに新着情報や連絡先、プロフィールや何やらゴチャゴチャしていると、視覚障害者はいつまでたってもメインコンテンツにたどり着くことは出来ません。そのためfloat:rightなどを用いてメインコンテンツが先に来るようにすればさらに使いやすくなるでしょう。

以上はHTMLに関した話でした。続いてJavaScriptについて見ていきたいと思います。

JavaScriptは複数項目を表示するような気のきいたダイアログはありません。そのためその代替としてレイヤーをかぶせてそこに選択項目を配置することがよく行われます。健常者が見た場合、何かをクリックすれば何か出てきたからここから選択すれば良いのか、よしやってやろうと腕をまくってそのダイアログを操作するでしょう。し視覚障害者はそもそも何が起こったのかさっぱり分かりません。音も無ければ指示も無いのですから、ダイアログが開いたことにすら気づかず相変わらず他の場所をさま酔い続けるのです。

そのためこういった場合は的確にナビゲートするのが重要です。具体的にはfocus関数を用います。例えばダイアログの先頭項目にフォーカスさせて、画面が切り替わったことを知らせるのです。そうすれば例えダイアログが見えなくても、次に何かを選択すれば良いことが分かります。なおフォーカスはAタグや、その他ボタンなどのコントロール部品に限られるようです。

以上、アクセシビリティーを意識したHTMLとJavaScriptについて、IOSボイスオーバーを使用している当事者が思いつくまま書いてみました。誰でも使いやすいアクセシビリティーを意識することで、感謝されるサイト作りをしていただけたらと思います。それではまた。