WCAG 2.0 達成方法集

Skip to Content (Press Enter)

CSSの達成方法

このウェブページは、「WCAG 2.0達成方法集 : WCAG 2.0の達成方法と失敗例」におけるCSSの達成方法を掲載している。ウェブコンテンツ技術特有の達成方法は、「一般(General)」の達成方法に取って代わるものではない。コンテンツ制作者は適合に向けて作業する際には、「一般(General)」の達成方法とウェブコンテンツ技術特有の達成方法の双方を考慮に入れる必要がある。

ウェブコンテンツ技術特有の達成方法は、あらゆる状況で WCAG 2.0 の達成基準と適合要件を満たすコンテンツを作るために使うことができる技術を指しているわけではない。 コンテンツ制作者はその技術の限界に注意を払い、障害のある人にアクセシブルな方法でコンテンツを提供す必要がある。

達成方法についての情報は、WCAG 2.0 達成方法集のイントロダクションを参照のこと。他のウェブコンテンツ技術の達成方法一覧については、目次を参照のこと。




C6: 構造を示すマークアップをした上で、コンテンツを配置する

適用(対象)

CSS に対応しているウェブコンテンツ技術全て

これは、次の達成基準に関連する達成方法である:

解説

この達成方法の目的は、スタイルシートが適用されなくても意味の伝わる表現がなされるようにした上で、スタイルシートを使って見栄えをさらに良くする方法を示すことである。CSS2 の配置関連のプロパティを使用すれば、コンテンツを利用者のビューポート内の任意の位置に配置することができる。構造を示す要素を使っていれば、スタイルが適用されていない際でもコンテンツの意味は正しく伝えられる。

事例

事例 1

この事例では、コンテンツに対して構造(定義リスト)を示すマークアップがなされている。そして、コンテンツを段組み形式で表示させるために CSS が使用されている。コンテンツは各クラスの指定でそれぞれの段に絶対配置され、HTML の定義リストを表示する際に dd 要素をインデントするユーザエージェントのデフォルト値を上書きするために、マージンの値を 0 にしている。

表示させるコンテンツは以下の通り:

コード例:

<div class="box">
  <dl>
    <dt class="menu1">製品</dt>
    <dd class="item1">電話</dd>
    <dd class="item2">コンピューター</dd>
    <dd class="item3">ポータブル MP3 プレイヤー</dd>
    <dt class="menu2">所在地</dt>
    <dd class="item4">アイダホ</dd>
    <dd class="item5">ウィスコンシン</dd>
    </dt>
  </dl>
 </div> 

上記要素の配置及び表示指定をする CSS は以下の通り:

コード例:


.item1 {
   left: 0;
   margin: 0;
   position: absolute;
   top: 7em;
 }
 .item2 {
   left: 0;
   margin: 0;
   position: absolute;
   top: 8em;
 }
 .item3 {
   left: 0;
   margin: 0;
   position: absolute;
   top: 9em;
 }
 .item4 {
   left: 14em;
   margin: 0;
   position: absolute;
   top: 7em;
 }
 .item5 {
   left: 14em;
   margin: 0;
   position: absolute;
   top: 8em;
 }
 .menu1 {
   background-color: #FFFFFF;
   color: #FF0000;
   font-family: sans-serif;
   font-size: 120%;
   left: 0;
   margin: 0;
   position: absolute;
   top: 3em;
 }
 .menu2 {
   background-color: #FFFFFF;
   color: #FF0000;
   font-family: sans-serif;
   font-size: 120%;
   left: 10em;
   margin: 0;
   position: absolute;
   top: 3em;
 }
 #box {
   left: 5em;
   position: absolute;
   top: 5em;
 }  

スタイルシートが適用されると、データは「製品」と「所在地」の 2 段組みで表示される。スタイルシートが適用されない場合は、構造と読み上げ順序を保持した状態の定義リストとしてテキストが表示される。

検証

チェックポイント

CSS で表示位置を調整しているコンテンツに対して:

  1. 文書からスタイル情報を取り除く、又はユーザエージェントでスタイルシートを無効にする。

  2. 構造的な関係及びコンテンツの意味が保持されている。

判定基準

  • 2. を満たしている。

この達成方法が「十分な達成方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。


C7: リンクテキストの一部を非表示にするために、CSS を使用する

適用(対象)

CSSに対応しているウェブコンテンツ技術全て

これは、次の達成基準に関連する達成方法である:

解説

この達成方法の目的は、CSS をサポートするユーザエージェントによって画面に表示されないよう、リンクの一意の機能を記述する追加のテキストを追加し、そして追加のテキストをスタイリングすることによってリンクテキストを補うことである。表示されているリンクテキストの意味を理解するために、その前後の内容も読む必要がある場合、この達成方法を用いることによって、リンクテキストの表示は元の状態のままでありながら、リンクに対する十分な説明を提供することができる。

この達成方法を用いるには、まず、表示させないテキストを対象とする CSS セレクタを作成する。そのセレクタの規則集合では、overflow プロパティの値が hidden に指定された縦横 1 ピクセルのボックスの中にテキストが入るようにし、さらにそのテキストをビューポートの外側に配置する指定を入れる。これによって、テキストは画面上には確実に表示されなくなるが、スクリーンリーダーや点字ディスプレイなどの支援技術に対してはアクセシブルな状態を保持できる。ここで留意すべきは、画面に表示されなくなるだけでなく支援技術に対してもそのテキストを隠してしまうという意図せぬ影響が出る恐れがあるため、この達成方法では visibility:hidden 及び display:none を使用していないことである。

注記 1: リンクテキストを非表示にするこの達成方法は、スクリーンリーダーの利用者や企業のウェブコンテンツ制作者の一部によって支持されている。一部のウェブサイトにおいては効果があることも立証されている。しかし、結果的に説明が冗長になることがある上に、熟練したスクリーンリーダーの利用者にはその冗長な説明の読み上げを制御することを要求することもありうるため、スクリーンリーダーの利用者やアクセシビリティの専門家の中には、一般的な達成方法としてはこれを推奨していない人もいる。WCAGワーキンググループとしては、同じコンテンツが非表示にしたテキストで繰り返されていないのであれば、この達成方法は有用だと考えている。

注記 2: この達成方法は、適合していないコンテンツ向けの 適合している代替版のページで解説されているスタイル・スイッチングを行う達成方法との組み合わせで使用することも可能である。詳しい情報については、C29: 適合している代替版を提供するために、スタイル・スイッチャーを使用する及び適合している代替版を理解するを参照のこと。

事例

事例 1

この事例は、各記事の概要のあとに「全文」というリンクのあるニュースサイトを示している。非表示にされたリンクテキストが、何の「全文」であるのかを説明している。

コード例:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head>
<meta http-equiv="Content-Type" content="text/xhtml; charset=UTF-8" /> 
<link href="access.css" rel="stylesheet" type="text/css" />
<title>非表示のテキストリンク|WCAG 2.0 達成方法集
</head>
<body> 
<p>ワシントンは経済成長の刺激策を発表した。
  <a href="#"> <span>ワシントンによる経済成長の刺激策の </span>
  全文</a></p>
</body>
</html>

事例 2

この事例では、異なるフォーマットの電子ブックが用意されている場合について説明している。「HTML」「PDF」といったリンクのテキストの前に本の題名が付加されている。非表示にされたリンクテキストでは、何のHTMLファイルであるのか、何のPDFファイルであるのかを示している。

コード例:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head>
<meta http-equiv="Content-Type" content="text/xhtml; charset=UTF-8" /> 
<link href="access.css" rel="stylesheet" type="text/css" />
<title>非表示のテキストリンク</title>
</head>
<body>
<dl>
<dt>くまのプーさん </dt>
   <dd><a href="winnie_the_pooh.html">
      <span>くまのプーさん </span>HTML版</a></dd>
   <dd><a href="winnie_the_pooh.pdf">
         <span>くまのプーさん </span>PDF版</a></dd>
<dt>戦争と平和</dt>
    <dd><a href="war_and_peace.html">
      <span>戦争と平和 </span>HTML版</a></dd> 
    <dd><a href="war_and_peace.pdf">
      <span>W戦争と平和 </span>PDF版</a></dd>
</dl>
</body>
</html>

参考リソース

この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。

検証

チェックポイント

この達成方法を使用している各 a 要素に対して:

  1. 説明を付加するテキストを提供する要素のスタイルが、1 ピクセル四方の中に収められ、かつ「overflow: hidden;」の状態で表示領域の外側に配置されるように定義されている。

  2. そのスタイルが定義されている要素がa要素の中に含まれている。

  3. a要素の中のコンテンツを組み合わせると、何へのリンクであるかの説明になっている。

判定基準

  • 上記すべてを満たしている。

この達成方法が「十分な達成方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。


C8: 単語内の文字間隔を調整するために、CSS の letter-spacing プロパティを使用する

適用(対象)

CSSに対応しているウェブコンテンツ技術全て

これは、次の達成基準に関連する達成方法である:

解説

この達成方法の目的は、意味の伝わるテキストの流れを維持しながら、スタイルシートによって表示上の文字間隔を調整する方法を示すことである。 文字間隔の量を調整するには、CSSのletter-spacingプロパティを使用する。 単語の途中に空白文字を入れると意味や発音のされ方が変わってしまうため、間隔の調整はこの方法で行うことが推奨されている。

事例

事例 1: 単語内の文字間隔を広くする

以下のCSSは、レベル2の見出しに含まれる各文字に対して1文字分に相当する間隔を加える:

コード例:

h2 {	letter-spacing: 1em; }

マークアップは以下の通り:

コード例:

<h2>博物館</h2> 

表示結果は、およそ以下のようになる:

コード例:

博 物 館

参考リソース

この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。

検証

チェックポイント

文字間隔が標準ではない状態で表示されている各単語に対して:

  1. 文字間隔を調整する手段として CSS の letter-spacing プロパティが用いられている。

判定基準

  • 1. を満たしている。

この達成方法が「十分な達成方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。


C9: 装飾目的の画像を付加するために、CSS を使用する

適用(対象)

画像を表示させるために CSS が利用可能なウェブコンテンツ技術

これは、次の達成基準に関連する達成方法である:

解説

この達成方法の目的は、単に装飾することだけが目的の画像と、マークアップを追加することなくウェブコンテンツに対して視覚的な整形を行うための画像を追加する方法を示すことである。 これによって、支援技術がテキストではないコンテンツを無視することが可能になる。 文字サイズの拡大やハイコントラストの設定を妨げているCSSの背景画像を消すことができるように、一部のユーザエージェントでは、利用者の要求に応じて CSS を無視または無効にすることができる。

背景画像は、以下の CSS プロパティで表示させることができる:

  • background,

  • background-image,

  • content:before 又は :after 疑似要素と組み合わせて使用)

  • list-style-image.

注: この達成方法は、情報を伝えている画像、なんらかの機能を持っているような画像、主として知覚的なエクスペリエンスを作り出すことを目的としているような画像に対しては使用すべきではない。

事例

事例 1: HTMLページの背景画像

以下のスタイルシートは、ページ全体の背景画像を指定している。

コード例:

…
<style type="text/css">
body { background: #ffe url('/images/home-bg.jpg') repeat; }
</style>
</head>
<body>
…

事例 2: CSSによるロールオーバーの背景画像

以下のスタイルシートは、利用者がマウスポインタをリンクの上に置いたときの装飾的なロールオーバー効果を出すためにCSSのbackgroundプロパティを使用している。

コード例:

a:hover { background: #ffe url('/images/hover.gif') repeat; color: #000;
   text-decoration: none;
}

事例 3: タブなどの要素の角を丸くするために使われるCSSによる背景画像

以下のスタイルシートでは、要素の角を丸くするために、CSSのbackgroundプロパティを使用している。

コード例:

…
<style type="text/css">
 div#theComments { width:600px; }
 div.aComment { background: url('images/middle.gif') repeat-y left top; 
 margin:0 0 30px 0; }
 div.aComment blockquote { background: url('images/top.gif') no-repeat left top; 
 margin:0; padding:8px 16px; }
 div.aComment div.submitter { background:#fff url('images/bottom.gif') no-repeat left top; 
 margin:0; padding-top:30px; }
</style>
</head>
<body>
<div id="theComments">
 <div class="aComment">
  <blockquote>
   <p>やあ、ジョン。俺はこの達成方法がマジで気に入ったんで、自分のサイトでも使おうと思ってるんだ!</p>
  </blockquote>
  <div class="submitter">
   <p class="cite"><a href="http://example.com/">名無しさん</a> from エルボニア</p>
  </div>
 </div>
 <div class="aComment">
 …
 </div>
</div>
…

事例 4: 見出しの見た目を良くするために使用される画像置換

以下の例では、見出し要素の内容であるテキストを置き換えるために装飾目的の画像が使われている。【訳注:画像置換は達成基準1.1.1の不適合事例であり、このような見出し要素で使用すべきではない。WCAGワーキンググループにこの事例の削除を提案中。】

コード例:


<style type="text/css">
h3#about {
width: 480px;
height: 34px;
position: relative;
}

h3#about span {
background: url(about.gif) no-repeat;
position: absolute;
width: 100%;
height: 100%;
}
</style>
...

<h3 id="about" title="About example.com"> <span></span>example.com について</h3>

参考リソース

この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。

検証

チェックポイント

  1. 装飾目的の画像がある。

  2. それらが CSS で表示させられている。

判定基準

  • 1. に該当する場合に、2. を満たしている。

この達成方法が「十分な達成方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。


C12: フォントサイズにパーセントを使用する

適用(対象)

CSS

これは、次の達成基準に関連する達成方法である:

ユーザエージェント及び支援技術によるサポート

C12 に関するユーザエージェントサポートノート (英語)を参照のこと。

解説

この達成方法の目的は、ユーザエージェントがコンテンツを効果的に大きく表示したり小さく表示できるように、比率にもとづく単位でテキストのフォントサイズを指定することである。body 要素に対してフォントサイズを指定した場合、より個別的なセレクタで上書きされない限り、他の全ての要素に値が継承される。

事例

事例 1: CSS でのパーセントによるフォントサイズ指定

この事例では、どのような場合でも、strong 要素のテキストが周りのテキストよりも常に大きく表示されるように指定してある。そのため、親要素である見出しやパラグラフにフォントサイズが指定されていても、strong 要素でマークアップされた強調語は、周りのテキストよりも大きく表示される。

コード例:

strong {font-size: 120%}

...

<h1><strong>利用者</strong>がテキストサイズをコントロールできるようにする</h1>
<p>利用者だけが、テキストをどのぐらいのサイズにすれば彼にとって有意義かを知りうるのだから、
彼がテキストサイズを設定できるようにするのが<strong>とても</strong>重要である。   
…

参考リソース

この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。

検証

チェックポイント

  1. フォントサイズを指定している CSS プロパティの値がパーセントである。

判定基準

  • 1. を満たしている。

この達成方法が「十分な達成方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。


C13: フォントサイズにキーワードを使用する

適用(対象)

CSS

これは、次の達成基準に関連する達成方法である:

ユーザエージェント及び支援技術によるサポート

C13 に関するユーザエージェントサポートノート (英語)を参照のこと。

解説

この達成方法の目的は、設定したい相対的なフォントサイズを表現するキーワードでフォントサイズを指定することである。これらの値は、継承されたフォントサイズに応じて、ユーザエージェントが適切なフォントサイズを適用する手がかりを与えるものである。

事例

事例 1: CSSでのキーワードによるフォントサイズ指定

この事例では、どのような設定であっても、strong 要素のテキストが周りのテキストよりも常に大きく表示されるように、「larger」というフォントサイズが指定してある。親要素である見出しやパラグラフにフォントサイズが指定されていても、strong 要素でマークアップされた強調語は、周りのテキストよりも大きく表示されるだろう。

コード例:

strong {font-size: larger}

...

<h1><strong>利用者</strong>がテキストサイズをコントロールできるようにする</h1>
<p>利用者だけが、テキストをどのぐらいのサイズにすれば彼にとって有意義かを知りうるのだから、
彼がテキストサイズを設定できるようにするのが<strong>とても</strong>重要である。   
…

参考リソース

この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。

検証

チェックポイント

  1. フォントサイズを指定している CSS プロパティの値が、xx-smallx-smallsmallmediumlargex-largexx-largesmallerlargerの中のどれか一つである。

判定基準

  • 1. を満たしている。

この達成方法が「十分な達成方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。


C14: フォントサイズに em 単位を使用する

適用(対象)

CSS

これは、次の達成基準に関連する達成方法である:

ユーザエージェント及び支援技術によるサポート

C14 に関するユーザエージェントサポートノート (英語)を参照のこと。

解説

この達成方法の目的は、ユーザエージェントがコンテンツを効果的に大きく表示したり小さく表示できるように、em 単位でテキストのフォントサイズを指定することである。emはフォントのプロパティなので、フォントサイズの変更に応じてサイズが変わる。body 要素に対してフォントサイズを指定した場合、より個別的なセレクタで上書きされない限り、他の全ての要素に値が継承される。

事例

事例 1: CSS での em によるフォントサイズ指定

この事例では、どのような場合でも、strong 要素のテキストが周りのテキストよりも常に大きく表示されるように指定してある。そのため、親要素である見出しやパラグラフにフォントサイズが指定されていても、strong 要素でマークアップされた強調語は、周りのテキストよりも大きく表示される。

コード例:

strong {font-size: 1.6em}

...

<h1><strong>利用者</strong>がテキストサイズをコントロールできるようにする</h1>
<p>利用者だけが、テキストをどのぐらいのサイズにすれば彼にとって有意義かを知りうるのだから、
彼がテキストサイズを設定できるようにするのが<strong>とても</strong>重要である。   
…

参考リソース

この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。

検証

チェックポイント

  1. フォントサイズを指定している CSS プロパティの値が em 単位である。

判定基準

  • 1. を満たしている。

この達成方法が「十分な達成方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。


C15: ユーザインタフェースコンポーネントがフォーカスを受けとったときの表示を変更するために、CSSを使用する

適用(対象)

CSS、HTML 及び XHTML

これは、次の達成基準に関連する達成方法である:

ユーザエージェント及び支援技術によるサポート

C15 に関するユーザエージェントサポートノート (英語)を参照のこと。

解説

この達成方法の目的は、インタラクティブな要素がフォーカスされたとき、又は利用者がポインティングデバイスを使ってカーソルを上にのせたときに、スタイルシートを使って視覚的なフィードバックを返すようにすることで視覚表現がどれだけ強調されるのかを示すことである。 フォーカスされた要素又はカーソルが上にのせられた要素をハイライトすることで、その要素がインタラクティブであること、又はインタラクティブな要素の範囲内であるなどの情報を提供することができる。

複数のモードに対して視覚的なフィードバックを返すことが可能な場合もある。通常、それは要素の上にカーソルをのせるためにマウスを使ったり、又は要素にタブで移動するためのキーボードを使ったりする場合である。

事例

事例 1: リンク要素

この事例では、マウスやキーボードによってフォーカスされたことを示すスタイルが、リンク部分の要素に適用される。リンク部分の要素がフォーカスを受け取ったときに背景色を適用するために、CSS が使用されている。

表示されるコンテンツは次の通り:

コード例:

<ul id="mainnav">
  <li class="page_item">Home</li>
  <li class="page_item"><a href="/services">サービス</a></li>
  <li class="page_item"><a href="/projects">プロジェクト</a></li>
  <li class="page_item"><a href="/demos">デモ</a></li>
  <li class="page_item"><a href="/about-us">会社概要</a></li>
  <li class="page_item"><a href="/contact-us">問合せ先</a></li>
  <li class="page_item"><a href="/links">関連リンク</a></li>
</ul>

マウス又はキーボードでフォーカスを受け取ったときに、上記要素の背景色を変更するCSSは次の通り:

コード例:


#mainnav a:hover, #mainnav a:active, #mainnav a:focus {
  background-color: #DCFFFF;
  color:#000066;
}

事例 2: フォーカスを受け取った要素をハイライトする

この事例では、背景色を変更することによって、フォーカスを受け取ったときに入力フィールドのスタイルを変更するために :focus 疑似クラスが使用されている。

コード例:


<html>
  <head>
    <style type="text/css">
      input.text:focus {
        background-color: #7FFF00; color: #000;
      }
      input[type=checkbox]:focus + label, input[type=radio]:focus + label {
        background-color: #FF6: color: #000; 
      }
    </style>
  </head>
  <body>
    <form method="post" action="form.php">
      <p><label for="fname">名前: </label>
        <input class="text" type="text" name="fname" id="fname" />
      </p>
      <p>
        <input type="radio" name="sex" value="male" id="sm" /> <label for="sm">男性</label><br />
        <input type="radio" name="sex" value="female" id="sf" /> <label for="sf">女性</label>
      <p>
    </form>
  </body>
</html>

参考リソース

この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。

検証

チェックポイント

フォーカスを得られる各要素に対して:

  1. マウスを使って要素の上にカーソルをのせる。

  2. 背景又はボーダーの色が変化する。

  3. キーボードでフォーカスを与える前に、マウスを動かして対象からカーソルを外す。

  4. キーボードを使って、対象の要素にタブ移動する。

  5. 背景又はボーダーの色が変化する。

  6. その要素がフォーカスを失ったとき、背景又はボーダーの色が元に戻る。

判定基準

  • 上記、2, 5 及び 6 を満たしている。

この達成方法が「十分な達成方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。


C17: テキストを含むフォームの要素を拡大する

適用(対象)

(X)HTML, CSS

これは、次の達成基準に関連する達成方法である:

解説

この達成方法の目的は、ユーザエージェントによってテキストサイズが変更されたとき、テキストベースのフォームコントロールのサイズ変更を確かにすることである。これは、利用者によって必要とされるサイズでテキストが表示されるため、利用者がテキストを登録し、そして何を入力ボックスに登録したかを読むことができるであろう。

テキストベースのフォーム・コントロールは、ボタンと同様に入力ボックス(テキスト及びテキストエリア)を含んでいる。

事例

事例 1: コンタクトフォーム

お問い合わせフォームには、いくつかの初歩的な情報があり、利用者が自分の姓と名、電話番号、電子メールアドレスを入力するフォーム・コントロールがある。見出し、初歩的なテキスト及びフォーム・コントロールのラベルは、スケーラブルな方法で実装されているが、フォームのコントロール自体はスケーラブルな方法では実装されていない。

XHTML コンポーネント:

コード例:

<h1>お問い合わせ</h1>
<p>あなたの個人情報をご記入いただければ、できるだけ早くご連絡いたします。なお、すべての入力項目が必須項目となっております。</p>
<label for="fname">名</label><input type="text" name="fname" id="fname" /><br />
<label for="lname">姓</label><input type="text" name="lname" id="lname" /><br />
<label for="phone">電話番号</label><input type="text" name="phone" id="phone" /><br />
<label for="email">メール</label><input type="text" name="email" id="email" /><br />
<input type="submit" name="Submit" value="送信" id="Submit" />

CSS コンポーネント:

コード例:

h1 { font-size: 2em; }
            p, label, input { font-size: 1em; }

事例 2: ラジオボタン

この事例は、テキストサイズ機能のある IE で動作する。しかしながら、Firefox 2.0 では拡大されない。

XHTML コンポーネント:

コード例:

<input type="radio" name="r1" value="r1" id="r1" class="geomsize" />
<input type="checkbox" name="c1" id="c1" value="c1" class="geomsize" />

CSS コンポーネント:

コード例:

input.geomsize {
width: 1.2em;
height: 1.2em;}

検証

チェックポイント

  1. 利用者が入力したテキストを受け取るテキストベースのフォームコントロールにテキストを入力する。

  2. コンテンツのテキストサイズを 200 %まで増加させる。

  3. テキストベースのフォームコントロールのテキストが 200 %まで増加していることを確認する。

判定基準

  • #3 を満たしている。

この達成方法が「十分な達成方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。


C18: レイアウトデザインのためのスペーサー画像ではなく、CSS のマージンとパディング規則を使用する

適用(対象)

CSS をサポートするすべての達成方法

これは、次の達成基準に関連する達成方法である:

ユーザエージェント及び支援技術によるサポート

C18 に関するユーザエージェントサポートノート (英語)を参照のこと。

解説

ウェブデザイナーは、レイアウト、例えばテーブルまたは段落の字下げをよりよくコントロールするために、しばしばスペーサー画像(通常は 1 x 1 ピクセルの透過GIF)を使用する。しかしながら、カスケーディング スタイル シート(CSS)は、スペーサー画像を置き換えることで、レイアウトを十分によりよくコントロールすることができる。マージンとパディングの CSS プロパティは、レイアウトを制御するために単独または組み合わせて使用できる。マージンプロパティ(「margin-top」、「margin-right」, 「margin-bottom」、「margin-left」とショートハンドの「margin」)は、ブロックとして表示される任意の要素に使用でき、要素の外側にスペースを追加する。パディングプロパティ(「padding-top」、「padding-right」、「padding-bottom」、「padding-left」とショートハンドの「padding」)は、任意の要素に使用でき、要素の内側にスペースを追加する。

事例

事例 1

次の例は、二つの部品で構成されている。テーブルの全ての面にマージンとテーブルセルにパディングを指定している CSS コードと、スペース画像を含まず、他のテーブル内にネストされていないテーブルの HTML コード。

コード例:


              
              table { margin: .5em; border-collapse: collapse; } 
              td, th { padding: .4em; border: 1px solid #000; }
            
            ...
            
              <table summary="ウェブ開発カテゴリの本のタイトルと著者、出版日">
                <caption>「ウェブ開発」カテゴリーの本</caption>
                <thead>
                  <tr>
                    <th>Title</th>
                    <th>Author</th>
                    <th>Date</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>ウェブ標準について真剣に考える方法</td>
                    <td>Andrew Stanovich</td>
                    <td>2007年4月1日</td>
                  </tr>
                </tbody>
              </table>
            
            

参考リソース

検証

この達成方法に利用可能な検証はない。


C19: CSS でテキストの配置を左寄せ又は右寄せに指定する

適用(対象)

CSSをサポートする全てのウェブコンテンツ技術

これは、次の達成基準に関連する達成方法である:

解説

この達成方法は、CSSのtext-alignプロパティを使って、テキストのブロックを左または右に揃える方法を説明している。

事例

事例 1

以下の例では、テキストは左揃えになっている。スタイルシートでクラスを定義する:

コード例:

p.left {text-align: left}

コンテンツで、そのクラスを呼び出す。

コード例:

<p class="left"> Lorem ipsum dolor sit …</p>

事例 2

以下の例では、テキストは右揃えになっている。

コード例:

p.right {text-align: right}

コンテンツで、そのクラスを呼び出す。

コード例:

<p class="right"> Lorem ipsum dolor sit …</p>

検証

チェックポイント

  1. テキストが、左揃え又は右揃えになっている。

判定基準

  • 1.を満たしている。

この達成方法が「十分な達成方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。


C20: カラム幅に相対サイズを用いて、ブラウザの画面サイズを変更しても各行の文字数が平均 80 字(日本語は 40 字)以下を維持できるようにする

適用(対象)

CSS

これは、次の達成基準に関連する達成方法である:

解説

この達成方法の目的は、1 行が平均 80 字(日本語なら 40 字)以下になるようにして利用者がコンテンツを見ることができるように、CSS で指定することである。 こうすることで、テキストの長い行を読む際に、現在読んでいる位置を維持することが困難な読字障害や視覚障害のある利用者が、より効率よくコンテンツをを閲覧したり操作したりできるようになる。 この達成方法はまた、文字サイズの拡大に合わせてカラム幅を広くすることにもなり、それによって、文字サイズが大きくなるに従ってテキストの一部が欠けて読めなくなるような事態も発生しにくくなる。

この達成方法は、コンテンツ制作者に対して、CSS を使ってデフォルトでテキストの各行の幅を 80 字 (日本語は 40 字) 以下に制限することを要求するものではない、という点に注意してほしい。 それよりもむしろ、CSS レイアウトに相対サイズを用いることを推奨して、利用者が 1 行 80 字以下で読むことができないようなカラム幅には、設定しないようにする。

事例

事例 1

この例では、div 要素の幅はスタイルシートでem単位で指定されている。

注記: CSS プロパティの max-width は、Internet Explorer 6 以前のバージョンではサポートされていない。

コード例:

#main_content {max-width: 70em}

テキストのブロックは、コンテンツ内の div 要素の中に収められる。

コード例:

<div id="main_content"> 
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing ...</p>
</div>

事例 2

この例では、div 要素の幅はスタイルシートでパーセントで指定されている。

コード例:

#main_content {width: 90%}

テキストのブロックは、コンテンツ内の div 要素の中に収められる。

コード例:

<div id="main_content"> 
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing ...</p>
</div>

参考リソース

この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。

検証

チェックポイント

  1. カラム幅が、相対的な単位で定義されている。

  2. 行の長さが、ブラウザのウィンドウをリサイズしても 80 字(日本語は 40 字)以下を維持している。

判定基準

  • 1. 及び 2. を満たしている。

この達成方法が「十分な達成方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。


C21: 行送りを CSS で指定する

適用(対象)

CSSをサポートする全てのウェブコンテンツ技術

これは、次の達成基準に関連する達成方法である:

解説

認知障害を持つ人の多くは、行間なしのテキストのブロックの中で各行を目で追っていくことに困難を覚える。 行の高さが文字サイズの1.5~2倍程度あると、前の行を読み終えて次の行へより簡単に読み進めていけるようになる。

事例

事例 1

要素の行の高さを1.5に設定。スタイルシートで要素の特性を設定している。

コード例:

p { line-height: 150%; }

コンテンツ側では、その要素はドキュメント全体を通して行の高さが1.5になる。

コード例:

<p> Lorem ipsum dolor sit …  </p>

事例 2

クラスを指定した要素の行の高さを1.5(行送り1.5文字)に設定。スタイルシートでクラスの表示を定義。

コード例:

p.tall {line-height:150%}

コンテンツ側では、以下のようにクラスを指定している。

コード例:

<p class="tall"> Lorem ipsum dolor sit …  </p>

事例 3

行間を1行分空けるクラスを設定する。スタイルシートでクラスの表示を定義。

コード例:

p.tall {line-height:200%}

コンテンツ側では、以下のようにクラスを指定している。

コード例:

<p class="tall"> Lorem ipsum dolor sit …  </p>

検証

チェックポイント

  1. ブラウザでコンテンツを開く。

  2. テキストのブロック内の行送りが1.5~2文字分ある。

判定基準

  • 2.を満たしている。

この達成方法が「十分な達成方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。


C22: テキストの視覚的な表現を制御するために、CSS を使用する

適用(対象)

CSSをサポートする全てのウェブコンテンツ技術

これは、次の達成基準に関連する達成方法である:

解説

この達成方法の目的は、CSSを使ってテキストの視覚的な表現を制御する方法を実践することである。これにより利用者が要求を満たすたように、ユーザエージェントを通してテキストの視覚的な特徴を変更できるようになる。テキストの特徴にはサイズ、色、書体、相対配置などの外観を含んでいる。

CSSは主に表現からドキュメント構造を分離することによってアクセシビリティに有益さを与える。スタイルシートは、マークアップの外部から字間、文字配列、ページにおけるオブジェクトの配置、音声やスピーチのアウトプット、フォントなどの正確な制御ができるように設計されている。マークアップからスタイルを分離することにより、コンテンツ制作者はコンテンツの中でマークアップを単純化し、整理することができ、同時によりアクセシブルにすることができる。

画像内にあるテキストはいくつかのアクセシビリティ上の問題があり、以下のことができない:

  • ブラウザの設定に応じて大きさを調整する

  • ブラウザの設定、又は利用者定義のスタイルシートのルールによって指定された色で表示する

  • ハイコントラストといった、オペレーティングシステムの設定を反映させる

適切な視覚的表現を作り出すためには、これらの要素のテキスト部分には、テキストを使い、セマンティックマークアップとスタイルシートの組み合わせを用いるとよい。このことが効果的に作用するために、利用者のシステム上で利用できると思われるフォントを選び、定義された最初のフォントを持たない利用者のために代替フォントを定義する。最新のマシンとユーザエージェントはしばしばすべてのテキストにスムーズもしくはアンチエイリアスをかけている。そのため見出しやボタンは画像化された文字に頼ることなくこれらのシステム上できれいに表示される。

次のCSSのプロパティは、テキストのスタイルを指定し、画像化された文字を使う必要性を回避するのに有効である:

  • font-familyプロパティをを使って、文字の外観を等幅フォントで表示する。

  • text-alignプロパティをを使って、表示域の右側にテキストを表示する。

  • font-sizeプロパティをを使って、テキストをより大きいサイズで表示する。

  • font-styleプロパティを使って、テキストをイタリック体で表示する。

  • font-weightプロパティを使って、テキストの文字をどのくらい太く又は細く表示すべきか設定する。

  • colorプロパティを使って、テキストやテキストコンテナに色を表示する。

  • line-heightプロパティを使って、テキストのブロックに対してラインの高さを指定する。

  • text-transformプロパティを使って、テキストの文字(大文字小文字の区別)を制御する。

  • letter-spacingプロパティを使って、テキストの文字間隔を制御する。

  • background-imageプロパティを使って、非テキストの背景上にテキストを表示させることができる。

  • first-lineの擬似クラスを使って、テキストのブロックにおける最初の行の表現を修正することができる。

  • first-letterの擬似クラスを使って、テキストのブロックにおける最初の文字の表現を修正することができる。

  • :before:afterの擬似クラスを使って、テキストのブロックの前後に装飾的な非テキストコンテンツを挿入することができる。

事例

事例 1: フォントファミリーを制御するためにCSSのfont-familyを使用する。

XHTML:

コード例:

<p>Javascriptで文字列を変換して大文字にする方法は<code>toUpperCase()</code>である。</p>

CSS:

コード例:

code { font-family:"Courier New", Courier, monospace }

事例 2: テキストの配置(配列)を制御するためにCSSのtext-alignを使用する。

XHTML:

コード例:

<p class="right">このテキストは表示域の右側にあるべきである。</p>

CSS:

コード例:

.right { text-align: right; }

事例 3: テキストのサイズを制御するためにCSSのfont-size を使用する。

XHTML:

コード例:

<p>2008年<strong class="largersize">3月</strong>9日</p>

CSS:

コード例:

strong.largersize { font-size: 1.5em; }

事例 4: テキストの色を制御するためにCSSのcolorを使用する。

注記: この例で用いているスタイルは、情報や構造又は関係性を伝えるためのものではない。

XHTML:

コード例:

<p>2008年<em class="highlight">3月</em>9日</p>

CSS:

コード例:

.highlight{ color: red; }

事例 5: イタリック体のテキストにするためにCSSのfont-styleを使用する。

注記: この例で用いているスタイルは、情報や構造又は関係性を伝えるためのものではない。

XHTML:

コード例:

<p>この記事は <a href="http://www.example.com" class="featuredsite">内分泌学のブログ</a>で入手可能である。</p>

CSS:

コード例:

.featuredsite{ font-style:italic; }

事例 6: テキストの太さを制御するためにCSSのfont-weightを使用する。

注記: この例で用いているスタイルは、情報や構造又は関係性を伝えるためのものではない。

XHTML:

コード例:

<p>この取引は <span class="highlight">今</span>利用可能です!</p>

CSS:

コード例:

.highlight { font-weight:bold; color:#990000; }

事例 7: テキストの大文字小文字の区別を制御するためにCSSのtext-transformを使用する。

注記: この例で用いているスタイルは、情報や構造又は関係性を伝えるためのものではない。

XHTML:

コード例:

<p>2008年 <span class="caps">3月</span> 9日</p>

CSS:

コード例:

.caps { text-transform:uppercase; }

事例 8: テキストの行間を制御するためにCSSのline-heightを使用する。

CSSのline-heightプロパティを使って、段落の行間をフォントの高さの2倍に表示する。

XHTML:

コード例:

<p>人とその人の運命についての考察はいつも<br />  
全ての技術的な試みの最重要な関心を形成する。 <br />
あなたの図式と方程式においてそれを忘れてはいけない。 </p>

CSS:

コード例:

p { line-height:2em; }

CSSのline-heightプロパティを使って、テキストの行間をフォントの高さより少なく表示させる。テキストの2行目は、テキストの1行目の後に配置されて、あたかも1行目の一部だがやや下がっているように見える。

XHTML:

コード例:

<h1 class="overlap"><span class="upper">本日の</span><br />
<span class="byline">ニュース</span></h1>

CSS:

コード例:

.overlap { line-height:0.2em;  }
.upper { text-transform:uppercase; }
.byline { color:red; font-style:italic; font-weight:bold; padding-left:3em; }

事例 9: 文字間を設定するためにCSSのletter-spacingを使用する。

CSSのletter-spacingプロパティを使って、テキストの2行目では、文字をより接近させて表示する。

XHTML:

コード例:

<h1 class="overlap"><span class="upper">本日の</span><br />
<span class="byline">ニュース</span></h1>

CSS:

コード例:

.overlap { line-height:0.2em;  }
.upper { text-transform:uppercase; }
.byline { color:red; font-style:italic; font-weight:bold; padding-left:3em; letter-spacing:-0.1em; }

CSSのletter-spacingプロパティを使って、テキストの2行目では、文字をより接近させて表示する。【訳注:おそらく原文が間違っています。WCAGワーキンググループに確認中です。】

XHTMLの構成:

コード例:

<h1 class="upper2">ニュース</h1>

CSS:

コード例:

.upper2 { text-transform:uppercase; letter-spacing:1em; }

事例 10: テキストと画像をレイヤー化するためにCSSのbackground-imageを使用する。

CSSのfont-styleプロパティを使って、バナーのテキスト要素を表示させ、background-imageプロパティを使って、テキストの後ろの画像を表示させる。

XHTML:

コード例:

<div id="banner"><span id="bannerstyle1">地域の審議会へ</span> 
<span id="bannerstyle2">ようこそ</span></div>

CSS:

コード例:


#banner { 
  color:white; 
  background-image:url(banner-bg.gif); 
  background-repeat:no-repeat; 
  background-color:#003399; 
  width:29em; 
}

#bannerstyle1 { 
  text-transform:uppercase; 
  font-weight:bold; 
  font-size:2.5em;
}

#bannerstyle2 { 
  font-style:italic; 
  font-weight:bold; 
  letter-spacing:-0.1em;
  font-size:1.5em; 
}

事例 11: テキストの最初の行の表現を制御するためにCSSのfirst-lineを使用する。

CSSの:first-line擬似クラスを使って、最初の行をより大きなサイズで赤色に表示する。

XHTML:

コード例:

<p class="startline">むかしむかし...<br />
...遠い地で, 遠くへ...  </p>

CSS:

コード例:

.startline:first-line { font-size:2em; color:#990000; }

事例 12: テキストの最初の文字の表現を制御するためにCSSのfirst-letterを使用する。

CSSの:first-letter擬似クラスを使って、最初の文字をより大きなサイズで赤く、縦位置を中央揃えにして表示する。

XHTML:

コード例:

<p class="startletter">むかしむかし...</p>

CSS:

コード例:

.startletter:first-letter { font-size:2em; color:#990000; vertical-align:middle; }

参考リソース

この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。

検証

チェックポイント

  1. CSSのプロパティを用いてテキストの視覚的な表現を制御している。

判定基準

  • 1.を満たしている。

この達成方法が「十分な達成方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。


C23: メインコンテンツのテキスト及び背景の色を指定せず、バナー、特集記事及びナビゲーションなどのようにメインではないコンテンツのテキスト及び背景の色を CSS で指定する

適用(対象)

CSSを用いているウェブページ

これは、次の達成基準に関連する達成方法である:

ユーザエージェント及び支援技術によるサポート

C23 に関するユーザエージェントサポートノート (英語)を参照のこと。

解説

ウェブページの中には、色を用いてコンテンツをグループ分けをしているものもある。この達成方法の目的は、ウェブページの構成やグループ分けを示す視覚的な情報を残しつつも、メインコンテンツ部分においては特定の文字色と背景色の組み合わせを利用者が選択できるようにすることである。利用者がページ上のすべてのテキストの文字色と背景色を上書きした場合、ウェブページの構成とグループ分けに関する情報は失われる可能性があり、そうなるとそのページを利用することも理解することも難しくなる。

コンテンツ制作者がメインコンテンツ部分の文字色と背景色を指定しなければ、ユーザスタイルシートを使うことなしに、ブラウザでそれらの色を変更することが可能になる。主要コンテンツ以外に対して文字色と背景色を指定するということは、ブラウザはそれらの色を変更しないことを意味する。

この達成方法を使うということは、コンテンツ制作者はメインコンテンツの領域に対してデフォルトの文字色と背景色の組み合わせを使うことになる。結果として、配色は利用者の好みの色に設定したユーザエージェントによって全面的に決められる。つまり、利用者のニーズに最も合う色の選択となり、利用者にとって最も読みやすい配色となる。

事例

事例 1

ある HTML のウェブページでは、ナビゲーションバー、メニューバー及び目次のような主要ではないコンテンツに対して、テキストと背景の色を指定するために CSS を使用している。しかし、メイン・コンテンツ部分に対しては、テキストにも背景にも色は指定していない。利用者は、自分に合った色とコントラストでメイン・コンテンツを閲覧するために、ブラウザで自分好みの色を設定する。ページの個々のセクションは、それでもなお視覚的にはっきり区別できる。

事例 2

ある音楽雑誌のサイトには、白い背景に青い文字の記事がある。そのサイトのページの先頭近くでは、そのページに対して異なるスタイルシートを適用するリンクを提供している。新しいスタイルシートでは、テキストや背景に対しては色を指定していない。

参考リソース

この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。

検証

チェックポイント

  1. テキスト、リンク及び背景の色が、デフォルトの色とも、メインではないコンテンツに指定されている色とも異なるように、ブラウザの設定を変える。

    注記: ブラウザがそのページに指定されている色を無視するような設定にはしないこと。

  2. メインコンテンツのテキスト、リンク及び背景が、設定した色に変わる。

  3. メインではないコンテンツのテキスト、リンク及び背景の色は変わらない。

判定基準

  • 2. 及び 3. を満たしている。

この達成方法が「十分な達成方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。


C24: コンテナのサイズに CSS のパーセント値を使用する

適用(対象)

CSS を用いているウェブページ

これは、次の達成基準に関連する達成方法である:

解説

この達成方法の目的は、テキストを読むためにはテキストサイズ大きくする必要がある利用者が、1 行のテキストを横スクロールなしで読めるようにすることである。この達成方法を用いるには、コンテンツ制作者はテキストコンテナの幅をパーセント値で指定する。

事例

事例 1

ある新聞サイトでは、画面の中央にコンテンツを表示させている。コンテンツのコンテナ幅は、ページ全体に対するパーセンテージで指定しているため、ロービジョンの人がフォントサイズを大きくしたときも、ブラウザ画面のサイズにあわせてテキストが折り返しされ、横スクロールバーは表示されない。

検証

チェックポイント

  1. 全てのコンテナ幅をパーセント値で指定している。

  2. テキストサイズを 200% にしてみる。

  3. どの行のテキストを読むにも、横スクロールの必要がない。

  4. 全てのテキストが、ページ上に見えたままである。

判定基準

  • 1.、3. 及び 4. を満たしている。

この達成方法が「十分な達成方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。


C25: CSS で、テキスト及び背景の色は指定せずに、ウェブページの各領域の範囲を明確にするためのボーダーやレイアウトを指定する

適用(対象)

CSS を用いているウェブページ

これは、次の達成基準に関連する達成方法である:

ユーザエージェント及び支援技術によるサポート

C25 に関するユーザエージェントサポートノート (英語)を参照のこと。

解説

この達成方法が意図するのは、ボーダー(境界)やレイアウトは CSS を用いて指定するが、文字色と背景色については利用者のブラウザや OS の設定に従って表示できるように指定しないでおく、ということである。これによって利用者は、自分が見たい色でテキストを見ることができるようになり、同時に、テキストの段組、セクションの周りのボーダー、又はメニューとメインコンテンツの領域を区切る縦線といったレイアウトやページデザインの外観は保つことができるようになる。また、ページに JavaScript のポップアップ・ボックス又はドロップダウン・メニューが含まれている場合に色が上書きされるという、一部のブラウザで起こる表示の問題も回避することができる。

ボーダーやレイアウトを示す表示は、文字色と背景色に関する柔軟性と同様に、認知障害のある多くの人にとって役に立つ。しかし、状況によってはこれら 2 つのニーズは相容れないこともある。それは、利用者がブラウザ上でコンテンツ制作者が選択した文字色と背景色を上書きする必要があるとき、ブラウザがボーダーやレイアウトまでも取り除いてしまうような場合である。これは、ページがシングルカラムでひとつのブロックが他のブロックの下に表示されることを意味し、そうなると、不必要な余白ができ、テキストの 1 行の長さが長くなってしまう。また、ポップアップ・ボックスの背景が透過して、ページ上のテキストの上にボックスのテキストが重なってしまったり、ドロップダウン・メニューが透過するかダークグレーの背景になってしまったりすることを意味する。コンテンツ制作者が文字色と背景色を一切指定せず、その一方でボーダーの色やレイアウトを指定した場合、一般的なブラウザのほとんどでは、(コンテンツ制作者が指定した)CSS の他の宣言に影響を与えずにテキストと背景の色を変更することができる。

事例

事例 1

あるウェブページは、HTML を使ってデザインされている。ページを構成する各領域を囲うボーダーの色を指定し、メニューがメインコンテンツ領域の左側にフロートするレイアウトにするために CSS が使用されている。文字色も背景色も指定されていない。利用者がブラウザで自分の色を設定すると、レイアウトを崩すことなしに、利用者に適した色とコントラストでページを閲覧できる。

検証

チェックポイント

  1. HTML で作られたコンテンツの色を変更できるブラウザでウェブページを開く。

  2. ブラウザの設定画面で、テキスト、リンク及び背景の色を、現在の設定とは異なる色に変える。

    注記: 「ページで指定されている色を無視する」というようなオプションを選択していないことを確認する。

  3. ページに戻って表示を確認すると、新しく設定したテキスト、リンク及び背景の色で表示されている。

  4. どのボーダーも消えずに表示されており、レイアウトも崩れていない。

判定基準

  • 3. 及び 4. を満たしている。

この達成方法が「十分な達成方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。


C27: DOM の順序を表示順序と一致させる

適用(対象)

HTML 及び XHTML で使用される CSS

これは、次の達成基準に関連する達成方法である:

解説

この達成方法の目的は、ソースコード上のコンテンツの順序が、コンテンツの表示結果の順序と同じになるようにすることだ。 ソースコード上のコンテンツの順序は、コンテンツ制作者によって、CSSによる表示結果とは異なるものにされる場合がある。 それぞれの順序はその状態では意味の分かるものになっているかもしれないが、支援技術の利用者にとっては混乱をもたらす可能性がある。 そのようなことは、(スクリーンリーダーのように)ソースコードに直接アクセスして内容を読み込んでいる場合や、キーボードで操作している場合などに、コンテンツ制作者による表示指定を利用者が無効にすることによって起こり得る。 もし、スクリーンリーダーを使ってページの内容をソースの順序で読んでいる全盲の利用者が、ページの内容を表示される順序で読んでいる利用者と一緒に働いていたら、異なる順序の情報に出くわすことで混乱するかもしれない。 スクリーンリーダーと組み合わせて画面拡大ソフトウェアを使用しているロービジョンの利用者は、読み上げている箇所を見失って混乱する可能性もある。 キーボード利用者は、ソースの順序が表示の順序と違っていると、次のフォーカスの場所が予想と違って困惑することもあるだろう。

表示結果の順序を前提としなければ、ページの全体を理解することが難しい状況もあるかもしれない。その場合、もしソースの順序が異なっていたら、理解することはさらに難しくなってしまう。

ソースの順序が表示結果の順序と同じである場合、すべての人が同じ(正しい)順序でコンテンツを読んで情報のやり取りをすることができる。

注記: HTML の tabindex 属性には 2 つの機能がある。ひとつは要素をフォーカス可能にすることであり、もうひとつは要素にフォーカスの順序を割り当てることである。tabindex の値を 0 にするとその要素はフォーカス可能になるが、フォーカスが追加されるだけで順序はソースの通りになる。フォーカスの順序は、tabindex に指定された正の値だけで昇順となる。tabindex の値をドキュメント・オブジェクト・モデル (DOM) の要素の順序と異なるように設定することは、支援技術の利用者にとっては不適当な順序となることもある。これは主に、tabindex が CSS ではなく、HTML 又は XHTML で指定されていることによるものだ。この点については、将来の仕様で変更される可能性がある。それは、視覚的な表示結果の順序とは異なる可能性もある。

事例

  • あるオンライン新聞の表示では、ナビゲーションバーをイニシャルロゴの直下であるページの左上に配置している。ソースコードでも、ナビゲーションの要素はロゴを指定している要素の後になっている。

参考リソース

この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。

  • Microsoft Internet Explorer Developer Toolbarを使用すると、Microsoft の Internet Explorer でスクリプトによって生成されたDOMのチェックが可能になる。

  • Firebugを使用すると、Firefox でスクリプトによって生成されたDOMのチェックが可能になる。

検証

チェックポイント

  1. エンド利用者に提供されているそのままの状態で、ウェブページのコンテンツの順序を視覚的に検査する。

  2. DOM を表示できるツールを使って、DOM 内の要素を検査する。

  3. ソースコード上でのコンテンツの順序が、ウェブページのコンテンツの表示結果の順序と一致している(例:英語のページなら、順序は上から下へ、左から右へ)。

判定基準

  • 3. を満たしている。

この達成方法が「十分な達成方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。


C28: em 単位を用いて、テキストコンテナのサイズを指定する

適用(対象)

CSS

これは、次の達成基準に関連する達成方法である:

ユーザエージェント及び支援技術によるサポート

C28 に関するユーザエージェントサポートノート (英語)を参照のこと。

解説

この達成方法の目的は、テキストを含むボックス又はテキストの入力を受け付けるボックスの幅及び又は高さを、em 単位を用いて指定することである。これによって、文字サイズを変更できるユーザエージェントは、文字サイズの設定の変更に連動させてテキストを含むボックスの大きさも変更できるようになる。

テキストを含むボックスの幅及び又は高さを他の単位を使って指定していると、文字サイズの拡大によってテキストがボックスに入りきらなくなり、その一部が見えなくなってしまう危険性がある。

大枠のボックス(コンテナ)は、一般にウェブページ内のテキストの配置をコントロールし、そこにはレイアウトのための要素と構造を示す要素、及びフォームのコントロールを含むことができる。

事例

事例 1: テキストを含むレイアウト用のボックスのサイズに em 単位を使う

この事例では、ウェブページのメインコンテンツ領域の左側にナビゲーション・メニューを配置するために、id 属性の値として「nav_menu」を指定した div 要素を使用している。ナビゲーション・メニューは、id 属性の値として「nav_list」を指定したテキストリンクのリストで構成されている。ナビゲーションのリンクを含むコンテナの幅は em 単位で指定されている。

コード例:

#nav_menu { width: 20em; height: 100em }

#nav_list { font-size: 100%; }

事例 2: テキストベースのフォームのコントロールに em 単位を使う

この事例では、テキストを含む、又は利用者によるテキスト入力を受け付ける input 要素に「form1」というクラス名を指定している。フォントサイズをパーセント単位で、これらの要素の幅を em 単位で定義するために CSS の規則が用いられている。これによって、フォーム・コントロール内のテキストは、部分的に欠けて見えなくなってしまうことなく文字サイズの変更に合わせてリサイズされるようになる(フォーム・コントロールの幅自身も文字サイズに合わせてリサイズされるようになるため)。

コード例:

input.form1 { font-size: 100%; width: 15em; }

事例 3: ドロップダウン・ボックスに em 単位を使う

この事例では、select 要素に「pick」というクラス名を指定している。フォンサイズをパーセント単位で、幅を em 単位で定義するために CSS の規則が使用されている。これによって、フォーム・コントロール内のテキストは、部分的に欠けて見えなくなってしまうことなく文字サイズの変更に合わせてリサイズされるようになる。

コード例:

select.pick { font-size: 100%; width: 10em; }

事例 4: テキストベースではないフォームのコントロールに em 単位を使う

この事例では、チェックボックス又はラジオボタンの input 要素に「choose」というクラス名を指定している。これらの要素の幅と高さを em 単位で定義するために CSS の規則が使用されている。これによって、フォーム・コントロールは、文字サイズの変更に合わせてリサイズされるようになる。

コード例:

input.choose { width: 1.2em; height: 1.2em; }

検証

チェックポイント

  1. テキストを含む、又はテキストの入力を受け付けるコンテナを特定する。

  2. そのコンテナの幅及び又は高さは em 単位で指定されている。

判定基準

  • 2. を満たしている。

この達成方法が「十分な達成方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。


C29: 適合している代替版を提供するために、スタイル・スイッチャーを使用する

適用(対象)

クライアントサイド又はサーバーサイドのスクリプトとともに使用される CSS

これは、次の達成基準に関連する達成方法である:

解説

ウェブページのデフォルトの表示が部分的に達成基準を満たさない場合、「適合要件」の条項(適合要件1)にある「代替版」を用意することで必要条件を満たすことができる。いくつかの必要条件を満たすことが目的なら、ページ全体をそのレベルに適合するような表示に変更できるスタイル・スイッチャーをページ上のリンク又はコントロールによって呼び出すようにすれば、コンテンツ制作者は同じ情報の複数バージョンを作らなくても済む。

この達成方法の目的は、ウェブページの適合している代替版を提供するために、スクリプトと組み合わせて CSS を使う方法を示すことである。この達成方法では、コンテンツの表示を制御するために使用されている CSS を変更するコントロールを提供することで、コンテンツ制作者はコンテンツの代替表示を提供する。ウェブページ内で提供されるコントロールは、そのレベルで要求される達成基準を満たすことができるような表示方法を利用者が選択・変更することを可能にする。これによって、以下のような状況において、利用者が異なる表示方法を選択できるようになる:

  • パソコンの知識や権限がないことが原因で、利用者はブラウザや OS の設定を調整できないかもしれない

  • テキストが、ブラウザや OS の設定では対処できない方法で提供されている(テキストが画像の中に書き込まれているなど)

  • コンテンツのデフォルトの表示では、一部の利用者に対して十分なコントラストがない

この達成方法で達成させるには、以下の 3 項目を満たしていなければならない。

  1. オリジナルのページのリンクまたはコントロールは、それ自身が達成基準を満たしていなければならない。たとえば、もしスタイル・スイッチャーがフォントサイズを大きくするために提供されているのに、そのコントロールが小さいフォントで書かれていたら、利用者はそのコントロールを作動させて代わりの表示方法で見ることができないかもしれない。

  2. 新しいページは、オリジナルのページと同じすべての情報と機能を含んでいなければならない。

  3. 新しいページは、希望する適合レベルのすべての達成基準に適合しなければならない。たとえば、ひとつの要求は満たすが、それを使うと別の要求に適合しなくなってしまうような代替スタイルシートは使用できない。

スタイル・スイッチャーを使う場合は、以下の課題と制限について検討することが重要である:

  • 利用者が行うことのできる変更の数や形式は、ウェブページのコンテンツ制作者によって制御される範囲に限定される。できる限り多くの利用者のニーズに対応できるようにするために、バラエティ豊かな表示と設定項目が提供されるべきである。しかしながら、コンテンツ制作者は、利用者に多くのオプションを提供することに起因する、利用者にとっての設定可能な項目と複雑さの相互作用について熟考することも重要である。

  • あるページから別のページに移動しても利用者の設定を保持しておくには、利用者の機器にクッキーで保存したり(詳細はリソースのセクションを参照)、ウェブサーバーに保存されるプロファイルにクエリー文字列として渡して格納するなどの方法で実現できる場合がある。

  • スタイル・スイッチャーを実装するための技術的手法は、利用者の環境においていくつかの技術が利用可能であることを前提としている(たとえば、多くのクライアントサイド・ソリューションは、JavaScript と CSS の両方が利用可能であることを必要とする)。これらのウェブコンテンツ技術が適合のために当てにできる場合を除き、クライアントサイドのサポートとウェブコンテンツ技術の利用可能性が保証されない場合には、コンテンツ制作者はサーバーサイドのウェブコンテンツ技術を使うことを検討すべきである。その代案としては、これらのウェブコンテンツ技術のサポートを適合のために当てにできない場合に、使用されているいくつかのウェブコンテンツ技術が有効でなくてもコンテンツが確実に適切な表現に変換されるような達成方法を使うことが、より良いページにするための効果的な方法となる。

事例

事例 1: 異なる外部スタイルシートファイルを適用するために JavaScript のコントロールを使う

この例では、文字色と背景色を変更するリンクを JavaScript で提供する。そのリンクは、利用者の環境でJavaScriptがサポートされており、かつ有効な場合にのみ挿入されるようにすべきである。これは、そのリンク自身を挿入するためにスクリプトを使う(つまり JavaScript がサポートされており、かつ有効な場合にのみリンクが表示される)ことで実現できる。

以下のコードは、JavaScript に依存した色を変更するリンクとウェブページのコンテンツの一部、及びそこに適用されるスタイルシート、そして色を変更するリンクが選択された時に使われるスタイルシートを変更するための JavaScript である。

この例は、現在のページの表示だけに適用される。実稼働環境では、利用者がそのサイトで一度選択すれば済むように、その設定をクッキーまたはサーバーサイドのユーザプロファイルに保存することが望ましい。

XHTML(抜粋):

コード例:

In <head> section:
<head>〜</head>内:

  <link href="main.css" rel="stylesheet" type="text/css" />
  <link id="currentCSS" href="defaultColors.css" rel="stylesheet" type="text/css" />

In <body> section:
<body>〜</body>内:

<div id="colorswitch">
<p>Change colors:</p>
<p>色の変更:</p>
  <ul class="inline">
    <li><a href="#" onClick="javascript:changeColors('altColors1.css');return false;" 
      id="altColors1">文字:紺 背景:白</a></li>
    <li><a href="#" onClick="javascript:changeColors('altColors2.css');return false;" 
      id="altColors2">文字:黄 背景:黒</a></li>
    <li><a href="#" onClick="javascript:changeColors('altColors3.css');return false;" 
      id="altColors3">文字:黒 背景:黄</a></li>
    <li><a href="#" onClick="javascript:changeColors('altColors4.css');return false;" 
      id="altColors4">文字:黒 背景:白</a></li>
    <li><a href="#" onClick="javascript:changeColors('defaultColors.css');return false;" 
      id="default">デフォルトに戻す</a></li>
  </ul>
</div>
<div id="mainbody">
  <h1>カンファレンス・レポート</h1>
  <p>先週のカンファレンスは、そうそうたる顔ぶれのスピーカーにより...</p>
</div>

CSS(抜粋):

コード例:

main.css内:

body{ font-family: Geneva, Arial, Helvetica, sans-serif; margin: 2em; }

#mainbody { 
    padding: 1em; 
}

#colorswitch {
    float: right; 
    width: 12em; 
    border: 1px #000066 solid; 
    padding:0 1em 1em 1em; margin:0;
}

#colorswitch p { 
    padding-top:.5em; 
    font-weight:bold;
}


defaultColors.css内:

body, p { 
    color:#000000; 
    background-color:#FFFFFF; 
}

h1, h2, h3 {
        color:#990000; 
        background-color:#FFFFFF;
}


altColors1.css内:

body, h1, h2, h3, p, a { 
    color:#000066; 
    background-color:#FFFFFF; 
}


altColors2.css内:

body, h1, h2, h3, p, a { 
    color:#FFFF33; 
       background-color:#000000; 
}


altColors3.css内:

body, h1, h2, h3, p, a { 
    color:#000000; 
    background-color:#FFFF99; 
}


altColors4.css内:

body, h1, h2, h3, p, a { 
    color:#000000; 
    background-color:#FFFFFF; 
}

JavaScript(抜粋):

コード例:

function changeColors (newCSS)
{
  document.getElementById('currentCSS').href = newCSS; 
}

事例 2: CSS プロパティを変更するためにクライアントサイドの JavaScript を使用する

この例はコンテンツの一部分を単純に変更するもので、複雑なサイトやページに対してはあまり実用的なものではないかもしれない。この例では、特定のコンテンツを強調表示するための背景として(あらかじめ用意された選択肢から)利用者が選択した色を反映させるために、クラス名を変更する目的でクライアントサイドの JavaScript を使用している。

注記: 以下のコードには、達成方法を理解しやすくする目的で、XHTML コード内から JavaScript を呼び出す部分が含まれている。しかし、コンテンツ制作者は、JavaScript を組み込むためのその時点でのベストプラクティスを採用することが推奨される(アンオブトルーシブ JavaScript とプログレッシブ・エンハンスメントについての詳細はリソースを参照)。

XHTML(抜粋):

コード例:

<h1>製品の比較</h1>
<p>比較のためにあなたが選択した製品は以下のとおりです。 
各製品の相違点は強調表示され、イタリック体で表示されています。</p>
<p class="inlinePara">強調表示の色を変更: </p>
<ul class="inline">
  <li><a href="#" onClick="changeColor('hghltLightYellow');return false;" 
    class="hghltLightYellow">薄い黄色</a></li>
  <li><a href="#" onClick="changeColor('hghltBrightYellow');return false;" 
    class="hghltBrightYellow">濃い黄色</a></li>
  <li><a href="#" onClick="changeColor('hghltLightBlue');return false;" 
    class="hghltLightBlue">水色</a></li>
  <li><a href="#" onClick="changeColor('hghltBrightBlue');return false;" 
    class="hghltBrightBlue">青</a></li>
  <li><a href="#" onClick="changeColor('hghltLightRed');return false;" 
    class="hghltLightRed">ピンク</a></li>
  <li><a href="#" onClick="changeColor('hghltDrkRed');return false;" 
    class="hghltDrkRed">茶色</a></li>
</ul>
<table width="400" border="1">
  <tr>
    <td> </td>
    <th scope="col">製品1</th>
    <th scope="col">製品2</th>
  </tr>
  <tr>
    <th scope="row">比較項目1</th>
    <td>あり</td>
    <td>あり</td>
  </tr>
  <tr>
    <th scope="row">比較項目2</th>
    <td class="hghltLightYellow">あり</td>
    <td class="hghltLightYellow">なし</td>
  </tr>
  <tr>
    <th scope="row">比較項目3</th>
    <td>対応</td>
    <td>対応</td>
  </tr>
</table>

CSS(抜粋):

コード例:

body { color:#000000; background-color:#FFFFFF; }

.hghltLightYellow { color: #000000; background-color: #FFFF99; font-style:oblique; }
.hghltBrightYellow { color: #000000; background-color: #FFFF00; font-style:oblique; }
.hghltLightBlue { color: #000000; background-color: #33FFFF; font-style:oblique; }
.hghltBrightBlue { color: #FFFFFF; background-color: #0000FF; font-style:oblique; }
.hghltLightRed { color: #000000; background-color: #FF6266; font-style:oblique; }
.hghltDrkRed { color: #FFFFFF; background-color: #993300; font-style:oblique; }

.inlinePara {display:inline; }
.inline {display: inline; margin-left:0px; padding-left:0px; line-height:3em; }
.inline li { display:inline; }
.inline li a {padding: 0.5em 1em; border: 2px solid #000000; }

JavaScript(抜粋):

コード例:

function changeColor(hghltColor)
{
  // 表のセルのデータを配列に入れる
 
 var els = document.getElementsByTagName('td');

  // 配列の要素の中から、"hghlt"で始まるクラス名を探す
  // 見つかったら、クラスの値を現在選択されているものに変更する
  // このスクリプトは、td要素のクラスは強調表示のためだけに使用されていることを前提としている点に注意

  for (var i=0; i<els.length; i++)
  {
    if (els[i].className.indexOf("hghlt") == 0) { els[i].className = hghltColor; }
  }
}

事例 3: 異なる外部スタイルシートファイルを適用するためにPHPの「$_GET」を使う

このシンプルな例では、2 つあるうちの 1 つの外部スタイルシートを適用するために PHP の「$_GET」を使用している。同様のことは、PHP の様々な機能を使って実現できる。この例では、現在のページの表示だけに適用される。実際の制作においては、利用者がそのサイトにおいて一度選択すれば済むように、設定をクッキーまたはサーバーサイドのユーザプロファイルに保存することが望ましい。

以下のコードは PHP であるが、同様のアプローチは様々なサーバーサイドのウェブコンテンツ技術によって可能である。

PHP と XHTML(抜粋):

コード例:

PHPの冒頭において:

<?php
$thestyle = $_GET['set'];
if ($thestyle == "style1")
	{
	$thestyle = "style2";
	}
else
	{
	$thestyle = "style1";
	}
?>


<head>〜</head>内:

   <link rel="stylesheet" type="text/css" media="screen" href="<?php echo($thestyle);?>.css" >


<body>〜</body>内:

<?php
if ($thestyle == "style1") {
	echo "<a href=\"index.php?set=style1\">スタイルシート2に変更</a>";
	}
else {
	echo "<a href=\"index.php?set=style2\">スタイルシート1に変更</a>";
	}
?>

<div id="mainbody">
  <h1>カンファレンス・レポート</h1>
  <p>先週のカンファレンスは、そうそうたる顔ぶれのスピーカーにより...</p>
</div>

CSS(抜粋):

コード例:

style1.css内:

  body, p { color:#000000; background-color:#FFFFFF; }
  h1, h2, h3 {color:#990000; background-color:#FFFFFF; }


style2.css内:

  body, h1, h2, h3, p, a { color:#FFFF00; background-color:#000000; }

事例 4: 代替スタイルシートを提供するために JSP を使用する

以下の例では2つのファイルを使用している:

  • フォームを含む Java Server Page (JSP)及びフォームの処理コード

  • 上記ページ及び同様のスタイルを使用する他のページで使用される関数を含むインクルードファイル

サーバーサイドのコードは、利用者が選択したスタイルシートのための通常の link 要素及び他のスタイル用の「alternate stylesheet」のついた link 要素を出力する。そのコードは、2 つめの例にあるように、クライアントサイドのコードのフォールバックとして使用することもできる。

フォームを含む JSP ページ:

コード例:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"
 %><%@include file="_jsp/styleswitch.jsp"%><?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 <head>
   <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
   <title>スタイルを変更する</title>
   <%
     String fStyle = "";
     String styleName = "style";
     String defaultStyle = "default";
     Cookie[] cookies = request.getCookies();
 
     // get style from post request parameters
     if (request.getMethod().equals("POST") &amp;&amp; request.getParameter("styleSelect") != null) {
       fStyle = request.getParameter("styleSelect");
       // code that validates user input (security) not shown
       
       if (fStyle.equals("nostyle")) { // user prefers no author style
       } else { // user requests author style
         out.println(createStyleLinks(fStyle).toString());
       }
       
       storeStylePreferenceCookie(request, response, fStyle);
     } else if (request.getMethod().equals("GET")) { 
     // GET request; get style from cookie; else default style links
       // get style from cookie
       if (cookies != null) {
         // get style from cookies
         fStyle = getStyleFromCookies(cookies);
 
         if ( !fStyle.equals("NULL_STYLE") ) { // user requests author style
             out.println(createStyleLinks(fStyle).toString());
         } else { // no cookie for style; process request for style preference
           // default style links
           out.println(createStyleLinks(defaultStyle).toString());
         }
       } else { // GET request without cookies: default styles
         out.println(createStyleLinks(defaultStyle).toString());
       }//end else cookies
     }
   %>
 </head>
 <body id="home">
   <form action="_styleSwitch.jsp" method="post" id="styleswitchform" name="styleswitchform">
     <p><label for="styleSelect">スタイルを選択: </label>
       <select id="styleSelect" name="styleSelect">
         <option value="default">デフォルト (緑)</option>
         <option value="wonb">黒背景に白い文字</option>
         <option value="bonw">白背景に黒い文字</option>
       </select>
       <input type="submit" value="スタイルを変更" />
     </p>
   </form>
 </body>
 </html>

上記ファイルにインクルードされる「styleswitcher.jsp」ファイル:

コード例:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
 <%!
   /**
    * Get the links (link elements) to the CSS files based on cookies, ...
   */
   private String getStyleLinks(HttpServletRequest request) {
     String styleLinks = "";
     Cookie[] cookies = request.getCookies();
     String defaultStyle = "default";
     String tempStyle = "";
     // GET request; get style from cookie; else default style links
     // get style from cookie
     if (cookies != null) {
       // get style from cookies
       tempStyle = getStyleFromCookies(cookies);
 
       if ( tempStyle.equals("NULL_STYLE") ) { 
         // no cookie for style; process request for style preference
         // default style links
         styleLinks = createStyleLinks(defaultStyle).toString();
       } else { // user requests author style
         styleLinks = createStyleLinks(tempStyle).toString();
       }
     } else { // GET request without cookies: default styles
       styleLinks = createStyleLinks(defaultStyle).toString();
     }//end else cookies
     
     return styleLinks;
   }
 
   /**
    * Get style cookie from request
   */
   private String getStyleFromCookies( Cookie[] cookies ) {
     String fStyle = "NULL_STYLE";
     for (int i = 0; i < cookies.length; i++) {
       Cookie cookie = cookies[i];
       String name = cookie.getName();
       
       if ( name.equals("style") ) {
         fStyle = cookie.getValue();
         // code that validates cookie value (security) not shown
       }
     }
     return fStyle;
   }
 
   /**
    * Store the style preference in a persistent cookie
   */
   private void storeStylePreferenceCookie(HttpServletRequest request, 
     HttpServletResponse response, String theStyle) {
     final int ONE_YEAR = 60 * 60 * 24 * 365;
     Cookie styleCookie = new Cookie("style", theStyle);
     styleCookie.setMaxAge(ONE_YEAR);
     response.addCookie(styleCookie);
   }
 
   /**
    * Create the link elements for the stylesheets
   */
   private StringBuffer createStyleLinks(String prefStyle) {
     StringBuffer theStyleLinks = new StringBuffer();
     //two-dimensional array with identifiers (adding '.css' gives the name of the CSS file) 
     // and strings for the title attribute of the link element
    // the identifiers must correspond to the in the "value" attributes in the "option"
    // elements in the style switcher form
     String [] [] styles = {
       { "default", "Default style"},
       { "wonb", "White on black"},
       { "bonw", "Black on white"}
     };
 
     // loop over 2dim array: if styles[i][1] matches prefStyle, 
     // output as normal, else as alternate stylesheet
     for (int i = 0; i < styles.length; i++) {
       if ( styles[i][0].equals(prefStyle) ) { // output pref stylesheet as normal stylesheet
         theStyleLinks.append("<link rel=\"stylesheet\" href=\"_css/").append(styles[i][0])
           .append(".css\" title=\"").append(styles[i][1]).append("\" type=\"text/css\" />").append("\n");
       } else { // output other stylesheets as alternate stylesheets
         theStyleLinks.append("<link rel=\"alternate stylesheet\" href=\"_css/")
           .append(styles[i][0]).append(".css\" title=\"").append(styles[i][1])
           .append("\" type=\"text/css\" />").append("\n");
       }
     } // end for loop
 
     return theStyleLinks;
   }
 %>

他の JSP ページは、以下のコード(include / scriptlet)を用いてこのコードを使用できる:

コード例:

<%@include file="_jsp/styleswitch.jsp"%><% out.println(getStyleLinks(request)); %>

参考リソース

この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。

クッキーを使用する

クッキーを通して利用者のコンピュータ上に情報を保管することによって、利用者による設定はページ全体に渡って永続的に保存しておくことができる。この機能を利用するには、利用者のコンピュータでクッキーがサポートされており、かつその利用が許可されている必要がある。クッキーは、Javascript のようなクライアントサイドのスクリプト、または CGI スクリプトのようなサーバーサイドのスクリプトを使用することで、作成・読み込み・変更・削除することができる。クライアントサイドの実装に依存するということは、クッキーがサポートされその利用が許可されていることに加えて、利用者のコンピュータでその達成方法がサポートされており、かつ利用可能であることを要求することになる。

クッキーの生成と使用方法に関する情報はWeb上にある。以下にいくつかの参考となるページを示す。

コンテンツ制作者はクッキーをサポートしているかどうかのテストを行い、もしサポートされていなければ別のコントロールを提供することが推奨される。この別のコントロールには、「この設定をすべてのページに適用する」のような設定の有効化に関する情報が含まれるべきである。メッセージや別のコントロールの設定に応じて利用者に向けて表示されるページは、クッキーの動作環境とそれ以外の環境で利用できるオプションについての情報を提供する。 利用者がクッキーを有効にできない状況において、もし利用者がサイトの閲覧を継続することを選択した場合、それはどうなることを意味するのかということについての説明を含める。そしてクッキーをサポートしている場合と同様の結果を得るにはユーザエージェントをどう設定すればよいかということについての情報を提供する。

例:「このブラウザはクッキーを受け付ける設定になっていません。このサイトでは、サイト内の全ページに渡って、あなたの変更した設定を適用するためにはクッキーが有効になっている必要があります。お使いの環境においてクッキーを有効にする方法についてはHow to Enable Cookiesを参照してください。ただし、これを実行するためには、お使いのコンピュータにおける管理者の権限が必要となる場合がありますので注意してください。クッキーが利用できない場合、あなたの設定はこのサイト内の他のページも含めて保存されません。弊社では、この機能をコンピュータの性能に関わらず提供できるよう努力しておりますが、それが実現できるまでの間でも、各ページにおいて設定を変更することは可能です。」

プログレッシブ・エンハンスメントとアンオブトルーシブ JavaScript

HTML または XHTML ページにおける JavaScript 実装のための現在のベストプラクティスは、構造及び表現からコンテンツの動作を分離させた形で使用することだ。「プログレッシブ・エンハンスメント」と「アンオブトルーシブJavaScript」という言葉は、ページの機能を向上させ、さらに良いものにするだけでなく、JavaScript がサポートされていない場合でもコンテンツが機能し続けられるようにうまく作られているスクリプトを指す用語としてよく使用されている。

より詳しく知るための推奨される情報:

検証

チェックポイント

  1. 利用者が代わりの表示を選択できるようなコントロールがウェブページに含まれている。

  2. 個々の CSS スタイルのプロパティを変更するか、代替スタイルシートをアクティブにすることによって、コントロールが表現の変更していることを確認する。

  3. 結果として表示されたページは、元のページの「適合している代替版」になっている。

判定基準

  • 上記のすべてを満たしている。

この達成方法が「十分な達成方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。


C30: テキストを画像化された文字に置き換え、変換するユーザインタフェースコントロールを提供するために、CSS を使用する

適用(対象)

CSS をサポートするすべてのウェブコンテンツ技術

これは、次の達成基準に関連する達成方法である:

解説

この達成方法の目的は、利用者が彼らの好みに従ってコンテンツを見ることができるような方法で構造化された HTML テキストを画像化されたテキストに置き換えるための CSS の用い方を実践することである。この達成方法を用いるには、コンテンツ制作者はページの構造をマークアップするためにセマンティックな要素を用いる HTML ページを作ることから始める。次にコンテンツ制作者はページに対して2またはそれ以上のスタイルシートを作成する。1 つめのスタイルシートは HTML テキストをテキストとして表現し、2 つめはいくつかの HTML テキストをテキストの画像に置き換えるために CSS の機能を用いている。最後に、server-side 又は client-side scripting の使用を通して、コンテンツ制作者は利用者が利用するビューを切り替えることができるコントロールを提供する。

この達成方法は、画像化されたテキストを含まない表現が利用可能であり、かつ、利用者が代替表現に切り替えることができるユーザインタフェースコントロールが関連する達成基準を満たす限り、達成基準 1.4.5 又は 1.4.9 を満たすために用いることができる。可能であれば、コンテンツ制作者はデフォルトの表現として画像化されたテキストを含まない表現を配信すべきである。更に、切り替えのためのコントロールはページの先頭近くに配置されるべきである。

「画像の置き換え」の達成方法は、さまざまなユーザエージェント、構成、及び支援技術の課題との互換性(詳細は「参照リソース」を参照)に取り組むために多様なものが開発されてきた。コンテンツ制作者がテキストの置き換えのために用いる数々のアプローチがある一方、その達成方法がスクリプト、CSS、画像(又はそれらの組み合わせ)をオフにした場合に正確に動作するかどうか、支援技術との互換性を考慮することは重要である。すべての場合において動作する単一の解決法を見出すことは難しいので、この達成方法は、利用者が画像置き換えの達成方法を含んでいない表現へ切り替えることのできるコントロールを用いることを推奨している。

注記: この達成方法は、非適合コンテンツのための適合している代替版のページを提示するために、スタイル切り替えの達成方法との組み合わせで用いることができる。更なる情報として C29: 適合している代替版を提供するために、スタイル・スイッチャーを使用する適合している代替版を理解するを参照。

事例

事例 1

デザインスタジオのサイトは、利用者が彼らのウェブページの 2 種類の表現を見ることができるようにスタイルの切り替えを用いている。デフォルトのバージョンでは、見出しのテキストが画像化されたテキストで置き換えられている。ページ上のコントロールによって利用者はテキストで見出しを表現したバージョンへ切り替えることができる。

CSS:

コード例:

...
<div id="Header"> 
  <h1><span>パッファーフィッシュデザインスタジオ</span></h1> 
  <h2><span>驚くべき独自性とデザインソリューション</span></h2> 
  </div> 
...

画像化されたテキストを含んだ表現のための CSS を以下に記す。見出し要素のコンテンツを画面の外に配置して非表示にするためにポジショニングを使用することで、テキストはスクリーンリーダー利用者が利用可能な状態に保持されていることに注意。

コード例:

...
#Header h1 {
	background-image: url(pufferfish-logo.png);
	height: 195px;
	width: 290px;
	background-repeat: no-repeat;
	margin-top: 0;
	position: absolute;
	}
#Header h1 span {
	position: absolute;
        left: -999em;
	}
#Header h2 {
	background-image: url(beauty.png);
	background-repeat: no-repeat;
	height: 234px;
	width: 33px;
	margin-left: 8px;
	position: absolute;
	margin-top: 250px;
	}
#Header h2 span {
	position: absolute;
        left: -999em;
	}

画像化されたテキストを含まないプレゼンテーションのための CSS。

コード例:

...
#Header h1 {
	font: normal 200%/100% Garamond, "Times New Roman", serif;
	margin-bottom: 0;
	color: #000099;
	background: #ffffff;
	}

#Header h2 {
	font: normal 160%/100% Garamond, "Times New Roman", serif;
	margin-bottom: 0;
	color: #336600;
	background: #ffffff;
	}

参考リソース

検証

チェックポイント

  1. ウェブページに利用者が代替表現を選択できるコントロールが含まれている。

  2. コントロールがアクティブである時、結果ページは画像化されたテキストが用いられている箇所全てにおいてテキスト(プログラムで解釈可能なテキスト)を含んでいる。

判定基準

  • 上記の全てを満たしている。

この達成方法が「十分な達成方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。