附録:アクセシビリティ

一貫した部分を増やし，メンテナンスを減らす

• スタイルシートは必要最小限に使用する。
• スタイルシートは文書に埋め込むよりも，外部ファイルとして使用した方がよい。インラインで使用することは避ける。
• 同じコンセプトのクラスが複数ある場合，全スタイルシートを通して同じクラス名を使う。

寸法の單位

スタイルシートのプロパティの値には，絶対的な大きさを表す単位ではなく，相対的な大きさを表す単位を使用する。

• フォントサイズを指定する場合は，単位として「em」を使う。
• 相対的な長さの単位とパーセンテージを使用する。CSSでは，絶対配置をする場合にも相対的な単位が使用できる。したがって，画像をそれを含む要素の上から「3em」の位置に配置することなどができる。これは固定された距離ではあるが，現在のフォントサイズに対して相対的であるため，それに合わせた程よい距離で表示される。
• 絶対的な長さの単位は，ビットマップの画像やプリンタなど，出力媒体の物理的特性がわかっているものに対してのみ使用する。

フォント

• 常に予備として総称フォント(generic font)を指定する（serif，sans-serifなど）。
• 表現をあらわす非推奨の要素や属性を使わずに，フォントの特徴をコントロールするためには次のようなCSSプロパティを使用する。
  • font-family, font-size, font-size-adjust, font-stretch, font-style, font-variant, font-weight
• フォントに関する情報をコントロールする場合は，次のCSS2プロパティを使用する。
  • font-family, font-size, font-size-adjust, font-stretch, font-style, font-variant, font-weight
• 代わりにCSSを使うべきHTMLの非推奨フォント関連要素と属性とは，次のものを指す。
  • FONT要素，BASEFONT要素，face属性，size属性
• もし，HTMLの要素でフォントに関する情報をコントロールしなければならない場合は，非推奨とされていないBIG要素とSMALL要素を使用する。

テキストスタイル

ユーザーエージェントで点滅(blink)に関する設定が可能になるまでは，内容を点滅させることは避ける（つまり，規則的に表示されたり消えたりというような表現は別の表現に変更する）。

テキストにスタイルを適用するには，以下のCSS2プロパティが使用できます。

• 大文字・小文字：text-transform（大文字・小文字・各単語の最初の文字のみ大文字）
• 影をつける：text-shadow
• 下線，上線，点滅：text-decoration 注意：もし内容を点滅させている場合（等間隔で見えたり消えたりする見出しなど）には，それを止めるための仕組を用意すること。CSSの場合は，「text-decoration: blink」と指定すると内容を点滅させるが，スタイルシートをオフにするかユーザースタイルシートで上書きすることによって，それを止めることができる。BLINK要素とMARQUEE要素は使わないこと。この２つの要素は，W3CのHTML関連のどの仕様書にも含まれていない（つまり標準の要素ではない）。

テキストの表示形式と配置

レイアウトや表現方法などを制御するにはスタイルシートを使う。

テキストの表示形式と配置を制御するためには，以下のCSS2プロパティを使用することができます。

• インデント：text-indent　テキストをインデントさせる目的で，BLOCKQUOTE要素やその他の構造を表す要素を使用しないこと。文字／単語の間隔：letter-spacing, word-spacingたとえば，「H E L L O」と書く代わりに，制作者は「letter-spacing」プロパティを「HELLO」というテキストに適用して同じ効果を得ることができる。間に空白を含まないテキストは，より適切に音声に変換される。
• ホワイト・スペース：white-spaceこのプロパティは，要素内容に含まれるホワイト・スペースの処理を制御する。
• 文字表記の方向：direction, unicode-bidi
• 「:first-letter」と「:first-line」疑似要素は，段落中の最初の文字や行に対してスタイルを適用したい場合に使用する。

レイアウト

• レイアウトや表現方法などを制御するにはスタイルシートを使う。
• テーブルをレイアウトのために使用しない。
• text-indent, text-align, word-spacing, font-stretch：これらの各プロパティを使用することで，余分な空白文字を追加せずに間隔を調整することができます。非推奨のCENTER要素は使用せずに，代わりに「text-align: center」を使用するようにしてください。
• margin, margin-top,margin-right,margin-bottom,margin-left：これらのプロパティを使用すると，「 」を追加しなくても要素内容の上下左右に空間を作り出すことができます。
• float, position, top,bottom,left,right：これらのプロパティを使用すると，ある意味では，その要素が文書中のどこにあるのかに関係なく，ほぼすべての要素の配置場所を制御することができます。制作者は常に，スタイルシートが適用されなくても意味が通るように文書を作り（つまり文書は論理的な順序で書かれているべき），その視覚的な体裁を整えるためにスタイルシートを利用してください。位置決めのプロパティは，脚注（自動的に番号を割り振ることも可能），サイド・バー，フレームのような効果，シンプルなヘッダやフッタなどを作るために使用することができます。
• empty-cellsプロパティを使用すると，画面上または印刷した場合に，テーブルのセルが空の状態でもその枠を適切に表示させることができます。空であるデータセルに対して，視覚的な効果を得るだけの目的でホワイトスペースや「 」を入れないようにしてください。

色

色のコントラスト

• 色を指定する場合には，色の名前ではなく数値を使う。

色を指定するには，以下のCSSプロパティを使用してください。

• color：文字(前景)色
• background-color：背景色
• border-color, outline-color：ボーダー，アウトラインの色
• リンク部分の色については，:link, :visited, :active の各疑似クラスを参照。

前景色（文字色）と背景色の組み合わせは，色の識別が困難な人やモノクロ画面を使用している人などに対して十分なコントラストをあたえるようにしてください。前景色を指定する場合は，常に背景色も同時に指定するようにしてください（逆も同様）。

すぐできるテスト方法１：その文書が色の無い状態でも機能するかどうかをテストするために，モノクロのモニタを使用するか，または色が表示されない状態でブラウザを使って検査してください。また，ブラウザの配色を白と黒，ブラウザセーフの４色のグレーのみを使用するように設定して，そのページを問題なく見ることができるか試してみてください。

すぐできるテスト方法２：色覚異常の人や低解像度のモニタを使っている人が見た場合でもコントラストが十分かどうかをテストするには，そのページを白黒のプリンタで印刷してみてください(その際，背景と文字がグレースケールで表示されるようにしてください)。また，印刷したものをコピー，そのコピーをさらにコピーと２〜３回繰り返して，その劣化した状態のもので更に確認してください。これによって，追加する必要のあるもの(ハイパーリンクは，ウェブページ上では通常下線が引かれている)や，小さ過ぎるもの，はっきりと見えないものなどが確認できます。

情報を色だけで表現しない

• 色によって表現されている全ての情報は，その色を再現できない環境でも得られるようにしておく（たとえば，前後関係やタグ付けなどによって）。

色だけを使って情報を伝えることのないようにしてください。たとえば，ユーザーに入力を促す場合に「以下の緑の項目の中から１つ選択してください」などとは書かないでください。そのような場合は，他のスタイル（フォント関連など）を利用したり前後関係（わかりやすくリンクするなど）からそれがわかるようにしてください。

メディアタイプ

CSS2のメディアタイプ(@mediaと共に使用)を使用すると，制作者とユーザーは対象とする装置上でより適切に表現されるスタイルシートを制作することができます。このスタイルシートを使用することによって，点字関連装置やスピーチ・シンセサイザ，TTY機器などの各装置向けの表現をしたコンテンツを用意しておくことができます。「@media」を使用することで，ユーザーエージェントはその装置に該当しない命令を無視できるようになるため，ダウンロード時間を減らすことにもなります。