アクセシビリティ --- Accessibility

現在、世界中にある Webサイトは20億を越えていると言われています。しかしながら、そのほとんどが体に障害を持つ人たちにとって、敷居の高い使いにくいページとなっています。

W3Cでは、1998年に WAI(Web Accessibility Initiative) ガイドライン を発表し、広く Web制作者たちに、ページ作成におけるアクセシビリティを呼びかけました。

アクセシビリティとは
あなたのサイトに訪れる訪問者の中に、もしかしたら目が不自由な方がいるかもしれません。あるいは、耳が聞こえない方や、両手が使えない方もいるかもしれません。
そうした「障害者」のために、点字や音声ブラウザ、テキストブラウザなどの非視覚系ブラウザが存在し、インターネットを身近なものにしています。しかしながら、ネット上にある Webページが、それらのブラウザに対応していなければ、「障害者」の方たちは情報から疎外されてしまうことになります。
HTML4.01では、文書内容をバリアフリーなページを作成するためのツールが盛り込まれています。アクセシブルなページを構築することはそれほど難しいことではありません。ほんの少しだけタイプする手間さえ惜しまなければ、多くの方から喜ばれる「優しい」ページにすることができるのです。
バリアフリーを確立する
アクセシビリティを向上させるために、以下の点に留意しましょう。
具体的な記述法
上記項目における具体的な HTMLや 、CSSの記述の仕方を示します。
alt属性の利用
会社のロゴを表示する場合、
<img src="logo.png" width="200" height="150" 
   alt="ばんばん株式会社">
この場合、会社の「ロゴ」をあらわしているので、alt="ロゴ" では、何のロゴだか分かりません。単に代替のテキストを記述すれば良いというわけではありません。画像の内容がわかりやすく伝わるテキストを考慮するようにしましょう。
フォントの大きさ
スタイルシートによるフォントの大きさを指定する場合には、相対値を用いるようにします。下記の絶対値(6pt)を指定すると、ユーザ側のブラウザ設定でフォントのサイズを変更することができず、読みにくい場合があります。
例えばここでは、8ポイントの絶対値 で設定した文字の大きさなので、ユーザ側でこの文字の大きさを変更することができません。そのため。文字の大きさは極力「相対値」で指定するようにしましょう。
相対値によるフォントサイズ
単位説明 実際の大きさ
xx-smallもっとも小さいフォントサイズ xx-small
x-smallより小さいフォントサイズ x-small
small小さいフォントサイズ small
smaller標準より一回り小さいフォントサイズ smaller
medium普通のサイズ(標準) medium
laeger標準より一回り大きいフォントサイズ larger
laege大きいフォントサイズ large
x-laegeより大きいフォントサイズ x-large
xx-laegeもっとも大きいフォントサイズ xx-large
%パーセント単位(標準を基本とする比率) 120%
em大文字の M を基本とするフォントサイズ 1.5em
ex小文字の x を基本とするフォントサイズ 3ex
ピクセル単位 (px) も相対値とされていますが、ユーザのモニターの性能に左右されてしまうことから、この表に入れていません。当サイトでは、すべて相対値を利用していますので、お好みの大きさに指定して利用することができます。
アクセスキーの設定
ナビゲーションにアクセスキーを設定すると、マウスが利用できない環境ではキーボードから簡単に目的のページに移動することができます。アクセスキーは任意の1文字を設定することができます。
<a href="index.html" accesskey="h">Home</a>
Windowsでは altキーと、Macintoshでは controlキーと一緒に押すことでリンクすることができます。ちなみに当サイトでは、ホームページに戻る場合、hキーをアクセスキーとして設定しています。
タブキーの設定
フォームを設定する場合、構成部品である各コントロールにタブキーを設定することで、ユーザはタブキーによってコントロール間の移動が楽に行えます。特にマウスが使えない環境では、非常に重宝する機能です。
<form action="/cgi/sample.cgi" method="post">
<p>
<label>お名前:
<input type="text" value="" size="20" tabindex="1" accesskey="a">
</label>

<label>   メールアドレス:
<input type="text" value="" size="20" tabindex="2" accesskey="b">
</label>
</p>

<p>
<input type="submit" value="送信" tabindex="3" accesskey="s">
<input type="reset" value="取消" tabindex="4" accesskey="r">
</p>
</form>
タブキーの指定できる値は、0〜32767の間の数字を指定し、小さな値から順に移動します。なお、アクセスキーとの併用が望まれます。
物理要素
テキストに用いられるタグの中には、物理タグと呼ばれるものがあり、ユーザのハード環境に依存する傾向があります。アクセシビリティの上からも物理タグの使用を避け、代替タグやスタイルシートの利用を強くお奨めします。
物理タグと代替タグ一覧
物理タグ説明代替タグ/CSS
b文字の強調strong あるいは em
iイタリック体CSS {font-style:italic}
fontフォントの大きさなどの指定CSS {font-size:medium}
u下線付き文字CSS {text-decoration:underline}
s抹消線付き文字del
ttテレタイプ文字code あるいは kbd
詳しくは、、CSSリファレンスの フォント をお読みください。
noscript要素
非視覚系ブラウザでは、スクリプトが実行できない場合があります。あるいは、視覚系ブラウザでも、スクリプトをオフにしているユーザも少なくありません。
どのような環境にあっても、ページの構成が正しくユーザに伝えられるように設計することが望まれ、HTML4.0から、noscript要素が加えられました。
<script type="text/javascript">
<!--
     スクリプトの記述
//-->
</script>
<noscript>
<p>あなたの環境では JavaScriptが実行できません。
  こちらのページにお進みください。
  <a href="another.html">代替ページ</a>
</p>
</noscript>
noscript要素内で、「なんだ、JavaScripができないのか、帰れ!」などと書いてはいけません。なお、スクリプトが実行できる環境では、noscript要素は実行されません。
フレーム
フレームを使用しないほうがいいのですが、どうしてもフレームという場合には、フレームが実行できない環境を考慮して、noframes要素を使って、代替ページに誘導するようにしましょう。特に非視覚系ブラウザはフレームが苦手とされています。
<frameset rows="110,*">
  <frame src="sampletop.html" name="top">
   <frameset cols="160,*">
     <frame src="sampleleft.html" name="left">
     <frame src="sampleright_01-2.html" name="right">
   </frameset>
   <noframes">
     <body>
      <p>申し訳ありません、このページはフレームになっております。
      フレームが実行できない場合には、こちらにお進みください。
      <a href="another.html">代替ページ</a></p>
     </body>
   </noframes>
</frameset>
決して noframes要素内で、「なんだフレームができないのか、帰れ!」などと書いてはいけません。
テーブル
非視覚系ブラウザ、特に音声ブラウザではテーブルの変換が大変苦手です。通常、非視覚系ブラウザではデータセルの左から右へ読み上げ、あるいは表示します。その場合、レイアウトに用いるテーブルでは、内容が正しく伝わりにくい状況になってしまう可能性があります。レイアウトに用いる場合には、テーブルの構造が適切に変換されるよう設計する必要があります。
また、テーブルがどのような表示内容になっているかを示す summary属性がありますので、構造内容が的確に説明できるテキストを埋め込むことをお奨めします。なお、この属性は、視覚系ブラウザでは無視されます。
<table cellpadding="0" cellspacing="0" border="1" 
    summary="テーブルの構造に関する説明">
ヘッダセル
テーブルのヘッダセルには、abbr属性を利用して、セルの内容を簡略化したテキストを指定し、音声ブラウザなどへ列の見出しとデータの対応を明確にします。
また、枠線を表示するテーブルでは、caption要素で、その表題を明示するように心がけましょう。
<table cellpadding="0" cellspacing="0" border="1" 
   summary="テーブルの構造に関する説明">
<caption>テーブルで利用するタグの一覧</caption>
<tr><th abbr="タグの種類">要素名</th>
    <th abbr="要素の働き">機能</th></tr>
音声ブラウザによっては、ヘッダセルで指定した abbr属性の内容を、その列のデータセルに移動しても繰り返し読み上げてくれる機能を持ったものもあり、その意味からもヘッダセルに設定することをお奨めします。
文書の前後関係
非視覚系ブラウザへのナビゲーションを高める効果として、ヘッダ内に文書の前後関係を示す記述があります。特にテキストブラウザでは、リンクとなって表示する機能がありますので、ユーザがサイト内で迷子にならずに済みます。
<link rev="made" href="mailto:banban@scollabo.com">  作者へのメール
<link rel="next" href="next.html">   次のページへ誘導
<link rel="prev" href="prev.html">    前のページへ誘導
<link rel="index" href="index.html">  索引のページへ誘導


This Page is HTML4.01 Valid! 初版公開日 2003年1月26日   最新更新日 2003年2月26日
Copyright(C) 2002〜2004 banban@scollabo.com