[]文の途中で改行やスペースを入れない
強制改行（<br>）
音声ブラウザの一つ「ホームページリーダー」では 強制改行（<br>）は文の区切りとして扱われます。
そこで、文の途中で強制改行を入れると予想外の場所で休止してしまいます。
強制改行は出来るだけ文中でつかわずブラウザに任せましょう。
どうしても強制改行する必要がある場合、文節の区切りで行いましょう。
[悪い例]
アクセシブルなサイトとは、使用して<br>
いるブラウザ・解像度・視力のよしあ<br>
しに関わらず、全ての人がアクセスで<br>
きるサイトのことです。
[良い例]
アクセシブルなサイトとは、使用している<br>
ブラウザ・解像度・視力のよしあしに関わらず、<br>
全ての人がアクセスできるサイトのことです。
スペース
<ul>
<li>経 済</li>
<li>政 治</li>
<li>スポーツ</li>
</ul>
スペースも文の区切りとして扱われます。
よって、上の例では「経済」は「けい、すみ」、「政治」は「まつりごと、おさむ」と読み上げられます。
そこで、スペースでレイアウトせずにcssのletter-spacingを用いてレイアウトしましょう。
ただし、文字の間だけでなく文字の最後にも空間が出来るので注意してください。
<ul>
<li style="letter-spacing: 2em">経済</li>
<li style="letter-spacing: 2em">政治</li>
<li>スポーツ</li>
</ul>
このページの先頭へ
TABLEを使う場合、音声ブラウザが読む順番を考える
以下のテーブルは音声ブラウザの読む順番をしめしたものです。
<table border="1">
<thead>
<tr>
<td>１</td>
<td colspan="2">２</td>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">３</td>
<td>４</td>
<td>５</td>
</tr>
<tr>
<td>６</td>
<td rowspan="2">７</td>
</tr>
<tr>
<td colspan="2">８</td>
</tr>
</tbody>
</table>
このことから分かるように 音声ブラウザの読む順番はHTMLコードの書く順です。
このページの先頭へ
ウェブページのタイトルについて
ウェブページの<head>部分に書かれる<title>は そのページの内容を要約したものにする必要があります。
タイトルはブックマークに追加したときや、検索エンジンでサイトを検索する時に重要です。
「ホームページリーダー」では、<title>が無い場合「無題 http://www.abc.co.jpを読み上げます」というメッセージを読み上げます。これでは、ページの内容が伝わらず良いページとはいえません。
ですから、<title>は [ウェブサイト名+そのページを要約した内容] にするといいでしょう。
トップページ <title>アクセシビリティ トップページ</title>
下位ページ <title>アクセシビリティ タイトルについて</title>
このページの先頭へ
ナビゲーション部分を読み飛ばせるようにする
ウェブページのナビゲーション部分は、音声ブラウザをもちいる場合、邪魔になる場合があります。
そこで、ナビゲーション部分を飛ばすリンクを記述することによって、読み飛ばすことが出来ます。
このリンクは、音声ブラウザだけでなくキーボードで操作する場合も有用です。
[表示しない設定]
<a href="#main" style="display:none;">ナビゲーション部分を読み飛ばし</a>
[表示する設定]
<a href="#main">ナビゲーション部分を読み飛ばし</a>
このページの先頭へ
ハイパーリンクな画像
「ホームページリーダー」では、画像にハイパーリンクがある場合 存在を音声で知らせます。
ALT属性でコメントが設定されている場合はその文字列を、ない場合はそこに記述されているリンク先のURLアドレスを読み上げます。
<a href="link.html">
<img src="link.gif" alt="リンク集" height="50" width="50" border="0">
</a>
画像の後に、コメントを書く場合はALT属性の中にスペースを入れることによってコメントの二重読みを防止できます。
[悪い例]
<a href="link.html">
<img src="link.gif" alt="リンク集" height="50" width="50" border="0">
</a>
リンク集
[良い例]
<a href="link.html">
<img src="link.gif" alt=" " height="50" width="50" border="0">
</a>
< a href="link.html">リンク集</a>
このページの先頭へ
ハイパーリンクではない画像
ハイパーリンクではない画像の場合、「ホームページリーダー」はALT属性がある時のみ、文字列を読み上げます。
その画像に意味がある場合、簡潔にかつ分かりやすくコメントを記述してください。
音声で聞いても意味のない場合はコメントをつける必要はありません。
[つける必要の無いコメント例]
写真・絵・ボタン・線
このページの先頭へ
リンクで新しいウィンドウを開かない
ブラウザには標準で新規ウィンドウを開く機能が提供さているので新規ウィンドウを開くかはユーザーにまかせましょう。
|
Windows |
Mac |
| InternetExplorer |
Shift+リンクをクリック |
command+リンクをクリック |
| Netscape |
Ctrl+リンクをクリック |
command+リンクをクリック |
| モジラ |
Ctrl+リンクをクリック |
command+リンクをクリック |
| Opera |
Shift+リンクをクリック |
|
このページの先頭へ
リンクであるボタン画像はリンクであることが分かりやすくすること
その物体がどのような情報を発信(アフォード)しているかを考える必要があります。
例えばボタンの場合、少し盛り上がっている画像を用いることにより その画像はクリックできるとユーザにアフォードすることが出来ます。
このページの先頭へ
このページの先頭へ
リンクの幅を狭くしない
リンクの幅が狭いと、弱視の人に見難くなります。また、リンクをクリックし難くなるので気をつけましょう。
[悪い例]
_
a
このページの先頭へ
ウェブページが何語で書かれているかHTMLで適切に宣言する
言語を言語コードで指定することにより、サーチエンジンや翻訳サービスに対して有用な情報を提供できます。
[HTML 4.01]
<html lang="ja">
[XHTML 1.0]
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
[XHTML 1.1]
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
途中で言語の種類が変わったときも宣言するようにしましょう。
<p lang="en">hello world</p>
| 言語 | 言語コード | 言語 | 言語コード |
| 日本語 | ja | 英語 | en |
| アメリカ英語 | en-US | コックニー方言の英語 | en-cockney |
| 韓国語 | ko | 中国語 | zh |
| フランス語 | fr | ドイツ語 | de |
| イタリア語 | it | オランダ語 | nl |
| ギリシャ語 | el | スペイン語 | es |
| ポルトガル語 | pt | アラビア語 | ar |
| ヘブライ語 | he | ロシア語 | ru |
| ヒンディー語 | hi | ウルドゥー語 | ur |
| サンスクリット語 | sa | ナヴァホ族の言語 | i-navajo |
| クリンゴン語 | x-klingon | 以下略 | |
このページの先頭へ
略語の定義
略語を使う場合 HTMLでは <abbr>と<acronym>というタグを用いましょう。
<abbr>は 略語全般を表します。
<acronym>は 単語の先頭文字を組み合わせて作られた略語で、一つ一つの単語として発音されるものです。
この二つのタグを用いることにより、将来 音声ブラウザの読み上げを制御出来るようになると思われます。
現在、<abbr>はNetscape6(Windows)以上 IE5.0(Macintosh)以上にしか対応していません。
このページの先頭へ
一般的では無い、流行語や俗語や略語はサイト内で定義しないかぎり使用は避ける
一般的でない用語の使用は誤解を招きやすくサイト観覧者の理解を妨げます。
流行語,俗語,略語,外国語の乱用には気をつける必要があります。
このページの先頭へ
画面の点滅(フリッカ)を避ける
ポケモンの事件では、アニメの画面の数秒の点滅により数百人の子供達が、光感受性発作を起こしました。
このことから分かるように、画面の点滅は危険なものです。できるだけ避けてください。
[ウェブコンテンツ・アクセシビリティ・ガイドライン 1.0]
光過敏性てんかんのある人は、特に１秒間に20回の点滅をピークとする１秒間に4〜59回(Hz)の点滅や（ストロボの光りのような）暗いものから明るいものへの急激な変化に対し、その明滅やフラッシュがきっかけとなって発作を引き起こすことがあります。
光感受性発作に関する臨床研究(厚生科学特別研究)
このページの先頭へ
リストの番号表記は音声では読み上げられないので注意すること
リストの番号は音声ブラウザでは読み上げられないので注意してください。
<ol>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ol>
このページの先頭へ
文字サイズを固定しない
弱視の方がおられる事を考えて作りましょう。ブラウザの「文字サイズの変更」機能を妨害しないでください。
小さい文字サイズへの変更は、必ず相対指定に。文字サイズは指定しないのが一番無難です。
[悪い例]
あ
あ
[良い例]
あ
あ
あ
[悪い例]
<span style="font-size:10pt;">あ</span>
<span style="font-size:10px;">あ</span>
[良い例]
<span style="font-size:120%;">あ</span>
<span style="font-size:2em;">あ</span>
<span style="font-size:large;">あ</span>
このページの先頭へ
DOCUMENT宣言をする
HTML・XHTML これらの規格とバージョンをブラウザなどのユーザエージェントに適切に理解させるために
DOCUMENT宣言を行うことが勧められています。
- Strict(ストリクト)は 厳格なW3C標準です。非推奨な要素や属性は使用できません。
- Transitional(トランジショナル)は 非推奨な要素や属性も使用できます。
- Frameset(フレームセット)は フレームを使うときの宣言です。Transitionalで動きます。
[HTML 4.01 Strict]
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
[HTML 4.01 Transitional]
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
[HTML 4.01 Frameset]
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
[XHTML 1.0 Strict]
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
[XHTML 1.0 Transitional]
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
[XHTML 1.0 Frameset]
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
このページの先頭へ
重要な意味を持つものには記号をもちいないこと
音声ブラウザでも分かりやすく読めるように、記号などは出来るだけ使わないようにしましょう。
[悪い例]
2002/1/1
\10,000
[良い例]
2002年1月1日
1万円
このページの先頭へ
大きなサイズの画像・ファイルをリンクするときは内容・ファイルサイズを記述すること
アナログ回線などの低速な通信回線を使っておられる方を配慮しましょう。
[良い例]
このサイトのHTMLファイル[zip形式・150KB]
このページの先頭へ
英単語の表記は出来るだけ 小文字で行うこと
音声ブラウザで読みやすくするためです
このページの先頭へ
ウェブページの横幅は可変にするか600pxもしくは760pxを超えないこと
ウェブページの横幅が大きすぎるとユーザがブラウザのサイズを変更しなければならない場合があります。
最近は、ディスプレイの解像度が上がってきているので大丈夫だと考えてる人もいますが、解像度とブラウザのサイズは関係が無いことに気付くべきでしょう。
ユーザがディスプレイの解像度を1600×1200で使っていてもブラウザを最大化しているわけではないのです。
ウェブページの横幅を固定する場合は、760px以上(800px - スクロールバー幅など)にならないように気をつけましょう。一行の文字数を考えて可読性が損なわれていないか考える必要があります。
多くの人は、ウェブページに書かれている文章を斜め読みします。文章は出来るだけ横に長くなり過ぎないように気をつけましょう。
このページの先頭へ
HTMLの構文を文字列として表示する場合特殊文字をもちいる
HTMLの構文を文字列として表示させる場合には特殊文字をもちいます。
特殊文字をもちいなければ"<"はタグの開始と解釈されてしまいます。
以下に重要だと思われる特殊文字をあげます。
| 文字 |
表記 |
コメント |
| & |
&又は& |
アンパサンド |
| < |
<又は< |
小なり |
| > |
>又は> |
大なり |
| |
又は&NDSP; |
半角空白 |
| © |
©又は© |
コピーライト |
| " |
"又は" |
ダブルクォーテーション |
このページの先頭へ
スプラッシュページを作らない
インターネットをもちいる人は、目的志向であるといわれています。
スプラッシュページを作るということは、目的の情報を得るためのドアを余計に設置することに繋がります。
このページの先頭へ
色やフォントサイズに依存しない
システムの環境の差・色弱
このページの先頭へ
|
