ガイドライン

• 1ページが長いと、上下スクロールを多用することになり、操作が困難になります。また、1ページ全体の内容を把握することも困難となります。

• 適切な長さにページを分割して下さい。
• ページ内リンクを設けて下さい。
  （良い例）ページの最下部に「ページトップに戻る」リンクを設ける。

• セクション区切りの無い長文の場合、画面上のフォーカス移動がわかりにくくなります。音声読み上げも長くなり、内容を把握しにくくなります。
• 句読点の無い1文は、音声読み上げ時に、読み上げの区切れがなく、聞取りにくくなります。

• 1セクション（一度にフォーカスが当たる範囲）が長い場合、適度にセクション区切りを設けて下さい（セクション区切りとなるタグを入れて下さい）。
• 1つの文章が長い場合、適度に句読点を設けて下さい。

• 音声読み上げでは、色の違いを判定し、読み分けることができません。色彩のみで情報の違いを表現すると、音声読み上げ時に、情報が伝わりません。

• 色だけでなく、説明をテキストで加え、情報を識別できるようにして下さい。

• 音声読み上げでは、ページタイトルを最初に読み上げます。ページタイトルが不適切な場合、そのページの内容を把握しにくくなります。
• ページタイトルは、iモードの「ブックマーク」「画面メモ」の登録名となります。ページタイトルがないと、登録ページの内容がわかりません。

• <title> で、各ページが判別できるようなページタイトルを指定して下さい。

• ダイレクトキー機能指定時に、推奨絵文字以外を番号表示に使用すると、数字が複数回読み上げられ、聞取りにくくなります。
  （悪い例）

  表示	→	「1ニュース」
  ソース	→	「<A accesskey="1" href="./newsindex.html">1ニュース</A>」
  音声	→	「キーいち いち ニュース」

• 推奨絵文字〜、#、*を使用してください。また、推奨絵文字にもリンクをつけて下さい。
  （良い例）

  表示	→	「ニュース」
  ソース	→	「<A accesskey="1" href="./newsindex.html">&#63879;ニュース</A>」
  音声	→	「キーいち ニュース」

• 音声読み上げ時には、視覚的なイメージと異なる言葉で読み上げられ、意味が伝わらない場合があります。

  （悪い例）	視覚的には量的表現をしているが、読み上げ仮名が同一 表示 →「★★★☆」「★★★★」 音声（F672iの場合） →「3個のくろぼしマークです ほし」「4個のくろぼしマークです」 音声（らくらくホンシリーズ（注1）の場合） →「3個のくろぼしマーク ほし」「4個のくろぼしマーク」
  （悪い例）	視覚的には音符・音楽をイメージさせるが、読み上げかたが異なる 表示 →「情報」 音声 →「 "ムード"マーク情報」 絵文字の読み上げ内容については、絵文字読み上げ対応一覧表を参照。 注1：対象機種：F880iES, F881iES, F882iES, F883i, F883iES, F884i, F883iESS, F883iS, F884iES, F-07A, F-10A, F-09B, F-08C
  （悪い例）	ホームのページにもどる・ページトップに戻る・メール送信、の各機能を視覚的に表現しているが、読み上げかたが異なる 表示 →「」 音声 →「いえマーク」、「グッドマーク」、「ひらめきマーク」 絵文字の読み上げ内容については、絵文字読み上げ対応一覧表を参照。
  （悪い例）	単独した記号だけで表現をしない 表示 →「:;/は使用できません。」 音声 →「は使用できません」

• 読み上げ対応一覧表にて、読み上げかたを確認し、意味が正しく伝わる絵文字・記号を使用してください。
• 絵文字・記号を意図どおり読み上げない場合は、テキストで表現して下さい。
  （良い例）コロン[:]セミコロン[;]スラッシュ[/]は使用できません。

• 音声読み上げでは、読み上げられる内容が、コンテンツか装飾部分か判別できません。装飾として記号・絵文字が多く使用されていると、音声読み上げ時に、聞き取りにくく、かつ、内容が把握しにくくなる場合があります。
  （装飾として記号を使用した例）

  表示	→	「★★★★★★メニュー一覧★★★★★★」
  音声（F672iの場合）	→	「6個のくろぼしマークです」、「メニュー一覧」、「6個のくろぼしマークです」
  音声（らくらくホンシリーズ（注1）の場合）	→	「6個のくろぼしマーク」、「メニュー一覧」、「6個のくろぼしマーク」

• 絵文字・記号を装飾として用いる場合は、最小限にして下さい。

• 文頭の絵文字・記号のみリンクがある場合、リンクのある読み上げ文字数が少なく、音声読み上げ時に決定操作を行うことが困難です。また、リンク部分とメニュー名が、別セクションとして分れてしまい、リンクの内容がわかりにくくなります。

  （悪い例）

  ●の部分にしかリンクがなく、決定操作が行いにくい。また、リンクのある「●」とメニュー名「ニュース」が別セクションとなり、「●」は『くろまる』と読み上げられるため、リンク先を把握しにくくなる。 表示 →「●ニュース」 ソース→「<A href="./newsindex.html">●</A>ニュース」 音声 →「くろまる」、「ニュース」

• メニュー項目文頭の絵文字・記号だけにリンクをつけないで下さい。

  （良い例）

  メニュー全体にリンクがあり、決定操作が行いやすい。また、メニューが1つのセクション（フォーカスが当たる単位）になっており、迷わない。 表示 →「●ニュース」 ソース →「 <A href="./newsindex.html">●ニュース</A>」

• 音声読み上げでは、水平線（<HR>）の存在を読み上げません。また、メニュー全体を一覧できないため、カテゴリ名称がないと、メニューの構成が把握しにくくなる場合があります。

• テキストでカテゴリ名を記述して下さい。
• 絵文字・記号を用いて、カテゴリの区切れを表現して下さい。但し、カテゴリ数が多い場合、絵文字・記号の部分が増え、音声読み上げ時に、内容が把握しにくくなる場合があることに注意して下さい。
• GIF画像等を用いてカテゴリの区切れを表現する場合、alt属性にカテゴリ名を示すテキストを指定して下さい。
  （良い例）「1.特集」「2.ジャンル別」という名称でカテゴリ名を記述

• 「ここ」「こちら」等の指示語などでは、各リンクの違いやリンク先がどのようなものか伝わりません。

• リンク先を明示した表現にして下さい。

• 音声読み上げでは、リンク先がどのようなものか説明がないと、何の情報にリンクされているのか分りません。

• alt属性でリンク先を記述して下さい。

• 音声読み上げでは、画像の内容の説明がないと、何の情報か把握することが困難となります。
  【alt属性の読み上げかた】

  ●文字列の指定がある場合	→	「"alt属性で指定されたテキスト"」
  ソース	→	「<IMG src="logo.gif" alt="ロゴの画像">」
  音声	→	「ロゴの画像」
  ●文字列の指定がない場合	→	読み上げません
  ソース	→	「<IMG src="logo.gif" alt="">」
  音声	→	読み上げなし
  ●alt属性自体がない場合	→	「画像」
  ソース	→	「<IMG src="logo.gif">」
  音声	→	「画像」

• alt属性で画像の内容を記述して下さい。
• 意味を持たない画像（箇条書きのポインタ等）や、テキストが併記されている画像には、alt=""と記述して下さい（""の間には何も入力しない）。

• 視覚的なレイアウトを、スペースやセクション区切りとなるタグを用いて行うと、音声読み上げ時に、ポーズ（読み上げの間）やセクション区切りが入り、内容が把握しにくくなる場合があります。また、セクション移動が多くなり、操作が困難になる場合もあります。
  （悪い例）<BR>を用いてレイアウトした場合
  表示 →「本日の最新
               ニュース」
  ソース →「本日の最新<BR>ニュース」
  音声 →「本日の最新」、「ニュース」

• アカウント名を記述しないとメールアドレスと認識せず、正しく読上げられません。（悪い例）

  表示	→	「@docomo.ne.jp」
  音声	→	「アットマークドコモエヌイージェーピー」

• 必ずアカウント名を記述して下さい。 （良い例）

  表示	→	「XXX@docomo.ne.jp」
  音声	→	「エックスエックスエックスアットマークドコモドットエヌイードットジェーピー」

• F880iESにおいて、読み上げ設定をオフにするとページ末尾まで表示可能なページが読み上げ設定をオンにするとページ最初のMARQUEEブロックまでしか表示せず、かつ、その部分で「ページの終わり」と読み上げされてしまいます。

• MARQUEE要素の後には"空のPRE要素"を記載してください。【例1】
• 複数の連続するMARQUEE要素を記載する場合には一番後ろのMAQUEE要素の後にのみ"空のPRE要素"を記載してください。【例2】
• MARQUEE要素の後に"空のPRE要素"を記載する事に問題がある場合は、代わりにBR要素を記載するようにしてください。但し、この際にはMARQUEE要素と、次の要素もしくはTEXTの間に空行を生じるレイアウトとなります。【例3】
• MARQUEE要素の後ろに"空で無いPRE要素"を意図的に記述する場合は"空のPRE要素"を記載する必要はありません。【例4】

  【例1】	<MARQUEE>マーキー</MARQUEE> <PRE></PRE>
  【例2】	<MARQUEE>マーキー1</MARQUEE> <MARQUEE>マーキー2</MARQUEE> <MARQUEE>マーキー3</MARQUEE> <MARQUEE>マーキー4</MARQUEE> <PRE></PRE>
  【例3】	<MARQUEE>マーキー</MARQUEE> <BR>
  【例4】	<MARQUEE>マーキー</MARQUEE> <PRE> 意図したPRE </PRE>

• テーブルは左から右へと読み上げられます。文脈と読み上げ順が異なると情報の意味がつたわりにくくなります。

• 読み上げ順と文脈が合っているか確認してください。

• テーブルを読み上げる場合、表であるかないか条件判定を行い、それにより読み上げ方が異なります。

表とみなされない場合、表のタイトル・行列の位置情報・行列の結合情報が付加されず、的確に表の構造（何行何列目、等）が伝わらないことがあります。

• テーブルを表として利用するには、以下の2つの条件を満たすようにしてください。

  （1）border属性があり、かつ、border≠0の場合。
  （2）<td>だけでなく、<th>の記述がある。

• その表がどのようなものであるか読み上げられないと、読み上げ中の情報が表であることを把握できないことがあります。
  また、キャプションが不適切な場合、その表の意味を把握しにくくなります。

• <caption>に表のタイトルを指定してください。

• 表の入れ子やセルの結合、複数行への<th>の指定などを多用すると、表の構造が複雑になり、行や列の関係がわかりにくくなる場合があります。
  また、<caption>内にコントロール要素を入れると、表の構造が複雑になり、テーブル内の情報がわかりにくくなります。

• セルの結合は最小限に抑えてください。
• 複数行に渡り、<th>を指定することは出来るだけ避けてください。
• 表の入れ子は最小限に抑えてください。
• <caption>内にコントロール要素を記述することは出来るだけ避けてください。

• 表が大きな場合、表の構成がわかりにくくなります。各セルの行列情報も多くなり、内容を把握しにくくなります。

• 行数・列数は最小限に抑えてください。

• テーブルを表として読み上げる場合、セル内のセクションが多いと、情報が分割されて読み上げられるため複雑となり、内容を把握しにくくなります。

• セル内のセクション区切りは最小限に抑えてください。

• インライン再生モードの場合、コンテンツの内容は読み上げられません。コンテンツ内に特に重要な情報があっても情報が伝わりません。

• 重要な情報をインライン再生モードのFLASHコンテンツで提供する場合、HTMLページ内に同様の内容をテキストで記述してください。
  （意味のない視覚的な装飾として使用する場合は、必ずしもテキストを入れなくても良い）

• FLASHコンテンツとHTMLの読み上げ方は異なります。FLASHコンテンツに移行することがわからないと、操作に戸惑うことがあります。

• HTMLページ内にFLASHコンテンツであることを示すテキストを記述してください。