ガイドライン
iモードの音声読み上げを有効に利用していただくため、iモード対応HTML、XHTMLを作成するときに、特に注意していただきたい内容をガイドラインとして記載しています。
なお、優先度は２段階に設定されています。
ページの長さ
必要以上に長いページは、適切な長さにする。
| 問題点・理由 |
- 1ページが長いと、上下スクロールを多用することになり、操作が困難になります。また、1ページ全体の内容を把握することも困難となります。
|
| 対処方法 |
- 適切な長さにページを分割して下さい。
- ページ内リンクを設けて下さい。
(良い例）ページの最下部に「ページトップに戻る」リンクを設ける。
|
| 優先度 |
2 |
文章
長文の記述は避ける。
| 問題点・理由 |
- セクション区切りの無い長文の場合、画面上のフォーカス移動がわかりにくくなります。音声読み上げも長くなり、内容を把握しにくくなります。
- 句読点の無い1文は、音声読み上げ時に、読み上げの区切れがなく、聞取りにくくなります。
|
| 対処方法 |
- 1セクション（一度にフォーカスが当たる範囲）が長い場合、適度にセクション区切りを設けて下さい（セクション区切りとなるタグを入れて下さい）。
- 1つの文章が長い場合、適度に句読点を設けて下さい。
|
| 優先度 |
2 |
色
色彩のみで重要な情報を表現しない。テキスト等を併記する。
| 問題点・理由 |
- 音声読み上げでは、色の違いを判定し、読み分けることができません。色彩のみで情報の違いを表現すると、音声読み上げ時に、情報が伝わりません。
|
| 対処方法 |
- 色だけでなく、説明をテキストで加え、情報を識別できるようにして下さい。
|
| 優先度 |
1 |
ページタイトル
<title> タグを必ず記述する。
| 問題点・理由 |
- 音声読み上げでは、ページタイトルを最初に読み上げます。ページタイトルが不適切な場合、そのページの内容を把握しにくくなります。
- ページタイトルは、iモードの「ブックマーク」「画面メモ」の登録名となります。ページタイトルがないと、登録ページの内容がわかりません。
|
| 対処方法 |
- <title> で、各ページが判別できるようなページタイトルを指定して下さい。
-
|
| 優先度 |
1 |
ダイレクトキー
ダイレクトキー機能を指定する時は、そのキーに対応する推奨絵文字を使用する。
絵文字と記号
絵文字・記号を使用する時は、音声での読み上げかたを確認して使用する。
メニュー・文中に、意味の無い視覚的な装飾として、絵文字・記号を多用することは避ける。
| 問題点・理由 |
- 音声読み上げでは、読み上げられる内容が、コンテンツか装飾部分か判別できません。装飾として記号・絵文字が多く使用されていると、音声読み上げ時に、聞き取りにくく、かつ、内容が把握しにくくなる場合があります。
(装飾として記号を使用した例)
| 表示 |
→ |
「★★★★★★メニュー一覧★★★★★★」 |
| 音声(F672iの場合) |
→ |
「6個のくろぼしマークです」、「メニュー一覧」、「6個のくろぼしマークです」 |
| 音声(F880iESの場合) |
→ |
「6個のくろぼしマーク」、「メニュー一覧」、「6個のくろぼしマーク」 |
|
| 対処方法 |
- 絵文字・記号を装飾として用いる場合は、最小限にして下さい。
|
| 優先度 |
2 |
メニュー
メニューのリンクは、各メニュー項目全体につける。
| 問題点・理由 |
- 文頭の絵文字・記号のみリンクがある場合、リンクのある読み上げ文字数が少なく、音声読み上げ時に決定操作を行うことが困難です。また、リンク部分とメニュー名が、別セクションとして分れてしまい、リンクの内容がわかりにくくなります。
| (悪い例) |
●の部分にしかリンクがなく、決定操作が行いにくい。また、リンクのある「●」とメニュー名「ニュース」が別セクションとなり、「●」は『くろまる』と読み上げられるため、リンク先を把握しにくくなる。
表示 →「●ニュース」
ソース→「<A href=“./newsindex.html">●</A>ニュース」
音声 →「くろまる」、「ニュース」 |
|
| 対処方法 |
- メニュー項目文頭の絵文字・記号だけにリンクをつけないで下さい。
| (良い例) |
メニュー全体にリンクがあり、決定操作が行いやすい。また、メニューが1つのセクション(フォーカスが当たる単位)になっており、迷わない。
表示 →「●ニュース」
ソース→「 <A href=“./newsindex.html">●ニュース</A>」 |
|
| 優先度 |
1 |
メニューをカテゴリに分ける場合には、カテゴリ名を記述するとともに、カテゴリの切れ目を明確にする。
| 問題点・理由 |
- 音声読み上げでは、水平線(<HR>)の存在を読み上げません。また、メニュー全体を一覧できないため、カテゴリ名称がないと、メニューの構成が把握しにくくなる場合があります。
|
| 対処方法 |
- テキストでカテゴリ名を記述して下さい。
- 絵文字・記号を用いて、カテゴリの区切れを表現して下さい。但し、カテゴリ数が多い場合、絵文字・記号の部分が増え、音声読み上げ時に、内容が把握しにくくなる場合があることに注意して下さい。
- GIF画像等を用いてカテゴリの区切れを表現する場合、alt属性にカテゴリ名を示すテキストを指定して下さい。
（良い例）「1.特集」「2.ジャンル別」という名称でカテゴリ名を記述
|
| 優先度 |
1 |
リンク
リンクのある文字は、リンク先の内容を示す表現にする。
| 問題点・理由 |
- 「ここ」「こちら」等の指示語などでは、各リンクの違いやリンク先がどのようなものか伝わりません。
|
| 対処方法 |
|
| 優先度 |
2 |
リンクのある画像には、リンク先の内容を示すalt属性をつける。
| 問題点・理由 |
- 音声読み上げでは、リンク先がどのようなものか説明がないと、何の情報にリンクされているのか分りません。
|
| 対処方法 |
|
| 優先度 |
1 |
画像
画像には内容を示すalt属性をつける。
| 問題点・理由 |
- 音声読み上げでは、画像の内容の説明がないと、何の情報か把握することが困難となります。
【alt属性の読み上げかた】
| ●文字列の指定がある場合 |
→ |
「"alt属性で指定されたテキスト"」 |
| ソース |
→ |
「<IMG src="logo.gif" alt="ロゴの画像">」 |
| 音声 |
→ |
「ロゴの画像」 |
| ●文字列の指定がない場合 |
→ |
読み上げません |
| ソース |
→ |
「<IMG src="logo.gif" alt="">」 |
| 音声 |
→ |
読み上げなし |
| ●alt属性自体がない場合 |
→ |
「画像」 |
| ソース |
→ |
「<IMG src="logo.gif">」 |
| 音声 |
→ |
「画像」 |
|
| 対処方法 |
- alt属性で画像の内容を記述して下さい。
- 意味を持たない画像（箇条書きのポインタ等）や、テキストが併記されている画像には、alt=""と記述して下さい（""の間には何も入力しない）。
|
| 優先度 |
1 |
レイアウト
セクション区切りとなるタグは、視覚的なレイアウトのみを目的として使用しない。
| 問題点・理由 |
- 視覚的なレイアウトを、スペースやセクション区切りとなるタグを用いて行うと、音声読み上げ時に、ポーズ（読み上げの間）やセクション区切りが入り、内容が把握しにくくなる場合があります。また、セクション移動が多くなり、操作が困難になる場合もあります。
（悪い例）<BR>を用いてレイアウトした場合
表示 →「本日の最新
ニュース」
ソース→「本日の最新<BR>ニュース」
音声 →「本日の最新」、「ニュース」
|
| 対処方法 |
|
| 優先度 |
2 |
メールアドレス
メールアドレスはアカウント名、ドメイン名まで記述する。
※F880iESについては、以下事例においても、メールアドレスとして読み上げます
| 問題点・理由 |
- アカウント名を記述しないとメールアドレスと認識せず、正しく読上げられません。
(悪い例)
| 表示 |
→ |
「@docomo.ne.jp」 |
| 音声 |
→ |
「アットマークドコモエヌイージェーピー」 |
|
| 対処方法 |
- 必ずアカウント名を記述して下さい。
(良い例)
| 表示 |
→ |
「XXX@docomo.ne.jp」 |
| 音声 |
→ |
「エックスエックスエックスアットマークドコモドットエヌイードットジェーピー」 |
|
| 優先度 |
1 |
〜
、#、*を使用してください。また、推奨絵文字にもリンクをつけて下さい。 
情報」
」