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

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

アクセシビリティとは、

Webを利用するすべての人が、年齢や身体的制約、利用環境等に関係なく、Webで提供されている情報に問題なくアクセスし、コンテンツや機能を利用できること

という定義があります。
具体的に何をすればいいのか?というのは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属性を用いて代替テキストを提供する。

ally01
良い例
<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属性を用いてラベルを提供する。

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

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

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

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

⑦キーボード操作

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

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

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

Comments

Comment Form

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です