初版公開日 2003年1月26日 最新更新日 2003年2月26日
Copyright(C) 2002〜2004 banban@scollabo.com現在、世界中にある Webサイトは20億を越えていると言われています。しかしながら、そのほとんどが体に障害を持つ人たちにとって、敷居の高い使いにくいページとなっています。
W3Cでは、1998年に WAI(Web Accessibility Initiative) ガイドライン を発表し、広く Web制作者たちに、ページ作成におけるアクセシビリティを呼びかけました。
HTML4.01では、文書内容をバリアフリーなページを作成するためのツールが盛り込まれています。アクセシブルなページを構築することはそれほど難しいことではありません。ほんの少しだけタイプする手間さえ惜しまなければ、多くの方から喜ばれる「優しい」ページにすることができるのです。alt属性を用いて、適切な説明文を記述するnoscript要素を使って代替を用意するnoframes要素を用いて代替を用意するsummary属性を用い、適切に変換できるよう配慮するabbr属性などを利用して情報を盛り込むHTMLや 、CSSの記述の仕方を示します。<img src="logo.png" width="200" height="150" alt="ばんばん株式会社">
alt="ロゴ" では、何のロゴだか分かりません。単に代替のテキストを記述すれば良いというわけではありません。画像の内容がわかりやすく伝わるテキストを考慮するようにしましょう。| 単位 | 説明 | 実際の大きさ |
| 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) も相対値とされていますが、ユーザのモニターの性能に左右されてしまうことから、この表に入れていません。当サイトでは、すべて相対値を利用していますので、お好みの大きさに指定して利用することができます。<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>
| 物理タグ | 説明 | 代替タグ/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リファレンスの フォント をお読みください。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"> 索引のページへ誘導
初版公開日 2003年1月26日 最新更新日 2003年2月26日
Copyright(C) 2002〜2004 banban@scollabo.com