ページ制作のアクセシビリティ指針
優先度1



解説

CSSで文字に関する設定を行う時に、文字のサイズやフォントが柔軟に指定されていない場合、文字が小さすぎて読めなくなるなど、アクセシビリティ上の問題を起こす可能性があります。
例えば、文字サイズを、ptやmmなどの絶対値で指定すると、ブラウザや支援技術による文字拡大ができなくなる可能性があります。
また、フォント指定を特定のものに限定した場合、OSや機種によっては、文字が表示されなくなる可能性があります。


実例

  • 文字のサイズを指定する時は、pt(ポイント)やmm(ミリ)等の単位を用いず、emや% 等の相対的な単位を用います。
  • フォントは特定のものを指定しないほうが望ましいですが、指定する際にはモニタ画面での読みやすさに配慮して、明朝系ではなくゴシック系を用いるようにします。
  • 文字のサイズ、フォントに関する設定はHTML(XHTML)で行わず、CSSで行います。
フォントに関する実例。総合口座の見出しと、説明文のテキスト。

HTMLの記述例:

<p class="topText">給与等のお受け取り、公共料金等の...総合口座。</p>
	

悪い例:

CSS: 
p.topText {
                   font-size: 12pt;
                   line-height: 1.5cm;
                   font-family: "MS P ゴシック"
                 } 
	

良い例:

CSS: 
p.topText {
                   font-size: 1.2em;
                   line-height: 150%;
                   font-family: sans-serif;
                 } 
	

※ 「%」「em」などの単位は、相対的な大きさの単位であるため、ブラウザの文字拡大機能を利用すると、画面上の文字サイズも変更されます。
絶対値( 「pt」,「cm」など)を用いた場合、ブラウザの文字拡大機能が効かなくなる可能性があります。
フォントの指定方法には、 "MS P ゴシック"等、特定のフォントを指定する方法と、「グリフ(明朝体風のフォント)」など、フォントの特徴(総称ファミリ)による指定方法の2種類があります。
前者の場合、利用者のOSにインストールされていない場合に表示が不正になる可能性がありますが、総称ファミリで指定すると、インストールされているフォントの中から、最も近いフォントが選択されます。


当行における特記事項:

特に商品説明の中のご注意事項(特記事項)等、文章量の多いブロック、小さな文字で情報を提供する部分では文字サイズが変更できるよう注意する。



関連するJISの項目

5.6 a (必須)




アクセシビリティガイドライン トップ

このページの先頭へ戻る