2016年はアクセシビリティの年！注目するべき3つのポイント
こんにちは、デザイン部でフロントエンドエンジニアをしている村岡です。
私は、前職の経験などを踏まえて、名刺に「アクセシビリティアナリスト」という肩書きも入れさせてもらっています。
今回は、2016年4月に施行される障害者差別解消法によって努力義務が課せられる、Webアクセシビリティの意識するべきポイントと重要性について書こうと思います。
Webアクセシビリティは機会損失を防ぐ
Webアクセシビリティは「障害者・高齢者対応」だと思っていませんか？
確かにそのような側面が強くありますが、本質は「状況・環境に依存せず、誰もが情報にアクセスしやすくすること」です。
近年では、一人で複数のデバイスを持ち、様々な環境で Web にアクセスすることは当たり前になりました。
このようにデバイスや環境が多様化していくと、音が出せない、画面が見えないなど、
一時的になんらかの機能が使用できなくなる場面が出てきます。
その瞬間は一時的な障害者であるとも言え、サイトがその時に使用できない機能に依存してしまっている場合、人はサイトを利用できず、他のサイトへ乗り換えていってしまうでしょう。
では、この問題を防ぐにはどうしたらいいでしょうか？
そこで登場するのがアクセシビリティです。 アクセシビリティに対応することで、機会損失を防ぐことができるのです。
では、アクセシビリティに対応するといっても具体的にどのようなことをすれば良いのでしょうか？
本格的に対応する場合は、ガイドラインに準拠する必要がありますが、まずは意識して対応できるところから対応していくことが大事です。
具体的に見てみましょう。
代替テキストが必要な箇所は、img 要素を使用して必ず alt を設定する
画像が情報を提供しているにもかかわらず、alt 属性で代替テキストを設定していなかったり、CSS で背景画像で置いてしまっていたりすると、画像を見ることのできないユーザーはその情報を得ることができません。
画像がその画像にしかない情報を含めている場合、img 要素でマークアップし適切な alt を設定しておくようにしましょう。
代替テキストが必要な例
画像がリンクとなっています。
このような場合、リンクラベルは画像のみのため、代替テキストによる情報の提供が必要になります。
<p><a href="hoge"><img src="img/banner.png" alt="DMM.com Presents 職人魂「好きなこと続けていたら職人やっていました」"></a></p>
代替テキストが必要でない例
上記の場合、画像のすぐ近くにあるテキストで画像に書かれている情報を説明しています。
このような場合に代替テキストを書き出してしまうと、同じ情報が2度読まれることになってしまうため、代替テキストは必要ありません。
仕様に沿ったセマンティクスな HTML コーディングを心がける
HTML は表示のためのものではありません。すべての要素にきちんとした意味があり、役割を持っています。
これを無視してコーディングした場合、検索ロボットや支援技術を使用してアクセスしている人は正しい情報を得ることができません。
悪質な場合はSEOにも大きな影響を及ぼすこともあります。そういった観点からも、セマンティクスなマークアップを行うことが重要です。
内容のない要素を置かない
内容のない空の要素はアクセシビリティ的にマイナスになるわけではありませんが、
必要でない限り、外部の API などを使用するうえで置かざるを得ない場合を除き、
できる限り設置しないようにしましょう。
HTML4 / XHTML1.x の感覚で要素を使用しない
HTML4 / XHTML1.x と HTML5 では、要素の意味が変わったものが複数存在します。（em、dl、strong など）
HTML4 / XHTML1.x の感覚でマークアップしてしまうと、意図しない意味合いになってしまう可能性があります。
HTML5 の仕様は、簡単にでも理解しておくようにしましょう。
正しいマークアップ順（文書構造）を常に意識する
デザイン上では横並びになっていても、マークアップ自体は縦並びです。
デザインに惑わされず、正しいマークアップを行っていくことが非常に大切です。
上記のようなレイアウトの時、どのようなマークアップをしますか？
画像が見出しとテキストに関連している場合、画像は見出しより後にマークアップされるのが適切です。
下記のようにするのが適切でしょう。この場合のCSSの指定方法も記しておきます。
HTML
<div class="lyt">
<div class="txt">
<h2>職人魂</h2>
<p>好きなこと続けていたら、職人やってました。</p>
<p>テキストテキスト…</p>
...
</div>
<div class="img">
<img src="img/hoge.png" alt="">
</div>
</div>
CSS
.lyt {
display: table;
width: 100%;
direction: rtl;
}
.lyt .txt,
.lyt .img {
display: table-cell;
direction: ltr;
}
.lyt .txt {
padding-left: 15px;
width: 100%;
}
画像が右に入る場合は、directionの指定を外し、.lyt .txt の padding-left を padding-right に変更します。
キーボード操作を意識する
キーボードを使用してサイトにアクセスする場合、フォーカス遷移ができなければサイトを利用することができません。
また、リンクに飛んだり、何かの機能を使用したりする場合も、すべてがキーボードで操作することになります。
JavaScript のイベント設定
JavaScript で要素にクリックイベントなどを設定している場合は次のいずれかを採用します。
もし次の方法を採用していない場合、キーボードではその機能を使用できません。
- a 要素でマークアップする
button[type=button]要素でマークアップするtabindex="0"を JavaScript でロード時にセットする- ホバーでアクションを起こす場合は、エンターキーの
keyupでも動作するようにする
フォーカスの移動
ポップアップ式でコンテンツを表示させる場合は、フォーカスの移動を意識するようにします。
フォーカスが移動しないと、キーボードユーザーは表示された要素のところまでたどり着かなくなるほか、環境によっては何が起こったのかも分からなくなってしまいます。
次のように移動することを意識しましょう。
- コンテンツ表示イベント：表示したコンテンツの最初のフォーカス可能な要素にフォーカスを移動
- コンテンツ非表示イベント：表示イベントを起こした元の場所にフォーカスを移動
フォームはラベル要素を使用する
フォームでありがちなのがラベルとフォームパーツが label 要素で紐付けられていないものです。
label 要素で紐付けられていない場合、支援技術を使用しているユーザーはそのフォームパーツが何についてのものなのかを把握することができなくなってしまいます。
また、ちゃんと紐付けられているとラベルもクリック領域に含まれるようになるため、ユーザビリティの向上にもつながります。
ちなみに、select 要素やラベルを持たないテキストボックスなどについては、title属性を設定することで支援技術ユーザーには何のフォームパーツなのかを伝えることができるようになります。
<tr>
<th><label for="text-01">名前</label></th>
<td><input type="text" name="name" id="text-01"></td>
</tr>
<tr>
<th>住所</th>
<td>
<p>
<select name="address_prefecture" title="都道府県">
<option>北海道</option>
...
</select>
</p>
<p>
<input type="text" name="address" title="市町村以下">
</p>
</td>
</tr>
まとめ
長くなりましたが、いかがでしたでしょうか？
上記のものを対応したからといって、ガイドラインの A等級を満たせるわけではありませんが、こうした部分的な対応をするだけでもサイトはアクセシブルになっていきます。
コンテンツを長生きさせるためにも。サイトの品質を保つためにも。
まずはできることから対応しましょう。アクセシビリティ。
※一部文章を修正しました。SNSなどでのご指摘ありがとうございました。（12/9）
