これからのWebサイトには必須！ウェブアクセシビリティの基本【実装編】
前回のブログで「ウェブアクセシビリティとは」「主な達成基準」などざっくり紹介しました。
今回はその続編ですが、ガチで達成基準チェックリストの試験基準を満たす内容を書いていくと、それだけでこのサイドスリーブログを乗っ取るボリュームになってしまう・・
ということで、アクセシビリティの四つの原則から最も基本的な「1. 知覚可能」について、実際にウェブサイトの制作を行う際のチェックポイントと代表的な実装方法を、これまたざっくり紹介します！
アクセシビリティの四つの原則
ガイドライン及び達成基準は、誰もがウェブコンテンツにアクセスして利用するために必要な土台となる、次の四つの原則を中心に構成されています。
1. 知覚可能
情報及びユーザインタフェースコンポーネントは、利用者が知覚できる方法で利用者に提示可能でなければならない。
2. 操作可能
ユーザインタフェースコンポーネント及びナビゲーションは操作可能でなければならない。
3.理解可能
情報及びユーザインタフェースの操作は理解可能でなければならない。
4. 堅牢性
コンテンツは、支援技術を含む様々なユーザエージェントが確実に解釈できるように十分に堅牢でなければならない。
この4つの原則の下にコンテンツ制作者が取り組むべき基本的な目標を定めた12のガイドラインがあり、さらにその下に61の達成基準があり、それぞれ A（最低レベル）、AA、AAA（最高レベル）の3つのレベルが割り当てられています。
1.1 代替テキスト
すべての非テキストコンテンツには、拡大印刷、点字、音声、シンボル、平易な言葉などの利用者が必要とする形式に変換できるように、テキストによる代替を提供すること。
【実装方法】
- img 要素に alt 属性を使用する
- 画像リンクに目的を説明する alt 属性を使用する
- 隣り合った画像とテキストリンクを同じリンクの中に入れる
【実装例】
HTML
- 1.
<img src="mobilesuit-red.png" alt="某氏専用の赤いモビルスーツ" />
- 2.
<a href="mobilesuit-list.html">
<img src="mobilesuit-list.png" alt="モビルスーツ一覧表" />
</a>
- 3.
<a href="mobilesuit-list.html">
モビルスーツ一覧表
<img src="mobilesuit-list.png" alt="" />
</a>
装飾用の画像やログ収集用の非表示画像、画像とリンクの目的を説明するテキストを同じリンクの中に入れる場合は、実装例- 3.のように alt属性値を空（alt=""）にして 、ユーザーに不要な情報を提供しないように設定します。
ちなみにalt属性の設定をチェックするには、Chromeの拡張機能「Alt & Meta viewer」が便利です。
こんな感じでブラウザ上でAlt属性と画像のサイズ設定を確認できます。
1.2 時間依存メディア
時間依存メディアには代替コンテンツを提供すること。
【実装方法】
- 音声のみのメディアと同等の情報をテキストでも提供する
- 映像のみのメディアと同等の情報をテキストでも提供する
時間依存メディアとは、映像（動画）や音声ファイルのことですね。
【実装例】
- 1. 歌や会話、スピーチなど音声のみの場合は歌詞や会話、スピーチ内容の書き起こしテキストを並べて掲載します。
- 2. 動画の概要や内容の書き起こしテキストを並べて掲載します。
1.3 適応可能
情報、及び構造を損なうことなく、様々な方法 (例えば、よりシンプルなレイアウト) で提供できるようにコンテンツを制作すること。
【実装方法】
- h1要素～h6要素を用いて、見出しを特定する
- リストには、ol 要素、ul 要素、dl 要素を使用する
- デザインの為の要素をHTMLで記載せず、cssを使用する
要は正しい構造に沿ったマークアップをしましょう、ということですね。
【実装例】
HTML
- 1. - 2.
<h1>モビルスーツ一覧表</h1>
<ul id="nav">
<li><a href="#">宇宙軍</a></li>
<li><a href="#">地球軍</a></li>
<li><a href="#">第三勢力</a></li>
...
</ul>
<div id="description">
<h2>宇宙軍とは</h2>
<p>
<img src="space-force.png" alt="宇宙軍本部外観">
</p>
<p>宇宙軍とは宇宙世紀を舞台とするスペースコロニーの...</p>
</div>
CSS
- 3.
ul#nav {
float: left;
width: 10em;
list-style-type: none;
margin: 0;
padding: 0.5em;
color: #fff;
background-color: #ff0000;
}
ul#nav a {
display: block;
width: 100%;
text-decoration: none;
color: #fff;
background-color: #ff0000;
}
div#description {
margin-left: 10em;
}
1.4 判別可能
コンテンツを、利用者にとって見やすく、聞きやすいものにすること。これには、前景と背景を区別することも含む。
【実装方法】
- リンクは文字色と周囲にあるテキスト（非リンク）とのコントラスト比を3:1 以上にする
- テキストの色の違いで情報を伝える場合は、視覚的な手がかりを補足する
- 色の違いで伝えている情報はテキストでも提供する
【実装例】
- 1. - 2.
- 3.
まとめ
今回ご紹介しているチェックポイントはいずれもレベル A の項目です。意外と実装方法は基本的な内容なので、html構文の基本に沿って丁寧に制作すればクリアできそうですね！
