【G-01】特定フォントのみの指定をしていない
font要素のface属性やCSSの指定で、特定のフォントを指定していないかどうかです。
フォント指定はOS、ユーザーの所有の有無によって意図していないフォントになる場合があります。なので、あえてフォントをHTMLで指定することをやめた方がよいでしょう。
【G-02】文字の大きさが適切である
本文として読ませるテキストに極端なサイズの指定をしていないか、またOSごとに文字の大きさが大幅に変わることがないかどうかです。
大きすぎても小さすぎても可読性は下がります。
【G-03】文字の大きさが変更できる
CSSでフォントサイズをpx指定していないかどうかです。
グラフィックデザイン上の理由などからCSSでフォントサイズを固定することは、ユーザーからテキストの大きさを変更する自由を奪ってしまうことがあるので、フォントサイズを固定することはやめるべきです。
※「Yahoo!ショッピング」店舗では文字サイズが固定となっておりますので、採点対象外項目となります。
【G-04】適切な区切りごとに空行がある
段落ごとに1～2行程度の空行を挟んでいるかどうかです。
ホームページのテキストは基本的に読みにくいものです。段落ごとの区切りをつけることにより、読みやすく、わかりやすくする効果があります。若干、通常の文章作法より、多めに区切りをつけた方がよいでしょう。
【G-05】専門用語をなるべく避け、ある場合は注釈がついている
専門的な用語が不必要に用いられていないか、どうしても必要な場合はそれに対する注釈があるかどうかを見ます。
専門的な商材や業界の専門用語の場合、一般ユーザーにとっては何のことかわからない場合が多々あります。またユーザーにとっては、元々モニターで見ること自体がストレスです。なるべく噛み砕いて専門用語を使わない方がよいのでしょうが、どうしても使わざるを得ない場合には、注釈をつけた方がよいでしょう。
取り扱う商品の名称も一般的には認知度の低い語句であることが多くあります。ニッチな商材については詳細な情報が必要です。
また専門用語、省略語、流行語、若者言葉、俗語なども認知度の低い用語やユーザーが理解しにくい用語の使用は避けるべきです。
【G-06】日付けの表記に日本語を使用している
日付を表記する際に、2005.1.1や1/1などにしていないかどうかです。
日付の表記は、スクリーンリーダーでの読み上げの際にとても重要です。きちんと"月"、"日"と指定することにより読み上げてくれますが、簡略表記の場合は適切に読み上げてくれません。
日付の表記は「2005年1月1日」という日本語表記にすべきです。
【G-07】適切な見出しが設定されている
文章のまとまりごとに、その大まかな内容などを連想させる見出しがつけられているかどうかです。
前述のようにモニターベースでテキストを読むことは、基本的に大きなストレスをユーザーに与えます。その文章を読みべきなのかなどを見出しなどによって判断させ、不要なストレスを与えないことは重要です。
【G-08】単語の途中に空白を入れていない
単語の途中に半角、全角スペースを入れていないかどうかです。
単語の途中に半角、全角スペースが入れてある場合、スクリーンリーダーで正しく読み上げられないことがあります。たとえば「経 済」と入力している場合、「けいざい」と読み上げられず「けい」、「すみ」と読み上げられることになります。
デザインで単語間に空白をあけたい場合は、CSSによる設定を行います。
【G-09】言語コード、文字コードが適切に設定されている
言語コード、文字コードが指定できる場合において、適切に設定されているかどうかです。
ウェブコンテンツで使用されている言語が適切に設定されていない場合、スクリーンリーダーなどで正しい読み上げが行われない場合があります。
日本語を使用している場合は、html要素のlang属性に日本語の言語コードである"ja"を記述します。
例）<html lang="ja">
また、ウェブコンテンツで使用している文字の文字コードを指定しておくことで、ブラウザの文字化けを未然に防ぐことができます。日本語の文字コードであるJISコード、シフトJISコード、EUCコードをhead要素内のmeta要素にて指定します。
例）<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
【G-10】行間が適切に設定されている
テキストが読みやすい行間幅が設定されているかどうかです。
行間を適切に設定することで、可読性が向上します。150%〜200%程度が読みやすいとされています。現状ではCSSで設定することになります。
