Webアクセシビリティ チェックしたい7つのポイント

2004年にJIS規格化されたWebアクセシビリティ（略語：a11y エーイレブンワイ）。
現時点ではJIS X 8341-3:2010というJIS規格があり、WCAG 2.0と同じ達成基準を採用しています。

アクセシビリティとは、

という定義があります。
具体的に何をすればいいのか？というのはJIS X 8341-3:2010のガイドラインにある達成基準を参考にするわけですが、その中からぜひ実践したい7つのチェックポイントをご紹介していきます。

ページタイトル

Webページの内容がわかるように記述する。

良い例
<title>2013年5月 | Webデザインリリック</title>
<title>Webアクセシビリティとは | Webデザインリリック</title>

Webページの内容を示すページ名とサイト名を併記します。
「ページ名」を前に記述するとよいでしょう。

悪い例
<title>Webデザインリリック</title>
<title>Webデザインリリック</title>

どのWebページも同一のサイト名しか記述されていません。

コーディング

HTMLのソースコードは次の4つの条件を満たすことが求められます。

• 開始タグと終了タグがある
• 同一の要素に同じ属性を複数用いない
• 仕様に準じて入れ子にする
• ID（id属性値）がユニークである

見出し

<h1>～<h6>

要素を用いて適切な見出しレベルでマークアップする。

画像

情報を伝えている画像にはalt属性を用いて代替テキストを提供する。

良い例
<img src="images/ally01.jpg" width="430" height="76" alt="web design lyric html/css/javascript" />

画像が伝えている文字情報をそのまま代替テキストに記述している。

悪い例
<img src="images/ally01.jpg" width="430" height="76" alt="web design lyric" />

画像が伝えている文字情報がすべて記述されていない。

色のコントラスト

文字色と背景色には4.5:1以上のコントラスト比を確保する。

簡単にコントラストをチェックすることができるツール
http://weba11y.jp/tools/cca/

フォーム・コントロール

フォーム・コントロールのラベルとなるテキストがある場合はlabel要素、ない場合はtitle属性を用いてラベルを提供する。

ラベル要素でのマークアップ
<label for="search">検索</label>
<input type="text" name="keyword" id="search">

ラベルとなるテキストがある場合はlabel要素を用いてマークアップする。

タイトル属性でのマークアップ
<input type="text" name="keyword" id="search" title="サイト内検索">

ラベルとなるテキストがない場合・追加できない場合はtitle属性を用いる。

キーボード操作

キーボードだけでも操作できるようにする。

• マウスで操作可能な機能全てをキーボードだけでも操作できる
• 意味のある並び順に沿ってフォーカスが移動する
• フォーカスを受け取っただけで、フォーカスが他の要素に移動しない

時代が代わっても技術が進化してもどのようにコンテンツを提供すべきかという根本にあるものは変わりません。
他にも色々なガイドラインがありますので時間のある時にぜひチェックしてみてくださいね。