みなさん、サイト制作の時にアクセシビリティは考慮していますでしょうか。

きっと、SEO対策は日常的に行っているかと思います。

SEO対策は自発的に行いますし、周りから指摘されて改善していくこともあるでしょう。

しかし、アクセシビリティについては、目に見える結果が得られることが少ないため、周りから指摘されることがあまりありません。

マークアップエンジニアが、アクセシビリティの最後の砦、かもしれませんよ？

アクセシビリティとは

そもそもアクセシビリティとは、アクセスのしやすさのことです。

WEBサイトにおけるアクセシビリティは、情報へのアクセスのしやすさのことを意味します。

「WEBの本質は誰もがアクセスできることにある」と、W3Cの偉い人も言っています。

「誰もが」というのは高齢者、障害者は勿論のこと、周りの環境によるものも含まれます。

例えば、屋外の騒がしいところで動画を再生して音声が聞き取りにくかったり、音声を出すのが憚られる場所であったり、という状況は音声情報にアクセスし辛いと言えます。

とはいえ、環境を変えれば情報を取得することはできますので、より優先されるべきは高齢者と障害者へのアクセシビリティでしょう。

一般的に、アクセシビリティを改善する方法論として、視覚障碍者でも情報にアクセスしやすいようにする方法が論じられますので、本記事も例に倣って視覚障害者に焦点をあてて話を進めます。

みんなネットを使っている

視覚障害者（全盲、弱視、視野狭窄、色覚障害、など）の9割はネットを利用しているそうです。

＜障がいのある方々のインターネット利用率（平成24年）＞

	インターネットを利用している
視覚障害者	91.7%
聴覚障害者	93.4%
肢体不自由者	82.7%
障がい者全体	53.0%

引用元: 障害者によるインターネットの利用率

「目が見えなくてもネットを使えるの？」と思う方もいるかと思いますが、視覚障害者の方はスクリーンリーダーという画面の情報を読み上げるソフトを使ってパソコンを使っています。

ですが、実はスマートフォンも使っているのです。

スマートフォンのスクリーンリーダー

私自身、全盲の方はタッチデバイスだからスマートフォンは使えないであろうと、思っていました。（先入観はいけませんね）

実は、スクリーンリーダーはiPhoneやAndroidなどのスマートフォンでも利用できます。

iPhoneにはVoiceOverというスクリーンリーダーが標準で搭載されており、「設定」→「一般」→「アクセシビリティ」→「VoiceOver」から読み上げモードに変更することができます。

iPhoneが手元にある方は是非VoiceOverをオンにして、目隠しをして操作してみてください。

VoiceOverは、指で触ったところを読み上げてくれます。

読み上げられたところはフォーカスされている状態となり、その状態で画面を2回タップすると確定（実行）されます。

フォーカスされているのが、アプリのアイコンであればアプリが起動し、WEBサイトのリンクであればリンク先へ遷移します。

同じ要領で、ソフトウェアキーボードでの入力も行えます。

アクセシブルなサイトとは？

HTMLの基本に忠実なマークアップをしていれば、最低限のアクセシビリティは担保できると考えてよいでしょう。

スクリーンリーダーは、タグを認識して読み上げます。

例えば、buttonタグは「ボタン」と読み上げられます。

「ボタン」と読み上げられることで、ユーザーは「これを押したら○○が起きる」ということを認知することができるわけですね。

マークアップする際に、大体の機能はJavaScriptでタグにイベント登録をしますので、どのタグを使っても機能します。

そのため、divタグをCSSで装飾し、ボタンとして作成することもできますよね？

しかし、そうするとスクリーンリーダーが「ボタン」と読み上げてくれず、ユーザーが「押したらなにか起こるモノ」と認識できないかもしれません。

ボタンとして扱うものは、buttonタグでマークアップをするのがベターです。

また、SEO対策としてh1タグを記事の見出しに使っていないような場合をよく見受けられますが、これもアクセシビリティの観点から避けるべきです。

h1などの見出しタグは、スクリーンリーダーは見出しとして通知します。

ユーザーが「これが見出しだな」と思って聞いているものが、SEO対策の（ユーザーには）意味のない文章を聞かせてしまう、ということが起こりえます。

また、パソコンで操作している場合、tabキーで項目を移動することが多くありますし、各見出しのタグにジャンプするショートカットキーも利用されます。

h1タグなどが、記事の見出しに設定されていないとユーザーは「あれ？見出しの次が本文じゃない？」と混乱を招きかねません。

HTMLはマークアップ言語ですので、文章作成のフォーマットです。

文章構成として正しくマークアップすれば、自然とアクセシブルなサイトになるはずです。

アクセシビリティを補強するWAI-ARIA

アクセシブルなサイトはマシンリーダブルなサイトです。

マシンリーダブルとは「機械が読み取りやすい」という意味合いです。

HTMLのフォーマットはスクリーンリーダーも認識できるため、正しいタグでマークアップすれば、基本的なアクセシビリティは担保できます。

しかし、正しいタグを使うだけでは、各タグの役割や状態を通知することまではできません。

そこで、WAI-ARIA（Web Accessibility Initiative Accessible Rich Internet Applications）というW3Cが定義しているマシンにタグの役割を伝えるようにする機能を使用します。

Accessible Rich Internet Applications (WAI-ARIA) 1.1 日本語訳

例えば、クリックするとダイアログが表示されるボタンがあるとします。

その場合、「ダイアログを持っているタグですよ」とマシンに伝えるためにaria属性を使います。

<button type="button" aria-haspopup="true"></button>

aria-haspopup="true" でダイアログを持っているという意味になります。

また、ダイアログ自体には「このタグの役割はダイアログですよ」とマシンに伝えるためにrole属性を使います。

<div class="dialog" role="dialog"></div>

role="dialog" で役割はダイアログであるという意味になります。

このように、WAI-ARIAを使って各タグに役割や機能、状態を付与していくことで、より一層マシンリーダブルなサイトにすることができます。

最後に

アクセシビリティの話をする際に、よく障害者に焦点が当てられてしまうのは、あくまで一つの指標なのだと、私は思います。

冒頭にも述べました通り、音声を聞き取りづらい環境でみる動画は音声にアクセスし辛い状況ですが、聴覚障害の場合は常にその状態です。

マウスを操作をする方の手で何かを食べているときは、誰もがキーボードユーザーになりますが、マウスポインタ操作という細やかな動きができない高齢者や身体障害者は常にその状態です。

高齢者や障害者でもアクセシブルにする、というのはあくまで指標で、最終的なゴールは、よりよいユーザー体験を提供することです。

ではでは。