このウェブページは、「WCAG 2.0 達成方法集 : WCAG 2.0 の達成方法と失敗例」におけるCSS の達成方法を掲載している。ウェブコンテンツ技術特有の達成方法は、「一般 (General)」の達成方法に取って代わるものではない。コンテンツ制作者は適合に向けて作業する際には、「一般 (General)」の達成方法とウェブコンテンツ技術特有の達成方法の双方を考慮に入れる必要がある。
ウェブコンテンツ技術特有の達成方法は、あらゆる状況で WCAG 2.0 の達成基準と適合要件を満たすコンテンツを作るために使うことができる技術を指しているわけではない。 コンテンツ制作者はその技術の限界に注意を払い、障害のある人にアクセシブルな方法でコンテンツを提供す必要がある。
達成方法についての情報は、WCAG 2.0 達成方法集のイントロダクションを参照のこと。他のウェブコンテンツ技術の達成方法一覧については、目次を参照のこと。
CSS に対応しているウェブコンテンツ技術全て
これは、次の達成基準に関連する達成方法である:
注記: この達成方法は、達成基準 1.3.2 を満たす他の達成方法と組み合わせなければならない。詳細については、 達成基準 1.3.2 を理解するを参照すること。
この達成方法の目的は、スタイルシートが適用されていない場合でも意味のある提示を維持しながら、スタイルシートを介して視覚的外観をどのように向上させることができるかを示すことである。CSS2 の配置プロパティを使用して、コンテンツを利用者のビューポートの任意の位置に表示できる。構造的な要素を使用することで、スタイルが利用できない場合でもコンテンツの意味を判断できることを保証する。
この事例では、コンテンツに対して構造 (定義リスト) を示すマークアップがなされている。そして、コンテンツを段組み形式で表示させるために CSS が使用されている。コンテンツは各クラスの指定でそれぞれの段に絶対配置され、HTML の定義リストを表示する際に dd 要素をインデントするユーザエージェントのデフォルト値を上書きするために、マージンの値を 0 にしている。
表示させるコンテンツは以下の通り:
コード例:
<div class="box">
<dl>
<dt class="menu1">Products</dt>
<dd class="item1">Telephones</dd>
<dd class="item2">Computers</dd>
<dd class="item3">Portable MP3 Players</dd>
<dt class="menu2">Locations</dt>
<dd class="item4">Idaho</dd>
<dd class="item5">Wisconsin</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 で表示位置を調整しているコンテンツに対して:
文書からスタイル情報を取り除く、又はユーザエージェントでスタイルシートを無効にする。
構造的な関係及びコンテンツの意味が保持されていることを確認する。
2. の結果が真である。
この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。
CSS に対応しているウェブコンテンツ技術全て
これは、次の達成基準に関連する達成方法である:
この達成方法の目的は、CSS をサポートするユーザエージェントによって画面に表示されないよう、リンクの一意の機能を記述する追加のテキストを追加し、そして追加のテキストをスタイリングすることによってリンクテキストを補うことである。表示されているリンクテキストの意味を理解するために、その前後の内容も読む必要がある場合、この達成方法を用いることによって、リンクテキストの表示は元の状態のままでありながら、リンクに対する十分な説明を提供することができる。
この達成方法を用いるには、まず、表示させないテキストを対象とする CSS セレクタを作成する。そのセレクタの規則集合では、overflow プロパティの値が hidden に指定された縦横 1 ピクセルのボックスの中にテキストが入るようにし、さらにそのテキストをビューポートの外側に配置する指定を入れる。これによって、テキストは画面上には確実に表示されなくなるが、スクリーンリーダーや点字ディスプレイなどの支援技術に対してはアクセシブルな状態を保持できる。ここで留意すべきは、画面に表示されなくなるだけでなく支援技術に対してもそのテキストを隠してしまうという意図せぬ影響が出る恐れがあるため、この達成方法では visibility:hidden 及び display:none を使用していないことである。
注記 1: リンクテキストを非表示にするこの達成方法は、スクリーンリーダーの利用者や企業のウェブコンテンツ制作者の一部によって支持されている。一部のウェブサイトにおいては効果があることも立証されている。しかし、結果的に説明が冗長になることがある上に、熟練したスクリーンリーダーの利用者にはその冗長な説明の読み上げを制御することを要求することもありうるため、スクリーンリーダーの利用者やアクセシビリティの専門家の中には、一般的な達成方法としてはこれを推奨していない人もいる。WCAG ワーキンググループとしては、同じコンテンツが非表示にしたテキストで繰り返されていないのであれば、この達成方法は有用だと考えている。
注記 2: この達成方法は、適合していないコンテンツ向けの 適合している代替版のページで解説されているスタイルスイッチングを行う達成方法との組み合わせで使用することも可能である。詳しい情報については、C29: 適合している代替版を提供するために、スタイルスイッチャーを使用する及び適合している代替版を理解するを参照のこと。
この事例は、各記事の概要のあとに「全文」というリンクのあるニュースサイトを示している。非表示にされたリンクテキストが、何の「全文」であるのかを説明している。
コード例:
<?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>Hidden Link Text</title>
</head>
<body>
<p>Washington has announced plans to stimulate economic growth.
<a href="#"> <span>Washington stimulates economic growth </span>
Full Story</a></p>
</body>
</html>
この事例では、異なるフォーマットの電子ブックが用意されている場合について説明している。「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>Hidden Link Text </title>
</head>
<body>
<dl>
<dt>Winnie the Pooh </dt>
<dd><a href="winnie_the_pooh.html">
<span>Winnie the Pooh </span>HTML</a></dd>
<dd><a href="winnie_the_pooh.pdf">
<span>Winnie the Pooh </span>PDF</a></dd>
<dt>War and Peace</dt>
<dd><a href="war_and_peace.html">
<span>War and Peace </span>HTML</a></dd>
<dd><a href="war_and_peace.pdf">
<span>War and Peace </span>PDF</a></dd>
</dl>
</body>
</html>
この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
この達成方法を使用している各 a 要素に対して:
説明を付加するテキストを提供する要素のスタイルが、1 ピクセル四方の中に収められ、かつ「overflow: hidden;」の状態で表示領域の外側に配置されるように定義されていることを確認する。
そのスタイルが定義されている要素が a 要素の中に含まれていることを確認する。
a 要素の中のコンテンツを組み合わせると、何へのリンクであるかの説明になっていることを確認する。
上記全ての結果が真である。
この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。
CSS に対応しているウェブコンテンツ技術全て
これは、次の達成基準に関連する達成方法である:
注記: この達成方法は、達成基準 1.3.2 を満たす他の達成方法と組み合わせなければならない。詳細については、 達成基準 1.3.2 を理解するを参照すること。
この達成方法の目的は、意味の伝わるテキストの流れを維持しながら、スタイルシートによって表示上の文字間隔を調整する方法を示すことである。
文字間隔の量を調整するには、CSS の letter-spacing プロパティを使用する。
単語の途中に空白文字を入れると意味や発音のされ方が変わってしまうため、間隔の調整はこの方法で行うことが推奨されている。
以下の CSS は、レベル 2 の見出しに含まれる各文字に対して 1 文字分に相当する間隔を加える:
コード例:
h2 { letter-spacing: 1em; }マークアップは以下の通り:
コード例:
<h2>Museum</h2>
表示結果は、およそ以下のようになる:
コード例:
M u s e u m
この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
訳注: 「CSS 2: Letter and word spacing」は、CSS Text Module Level 3§8. Spacing で再定義されている。
文字間に標準以外の間隔があるように見える各単語に対して:
間隔を制御するために CSS letter-spacing プロパティが用いられたかどうかを確認する。
1. の結果が真である。
この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。
画像を表示させるために CSS が利用可能なウェブコンテンツ技術
これは、次の達成基準に関連する達成方法である:
この達成方法の目的は、単に装飾することだけが目的の画像と、マークアップを追加することなくウェブコンテンツに対して視覚的な整形を行うための画像を追加する方法を示すことである。これによって、支援技術がテキストではないコンテンツを無視することが可能になる。文字サイズの拡大やハイコントラストの設定を妨げている CSS の背景画像を消すことができるように、一部のユーザエージェントでは、利用者の要求に応じて CSS を無視または無効にすることができる。
背景画像は、以下の CSS プロパティで表示させることができる:
background,
background-image,
content (:before 又は :after 疑似要素と組み合わせて使用)
list-style-image.
注: この達成方法は、情報を伝えている画像、なんらかの機能を持っているような画像、主として知覚的なエクスペリエンスを作り出すことを目的としているような画像に対しては使用すべきではない。
訳注: MDN の疑似要素 (Pseudo-elements) に示されているように、:after 及び :after 疑似要素について、コロンを 1 個のみ用いるのは古い、互換性のための構文である。コロンを 2 個置くのが現在の正式な構文であることに注意されたい。
以下のスタイルシートは、ページ全体の背景画像を指定している。
コード例:
…
<style type="text/css">
body { background: #ffe url('/images/home-bg.jpg') repeat; }
</style>
</head>
<body>
…以下のスタイルシートは、利用者がマウスポインタをリンクの上に置いたときの装飾的なロールオーバー効果を出すために CSS の background プロパティを使用している。
コード例:
a:hover { background: #ffe url('/images/hover.gif') repeat; color: #000;
text-decoration: none;
}
以下のスタイルシートでは、要素の角を丸くするために、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>Hi John, I really like this technique and I'm gonna use it on my own Website!</p>
</blockquote>
<div class="submitter">
<cite><a href="http://example.com/">anonymous coward</a> from Elbonia</cite>
</div>
</div>
<div class="aComment">
…
</div>
</div>
…この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
HTML 4.01 specification には、body 要素の background 属性は非推奨であると記述されている。
訳注 1: 「background property」は、CSS Backgrounds and Borders Module Level 3§3.10. Backgrounds Shorthand: the background property で再定義されている。この仕様は W3C 勧告ではないが、CSS Snapshot 2018 によれば、今日の CSS を構成する仕様として位置づけられている。
訳注 2: HTML 4.01 は Superseded Recommendation としてマークされ、廃止された仕様である。HTML5 において、body 要素の background 属性は、は HTML 5.2§11.2. Non-conforming features で不適合な機能として定義されている。
装飾目的の画像の存在を確認する。
それらが CSS に含まれていることを確認する。
1. の結果が真である場合に、2. の結果が真である。
この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。
CSS
これは、次の達成基準に関連する達成方法である:
注記: この達成方法は、達成基準 1.4.4 を満たす他の達成方法と組み合わせなければならない。詳細については、 達成基準 1.4.4 を理解するを参照すること。
注記: この達成方法は、達成基準 1.4.8 を満たす他の達成方法と組み合わせなければならない。詳細については、 達成基準 1.4.8 を理解するを参照すること。
C12 に関するユーザエージェントサポートノートを参照のこと。
この達成方法の目的は、ユーザエージェントがコンテンツを効果的に拡大縮小できるように、比率にもとづく単位でテキストのフォントサイズを指定することである。body 要素に対してフォントサイズを指定した場合、より個別的なセレクタで上書きされない限り、他の全ての要素に値が継承される。
この事例では、どのような場合でも、strong 要素のテキストが周りのテキストよりも常に大きく表示されるように指定してある。そのため、親要素である見出しやパラグラフにフォントサイズが指定されていても、strong 要素でマークアップされた強調語は、周りのテキストよりも大きく表示される。
訳注: MDN の strong 要素で示されているように、古い HTML では strong 要素を単により強い強調としていたが、現在の HTML では strong を重要性を表すものと定義している。
コード例:
strong {font-size: 120%}
...
<h1>Letting the <strong>user</strong> control text size</h1>
<p>Since only the user can know what size text works for him,
it is <strong>very</strong> important to let him configure the text size.
…この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
訳注: フォントに関する CSS の仕様は、CSS Fonts Module Level 3 を参照のこと。この仕様が、CSS 2 のフォントに関する記述に取って代わることに注意されたい。CSS Snapshot 2018 も参照のこと。
フォントサイズを定義する CSS プロパティの値がパーセントであることを確認する。
1. の結果が真である。
この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。
CSS
これは、次の達成基準に関連する達成方法である:
注記: この達成方法は、達成基準 1.4.4 を満たす他の達成方法と組み合わせなければならない。詳細については、 達成基準 1.4.4 を理解するを参照すること。
注記: この達成方法は、達成基準 1.4.8 を満たす他の達成方法と組み合わせなければならない。詳細については、 達成基準 1.4.8 を理解するを参照すること。
C13 に関するユーザエージェントサポートノートを参照のこと。
この達成方法の目的は、設定したい相対的なフォントサイズを表現するキーワードでフォントサイズを指定することである。これらの値は、ユーザエージェントが継承されたフォントサイズに相対的なフォントサイズを選択できるようにヒントを提供する。
この事例では、どのような設定であっても、strong 要素のテキストが周りのテキストよりも常に大きく表示されるように、「larger」というフォントサイズが指定してある。親要素である見出しやパラグラフにフォントサイズが指定されていても、strong 要素でマークアップされた強調語は、周りのテキストよりも大きく表示されるだろう。
訳注: MDN の strong 要素で示されているように、古い HTML では strong 要素を単により強い強調としていたが、現在の HTML では strong を重要性を表すものと定義している。
コード例:
strong {font-size: larger}
...
<h1>Letting the <strong>user</strong> control text size</h1>
<p>Since only the user can know what size text works for him,
it is <strong>very</strong> important to let him configure the text size.
…この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
訳注: フォントに関する CSS の仕様は、CSS Fonts Module Level 3 を参照のこと。この仕様が、CSS 2 のフォントに関する記述に取って代わることに注意されたい。CSS Snapshot 2018 も参照のこと。
フォントサイズを定義する CSS プロパティの値が、xx-small、x-small、small、medium、large、x-large、xx-large、smaller、larger の中のどれか一つであることを確認する。
1. の結果が真である。
この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。
CSS
これは、次の達成基準に関連する達成方法である:
注記: この達成方法は、達成基準 1.4.4 を満たす他の達成方法と組み合わせなければならない。詳細については、 達成基準 1.4.4 を理解するを参照すること。
注記: この達成方法は、達成基準 1.4.8 を満たす他の達成方法と組み合わせなければならない。詳細については、 達成基準 1.4.8 を理解するを参照すること。
C14 に関するユーザエージェントサポートノートを参照のこと。
この達成方法の目的は、ユーザエージェントがコンテンツを効果的に拡大縮小できるように、em 単位でテキストのフォントサイズを指定することである。em はフォントのプロパティなので、フォントのサイズが変わると拡大縮小される。body 要素に対してフォントサイズを指定した場合、より個別的なセレクタで上書きされない限り、他の全ての要素に値が継承される。
この事例では、どのような場合でも、strong 要素のテキストが周りのテキストよりも常に大きく表示されるように指定してある。そのため、親要素である見出しやパラグラフにフォントサイズが指定されていても、strong 要素でマークアップされた強調語は、周りのテキストよりも大きく表示される。
訳注: MDN の strong 要素で示されているように、古い HTML では strong 要素を単により強い強調としていたが、現在の HTML では strong を重要性を表すものと定義している。
コード例:
strong {font-size: 1.6em}
...
<h1>Letting the <strong>user</strong> control text size</h1>
<p>Since only the user can know what size text works for him,
it is <strong>very</strong> important to let him configure the text size. </p>
…この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
訳注: フォントに関する CSS の仕様は、CSS Fonts Module Level 3 を参照のこと。この仕様が、CSS 2 のフォントに関する記述に取って代わることに注意されたい。CSS Snapshot 2018 も参照のこと。
フォントサイズを定義する CSS プロパティの値が em 単位である。
1. の結果が真である。
この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。
CSS、HTML 及び XHTML
これは、次の達成基準に関連する達成方法である:
C15 に関するユーザエージェントサポートノートを参照のこと。
この達成方法の目的は、インタラクティブな要素がフォーカスされたとき、又は利用者がポインティングデバイスを使ってカーソルを上にのせたときに、スタイルシートを使って視覚的なフィードバックを返すようにすることで視覚表現がどれだけ強調されるのかを示すことである。 フォーカスされた要素又はカーソルが上にのせられた要素をハイライトすることで、その要素がインタラクティブであること、又はインタラクティブな要素の範囲内であるなどの情報を提供することができる。
複数のモードに対して視覚的なフィードバックを返すことが可能な場合もある。通常、それは要素の上にカーソルをのせるためにマウスを使ったり、又は要素にタブで移動するためのキーボードを使ったりする場合である。
この事例では、マウスやキーボードによってフォーカスされたことを示すスタイルが、リンク部分の要素に適用される。リンク部分の要素がフォーカスを受け取ったときに背景色を適用するために、CSS が使用されている。
表示されるコンテンツは次の通り:
コード例:
<ul id="mainnav">
<li class="page_item">Home</li>
<li class="page_item"><a href="/services">Services</a></li>
<li class="page_item"><a href="/projects">Projects</a></li>
<li class="page_item"><a href="/demos">Demos</a></li>
<li class="page_item"><a href="/about-us">About us</a></li>
<li class="page_item"><a href="/contact-us">Contact us</a></li>
<li class="page_item"><a href="/links">Links</a></li>
</ul>マウス又はキーボードでフォーカスを受け取ったときに、上記要素の背景色を変更するCSSは次の通り:
コード例:
#mainnav a:hover, #mainnav a:active, #mainnav a:focus {
background-color: #DCFFFF;
color:#000066;
}訳注: WAIC では C15-1 に関するアクセシビリティ・サポーテッド（AS）情報を提供している。
2014 年 6 月版のアクセシビリティ・サポーテッド（AS）情報: C15-1 では、「達成可能」と評価されている。WAIC はこの達成方法が検証した環境で広く動作すると判断している。
この事例では、背景色を変更することによって、フォーカスを受け取ったときに入力フィールドのスタイルを変更するために :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">Name: </label>
<input class="text" type="text" name="fname" id="fname" />
</p>
<p>
<input type="radio" name="sex" value="male" id="sm" /> <label for="sm">Male</label><br />
<input type="radio" name="sex" value="female" id="sf" /> <label for="sf">Female</label>
<p>
</form>
</body>
</html>
このコードの使用例: フォーカスを受け取る要素を強調表示する例。
この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
訳注: セレクターに関する仕様は、Selectors Level 3 を参照のこと。この仕様が、CSS 2 のセレクターに関する記述に取って代わることに注意されたい。CSS Snapshot 2018 も参照のこと。
フォーカスを得られる各要素に対して:
マウスを使って要素の上にカーソルをのせる。
背景又はボーダーの色が変化することを確認する。
キーボードでフォーカスを与える前に、マウスを動かして対象からカーソルを外す。
キーボードを使って、要素にタブ移動する。
背景又はボーダーの色が変化することを確認する。
その要素がフォーカスを失ったとき、背景又はボーダーの色の変更が除去されることを確認する。
上記、2, 5 及び 6 の結果が真である。
この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。
(X)HTML, CSS
これは、次の達成基準に関連する達成方法である:
この達成方法の目的は、ユーザエージェントによってテキストサイズが変更されたとき、テキストベースのフォームコントロールのサイズ変更を確かにすることである。これは、利用者によって必要とされるサイズでテキストが表示されるため、利用者がテキストを登録し、そして何を入力ボックスに登録したかを読むことができるであろう。
テキストベースのフォームコントロールは、ボタンと同様に入力ボックス (テキスト及びテキストエリア) を含んでいる。
お問い合わせフォームには、いくつかの初歩的な情報があり、利用者が自分の姓と名、電話番号、電子メールアドレスを入力するフォームコントロールがある。すべてのテキスト及びフォームコントロールは、拡大縮小可能な方法で実装されている。これは、Internet Explorer でフォントサイズが継承されていないため、フォームコントロール自体のフォントサイズを指定することも含まれる。
XHTML コンポーネント:
コード例:
<h1>Contact Us</h1>
<p>Please provide us with your details and we will contact you as soon as we can. Note that all of the form fields are required.</p>
<label for="fname">First Name</label><input type="text" name="fname" id="fname" /><br />
<label for="lname">Last Name</label><input type="text" name="lname" id="lname" /><br />
<label for="phone">Telephone</label><input type="text" name="phone" id="phone" /><br />
<label for="email">Email</label><input type="text" name="email" id="email" /><br />
<input type="submit" name="Submit" value="Submit" id="Submit" />CSS コンポーネント:
コード例:
h1 { font-size: 2em; }
p, label, input { font-size: 1em; }このコードの使用例: CSS によって入力のサイズを変更する例。
この事例は、テキストサイズ機能のある 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;}このコードの使用例: CSS によってラジオボタンとチェックボックスのサイズを変更する例。
利用者が入力したテキストを受け取るテキストベースのフォームコントロールにテキストを入力する。
コンテンツのテキストサイズを 200 ％まで増加させる。
テキストベースのフォームコントロールのテキストが 200 ％まで増加していることを確認する。
3. の結果が真である。
この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。
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」) は、任意の要素に使用でき、要素の内側にスペースを追加する。
次の例は、二つの部品で構成されている。テーブルの全ての面にマージンとテーブルセルにパディングを指定している CSS コードと、スペース画像を含まず、他のテーブル内にネストされていないテーブルの HTML コード。
コード例:
table { margin: .5em; border-collapse: collapse; }
td, th { padding: .4em; border: 1px solid #000; }
...
<table summary="Titles, authors and publication dates of books in Web development category">
<caption>Books in the category 'Web development'</caption>
<thead>
<tr>
<th>Title</th>
<th>Author</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>How to Think Straight About Web Standards</td>
<td>Andrew Stanovich</td>
<td>1 April 2007</td>
</tr>
</tbody>
</table>
この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
訳注: padding 及び margin 関連プロパティは、CSS Box Model Module Level 3 で再定義されている。
この達成方法に利用可能な検証はない。
CSS をサポートする全てのウェブコンテンツ技術
これは、次の達成基準に関連する達成方法である:
この達成方法は、CSS の text-align プロパティを使って、テキストのブロックを左または右に揃える方法を説明している。
以下の例では、テキストは左揃えになっている。スタイルシートでクラスを定義する:
コード例:
p.left {text-align: left}コンテンツで、そのクラスを呼び出す。
コード例:
<p class="left"> Lorem ipsum dolor sit …</p>以下の例では、テキストは右揃えになっている。
コード例:
p.right {text-align: right}コンテンツで、そのクラスを呼び出す。
コード例:
<p class="right"> Lorem ipsum dolor sit …</p>テキストが、左揃え又は右揃えのいずれかになっていることを確認する。
1.の結果が真である。
この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。
CSS
これは、次の達成基準に関連する達成方法である:
この達成方法の目的は、1 行が平均 80 字 (日本語なら 40 字) 以下になるようにして利用者がコンテンツを見ることができるように、CSS で指定することである。 こうすることで、テキストの長い行を読む際に、現在読んでいる位置を維持することが困難な読字障害や視覚障害のある利用者が、より効率よくコンテンツをを閲覧したり操作したりできるようになる。 この達成方法はまた、文字サイズの拡大に合わせてカラム幅を広くすることにもなり、それによって、文字サイズが大きくなるに従ってテキストの一部が欠けて読めなくなるような事態も発生しにくくなる。
この達成方法は、コンテンツ制作者に対して、CSS を使ってデフォルトでテキストの各行の幅を 80 字 (日本語は 40 字) 以下に制限することを要求するものではない、という点に注意してほしい。 それよりもむしろ、CSS レイアウトに相対サイズを用いることを推奨して、利用者が 1 行 80 字以下で読むことができないようなカラム幅には、設定しないようにする。
この例では、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>
この例では、div 要素の幅はスタイルシートでパーセントで指定されている。
コード例:
#main_content {width: 90%}
テキストのブロックは、コンテンツ内の div 要素の中に収められる。
コード例:
<div id="main_content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing ...</p>
</div>この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
訳注: CSS2 の「Box Model」は、CSS Box Model Module Level 3 で再定義されている。
カラム幅が、相対的な単位で定義されているかどうかの検査をする。
行の長さが、ブラウザのウィンドウをリサイズしても 80 字 (日本語は 40 字) 以下を維持していることを確認する。
1. 及び 2. の結果が真である。
この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。
CSS をサポートする全てのウェブコンテンツ技術
これは、次の達成基準に関連する達成方法である:
認知障害を持つ人の多くは、行間なしのテキストのブロックの中で各行を目で追っていくことに困難を覚える。 行の高さが文字サイズの 1.5～2 倍程度あると、前の行を読み終えて次の行へより簡単に読み進めていけるようになる。
要素の行の高さを 1.5 に設定。スタイルシートで要素の特性を設定している。
コード例:
p { line-height: 150%; }コンテンツ側では、その要素はドキュメント全体を通して行の高さが 1.5 になる。
コード例:
<p> Lorem ipsum dolor sit … </p>クラスを指定した要素の行の高さを1.5 (行送り1.5文字) に設定。スタイルシートでクラスの表示を定義。
コード例:
p.tall {line-height:150%}コンテンツ側では、以下のようにクラスを指定している。
コード例:
<p class="tall"> Lorem ipsum dolor sit … </p>行間を1行分空けるクラスを設定する。スタイルシートでクラスの表示を定義。
コード例:
p.tall {line-height:200%}コンテンツ側では、以下のようにクラスを指定している。
コード例:
<p class="tall"> Lorem ipsum dolor sit … </p>ブラウザでコンテンツを開く。
テキストのブロック内の行送りが 1.5 と 2 の間であることを確認する。
2.の結果が真である。
この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。
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:
first-line 疑似クラス、:first-letter 疑似クラス、:before 疑似クラス、:after 疑似クラスが挙げられているが、これらは全て疑似要素であり、原文の誤りである。
訳注 2:
MDN の疑似要素 (Pseudo-elements) に示されているように、例えば :after 疑似要素について、コロンを 1 個のみ用いるのは古い、互換性のための構文である。コロンを 2 個置くのが現在の正式な構文であることに注意されたい。
XHTML:
コード例:
<p>The Javascript method to convert a string to uppercase is <code>toUpperCase()</code>.</p>
CSS:
コード例:
code { font-family:"Courier New", Courier, monospace }XHTML:
コード例:
<p class="right">This text should be to the right of the viewport.</p>
CSS:
コード例:
.right { text-align: right; }XHTML:
コード例:
<p>09 <strong class="largersize">March</strong> 2008</p>
CSS:
コード例:
strong.largersize { font-size: 1.5em; }訳注: MDN の strong 要素で示されているように、現在の HTML では strong を重要性を表すものと定義している。
注記: この例で用いているスタイルは、情報や構造又は関係性を伝えるためのものではない。
XHTML:
コード例:
<p>09 <em class="highlight">March</em> 2008</p>
CSS:
コード例:
.highlight{ color: red; }注記: この例で用いているスタイルは、情報や構造又は関係性を伝えるためのものではない。
XHTML:
コード例:
<p>The article is available in the <a href="http://www.example.com" class="featuredsite">Endocrinology
Blog</a>.</p>
CSS:
コード例:
.featuredsite{ font-style:italic; }注記: この例で用いているスタイルは、情報や構造又は関係性を伝えるためのものではない。
XHTML:
コード例:
<p>This deal is available <span class="highlight">now!</span></p>
CSS:
コード例:
.highlight { font-weight:bold; color:#990000; }注記: この例で用いているスタイルは、情報や構造又は関係性を伝えるためのものではない。
XHTML:
コード例:
<p>09 <span class="caps">March</span> 2008</p>
CSS:
コード例:
.caps { text-transform:uppercase; }CSS の line-height プロパティを使って、段落の行間をフォントの高さの 2 倍に表示する。
XHTML:
コード例:
<p>Concern for man and his fate must always form the<br />
chief interest of all technical endeavors. <br />
Never forget this in the midst of your diagrams and equations. </p>
CSS:
コード例:
p { line-height:2em; }CSS の line-height プロパティを使って、テキストの行間をフォントの高さより少なく表示させる。テキストの 2 行目は、テキストの 1 行目の後に配置されて、あたかも 1 行目の一部だがやや下がっているように見える。
XHTML:
コード例:
<h1 class="overlap"><span class="upper">News</span><br />
<span class="byline">today</span></h1>
CSS:
コード例:
.overlap { line-height:0.2em; }
.upper { text-transform:uppercase; }
.byline { color:red; font-style:italic; font-weight:bold; padding-left:3em; }訳注: 原文では、一つ目の説明文が二つ目のコードの説明、二つ目の説明文が一つ目のコードの説明と「さかさま」になっているが、翻訳では正しい組み合わせに修正している。
CSS の letter-spacing プロパティは、2 行目のテキストでより近い文字を表示するために使用される。
XHTML:
コード例:
<h1 class="overlap"><span class="upper">News</span><br />
<span class="byline">today</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 プロパティは、見出しでさらに離れた文字を表示するために使用される。
XHTML の構成:
コード例:
<h1 class="upper2">News</h1>
CSS:
コード例:
.upper2 { text-transform:uppercase; letter-spacing:1em; }CSS の font-style プロパティを使って、バナーのテキスト要素を表示させ、background-image プロパティを使って、テキストの後ろの画像を表示させる。
XHTML:
コード例:
<div id="banner"><span id="bannerstyle1">Welcome</span>
<span id="bannerstyle2">to your local city council</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;
}CSS の :first-line 疑似クラスを使って、最初の行をより大きなサイズで赤色に表示する。
XHTML:
コード例:
<p class="startline">Once upon a time...<br />
...in a land far, far away... </p>
CSS:
コード例:
.startline:first-line { font-size:2em; color:#990000; }CSS の :first-letter 疑似クラスを使って、最初の文字をより大きなサイズで赤く、縦位置を中央揃えにして表示する。
XHTML:
コード例:
<p class="startletter">Once upon a time...</p>
CSS:
コード例:
.startletter:first-letter { font-size:2em; color:#990000; vertical-align:middle; }この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
CSS のプロパティを用いてテキストの視覚的提示を制御しているかどうかを確認する。
1. の結果が真である。
この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。
CSS を用いているウェブページ
これは、次の達成基準に関連する達成方法である:
C23 に関するユーザエージェントサポートノートを参照のこと。
ウェブページの中には、色を用いてコンテンツをグループ分けをしているものもある。この達成方法の目的は、ウェブページの構成やグループ分けを示す視覚的な情報を残しつつも、メインコンテンツ部分においては特定の文字色と背景色の組み合わせを利用者が選択できるようにすることである。利用者がページ上のすべてのテキストの文字色と背景色を上書きした場合、ウェブページの構成とグループ分けに関する情報は失われる可能性があり、そうなるとそのページを利用することも理解することも難しくなる。
コンテンツ制作者がメインコンテンツ部分の文字色と背景色を指定しなければ、ユーザスタイルシートを使うことなしに、ブラウザでそれらの色を変更することが可能になる。主要コンテンツ以外に対して文字色と背景色を指定するということは、ブラウザはそれらの色を変更しないことを意味する。
この達成方法を使うということは、コンテンツ制作者はメインコンテンツの領域に対してデフォルトの文字色と背景色の組み合わせを使うことになる。結果として、配色は利用者の好みの色に設定したユーザエージェントによって全面的に決められる。つまり、利用者のニーズに最も合う色の選択となり、利用者にとって最も読みやすい配色となる。
ある HTML のウェブページでは、ナビゲーションバー、メニューバー及び目次のような主要ではないコンテンツに対して、テキストと背景の色を指定するために CSS を使用している。しかし、メインコンテンツ部分に対しては、テキストにも背景にも色は指定していない。利用者は、自分に合った色とコントラストでメインコンテンツを閲覧するために、ブラウザで自分好みの色を設定する。ページの個々のセクションは、それでもなお視覚的にはっきり区別できる。
ある音楽雑誌のサイトには、白い背景に青い文字の記事がある。そのサイトのページの先頭近くでは、そのページに対して異なるスタイルシートを割り当てるリンクを提供している。新しいスタイルシートでは、テキストや背景に対しては色を指定していない。
この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
ブラウザの設定でテキスト、リンク及び背景の色を変更し、デフォルトの色と異なる、補助的なコンテンツに指定されている色とも異なるようする。
注記: ブラウザがそのページに指定されている色を無視するような設定にはしないこと。
メインコンテンツが新しいテキスト、リンク及び背景の色を使用していることを確認する。
補助的なコンテンツのテキスト、リンク及び背景の色が変わらないことを確認する。
2. 及び 3. の結果が真である。
この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。
CSS を用いているウェブページ
これは、次の達成基準に関連する達成方法である:
注記: この達成方法は、達成基準 1.4.8 を満たす他の達成方法と組み合わせなければならない。詳細については、 達成基準 1.4.8 を理解するを参照すること。
この達成方法の目的は、テキストを読むためにはテキストサイズ大きくする必要がある利用者が、1 行のテキストを横スクロールなしで読めるようにすることである。この達成方法を用いるには、コンテンツ制作者はテキストコンテナの幅をパーセント値で指定する。
ある新聞サイトでは、画面の中央にコンテンツを表示させている。コンテンツのコンテナ幅は、ページ全体に対するパーセンテージで指定しているため、ロービジョンの人がフォントサイズを大きくしたときも、ブラウザ画面のサイズにあわせてテキストが折り返しされ、横スクロールバーは表示されない。
全てのコンテナ幅をパーセント値で指定していることを確認する。
テキストサイズを 200% に増やす。
どの行のテキストを読むにも、横スクロールの必要がないことを確認する。
全てのテキストが、ページ上に見えたままであることを確認する。
1.、3. 及び 4. の結果が真である。
この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。
CSS を用いているウェブページ
これは、次の達成基準に関連する達成方法である:
C25 に関するユーザエージェントサポートノートを参照のこと。
この達成方法が意図するのは、ボーダー (境界) やレイアウトは CSS を用いて指定するが、文字色と背景色については利用者のブラウザや OS の設定に従って表示できるように指定しないでおく、ということである。これによって利用者は、自分が見たい色でテキストを見ることができるようになり、同時に、テキストの段組、セクションの周りのボーダー、又はメニューとメインコンテンツの領域を区切る縦線といったレイアウトやページデザインの外観は保つことができるようになる。また、ページに JavaScript のポップアップボックス又はドロップダウンメニューが含まれている場合に色が上書きされるという、一部のブラウザで起こる表示の問題も回避することができる。
ボーダーやレイアウトを示す表示は、文字色と背景色に関する柔軟性と同様に、認知障害のある多くの人にとって役に立つ。しかし、状況によってはこれら二つのニーズは相容れないこともある。それは、利用者がブラウザ上でコンテンツ制作者が選択した文字色と背景色を上書きする必要があるとき、ブラウザがボーダーやレイアウトまでも取り除いてしまうような場合である。これは、ページがシングルカラムでひとつのブロックが他のブロックの下に表示されることを意味し、そうなると、不必要な余白ができ、テキストの 1 行の長さが長くなってしまう。また、ポップアップボックスの背景が透過して、ページ上のテキストの上にボックスのテキストが重なってしまったり、ドロップダウンメニューが透過するかダークグレーの背景になってしまったりすることを意味する。コンテンツ制作者が文字色と背景色を一切指定せず、その一方でボーダーの色やレイアウトを指定した場合、一般的なブラウザのほとんどでは、(コンテンツ制作者が指定した) CSS の他の宣言に影響を与えずにテキストと背景の色を変更することができる。
あるウェブページは、HTML を使ってデザインされている。ページを構成する各領域を囲うボーダーの色を指定し、メニューがメインコンテンツ領域の左側にフロートするレイアウトにするために CSS が使用されている。文字色も背景色も指定されていない。利用者がブラウザで自分の色を設定すると、レイアウトを崩すことなしに、利用者に適した色とコントラストでページを閲覧できる。
HTML コンテンツの色を変更できるブラウザでウェブページを開く。
ブラウザの設定で、テキスト、リンク及び背景の色を変更し、ブラウザで現在の設定とは異なる色に変える。
注記: 「ページで指定されている色を無視する」というようなオプションを選択していないことを確認する。
ページに戻り、ページが新しいテキスト、リンク及び背景の色で表示されていることを確認する。
どのボーダーも消えずに表示されており、レイアウトも崩れていないことを確認する。
3. 及び 4. の結果が真である。
この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。
HTML 及び XHTML で使用される CSS
これは、次の達成基準に関連する達成方法である:
この達成方法の目的は、ソースコード上のコンテンツの順序が、コンテンツの視覚的提示の順序と同じになるようにすることである。 ソースコード上のコンテンツの順序は、コンテンツ制作者によって、CSS による提示結果とは異なるものにされる場合がある。 それぞれの順序はその状態では意味の分かるものになっているかもしれないが、支援技術の利用者にとっては混乱をもたらす可能性がある。 そのようなことは、(スクリーンリーダーのように) ソースコードに直接アクセスして内容を読み込んでいる場合や、キーボードで操作している場合などに、コンテンツ制作者による提示指定を利用者が無効にすることによって起こり得る。 もし、スクリーンリーダーを使ってページの内容をソースの順序で読んでいる全盲の利用者が、ページの内容を表示される順序で読んでいる利用者と一緒に働いていたら、異なる順序の情報に出くわすことで混乱するかもしれない。 スクリーンリーダーと組み合わせて画面拡大ソフトウェアを使用しているロービジョンの利用者は、読み上げている箇所を見失って混乱する可能性もある。 キーボード利用者は、ソースの順序が表示の順序と違っていると、次のフォーカスの場所が予想と違って困惑することもあるだろう。
表示結果の順序を前提としなければ、ページの全体を理解することが難しい状況もあるかもしれない。その場合、もしソースの順序が異なっていたら、理解することはさらに難しくなってしまう。
ソースの順序が表示結果の順序と同じである場合、すべての人が同じ (正しい) 順序でコンテンツを読んで情報のやり取りをすることができる。
注記: HTML の tabindex 属性には二つの機能がある。ひとつは要素をフォーカス可能にすることであり、もうひとつは要素にフォーカスの順序を割り当てることである。tabindex の値を 0 にするとその要素はフォーカス可能になるが、フォーカスが追加されるだけで順序はソースの通りになる。フォーカスの順序は、tabindex に指定された正の値だけで昇順となる。tabindex の値をドキュメントオブジェクトモデル (DOM) の要素の順序と異なるように設定することは、支援技術の利用者にとっては不適当な順序となることもある。これは主に、tabindex が CSS ではなく、HTML 又は XHTML で指定されていることによるものだ。この点については、将来の仕様で変更される可能性がある。それは、視覚的な提示の順序とは異なる可能性もある。
あるオンライン新聞の表示では、ナビゲーションバーをイニシャルロゴの直下であるページの左上に配置している。ソースコードでも、ナビゲーションの要素はロゴを指定している要素の後になっている。
この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
Microsoft Internet Explorer Developer Toolbar を使用すると、Microsoft の Internet Explorer でスクリプトによって生成された DOM のチェックが可能になる。
Firebug を使用すると、Firefox でスクリプトによって生成された DOM のチェックが可能になる。
訳注 1: 「Microsoft Internet Explorer Developer Toolbar」はページが削除されているが、代わりに開発者ツールを使用できる。詳細については、Internet Explorer 開発者ツールを理解するを参照のこと。
訳注 2: Firefox のアドオン「Firebug」は開発が終了している。代わりに開発ツールを使用できる。開発ツール | MDN も参照のこと。
訳注 3: Google Chrome の場合、類似のツールが利用できる。詳細については、Chrome DevTools | Tools for Web Developers | Google Developers を参照のこと。
訳注 4: Edge の場合も、類似のツールが利用できる。詳細については、Microsoft Edge Developer Tools - Microsoft Edge Development | Microsoft Docs を参照のこと。
エンドユーザに提供されているウェブページのコンテンツの順序を視覚的に検査する。
DOM を表示できるツールを使って、DOM 内の要素を検査する。
ソースコードセクション上でのコンテンツの順序が、ウェブページのコンテンツの視覚的提示と一致していることを確認する (例: 英語のページの場合、順序は上から下へ、左から右へとなる)。
3. の結果が真である。
この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。
CSS
これは、次の達成基準に関連する達成方法である:
注記: この達成方法は、達成基準 1.4.4 を満たす他の達成方法と組み合わせなければならない。詳細については、 達成基準 1.4.4 を理解するを参照すること。
C28 に関するユーザエージェントサポートノートを参照のこと。
この達成方法の目的は、テキストを含むボックス又はテキストの入力を受け付けるボックスの幅及び又は高さを、em 単位を用いて指定することである。これによって、文字サイズを変更できるユーザエージェントは、文字サイズの設定の変更に連動させてテキストを含むボックスの大きさも変更できるようになる。
テキストを含むボックスの幅及び又は高さを他の単位を使って指定していると、文字サイズの拡大によってテキストがボックスに入りきらなくなり、その一部が見えなくなってしまう危険性がある。
大枠のボックス (コンテナ) は、一般にウェブページ内のテキストの配置をコントロールし、そこにはレイアウトのための要素と構造を示す要素、及びフォームのコントロールを含むことができる。
この事例では、ウェブページのメインコンテンツ領域の左側にナビゲーションメニューを配置するために、id 属性の値として「nav_menu」を指定した div 要素を使用している。ナビゲーションメニューは、id 属性の値として「nav_list」を指定したテキストリンクのリストで構成されている。ナビゲーションのリンクを含むコンテナの幅は em 単位で指定されている。
コード例:
#nav_menu { width: 20em; height: 100em }
#nav_list { font-size: 100%; }この事例では、テキストを含む、又は利用者によるテキスト入力を受け付ける input 要素に「form1」というクラス名を指定している。フォントサイズをパーセント単位で、これらの要素の幅を em 単位で定義するために CSS の規則が用いられている。これによって、フォームコントロール内のテキストは、部分的に欠けて見えなくなってしまうことなく文字サイズの変更に合わせてリサイズされるようになる (フォームコントロールの幅自身も文字サイズに合わせてリサイズされるようになるため)。
コード例:
input.form1 { font-size: 100%; width: 15em; }この事例では、select 要素に「pick」というクラス名を指定している。フォンサイズをパーセント単位で、幅を em 単位で定義するために CSS の規則が使用されている。これによって、フォームコントロール内のテキストは、部分的に欠けて見えなくなってしまうことなく文字サイズの変更に合わせてリサイズされるようになる。
コード例:
select.pick { font-size: 100%; width: 10em; }この事例では、チェックボックス又はラジオボタンの input 要素に「choose」というクラス名を指定している。これらの要素の幅と高さを em 単位で定義するために CSS の規則が使用されている。これによって、フォームコントロールは、文字サイズの変更に合わせてリサイズされるようになる。
コード例:
input.choose { width: 1.2em; height: 1.2em; }テキストを含む、又はテキストの入力を受け付けるコンテナを特定する。
そのコンテナの幅及び／又は高さが em 単位で指定されていることを確認する。
2. の結果が真である。
この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。
クライアントサイド又はサーバーサイドのスクリプトとともに使用される CSS
これは、次の達成基準に関連する達成方法である:
ウェブページのデフォルトの提示が部分的に達成基準を満たさない場合、「適合要件」の条項 (適合要件 1) にある「代替版」を用意することで必要条件を満たすことができる。必要条件によっては、ページのあらゆる側面が主張したレベルに適合するように提示を調整できるリンク又はコントロールによってスタイルスイッチャーを呼び出すことで、コンテンツ制作者が同じ情報の複数バージョンの提供を避けることを可能にする。
この達成方法の目的は、ウェブページの適合している代替版を提供するために、スクリプトと組み合わせて CSS を使う方法を示すことである。この達成方法では、コンテンツの提示を制御するために使用されている CSS を変更するコントロールを提供することで、コンテンツ制作者はコンテンツの代替表示を提供する。ウェブページ内で提供されるコントロールは、そのレベルで要求される達成基準を満たすことができるような提示方法を利用者が選択及び変更することを可能にする。これによって、以下のような状況において、利用者が異なる提示方法を選択できるようになる:
パソコンの知識や権限がないことが原因で、利用者はブラウザや OS の設定を調整できないかもしれない
テキストが、ブラウザや OS の設定では対処できない方法で提供されている (テキストが画像の中に書き込まれているなど)
コンテンツのデフォルトの提示では、一部の利用者に対して十分なコントラストがない
この達成方法で達成させるには、以下の 3 項目を満たしていなければならない。
オリジナルのページのリンク又はコントロール自身は、代替の提示を通して達成基準を満たしていなければならない。例えば、スタイルスイッチャーが大きなフォントサイズを提供するために使用され、かつそのコントロールが小さいフォントを用いて提示される場合、利用者はそのコントロールを作動させてその代替の提示を見ることができないかもしれない。
新しいページは、オリジナルのページと同じすべての情報と機能を含んでいなければならない。
新しいページは、希望する適合レベルのすべての達成基準に適合しなければならない。たとえば、ひとつの要求は満たすが、それを使うと別の要求に適合しなくなってしまうような代替スタイルシートは使用できない。
スタイルスイッチャーを使う場合は、以下の課題と制限について検討することが重要である:
利用者が行うことのできる変更の数や形式は、ウェブページのコンテンツ制作者によって制御される範囲に限定される。できる限り多くの利用者のニーズに対応できるようにするために、さまざまな提示と設定項目が提供されるべきである。しかしながら、コンテンツ制作者は、利用者に多くのオプションを提供することに起因する、利用者にとっての設定可能な項目と複雑さの相互作用について熟考することも重要である。
あるページから別のページに移動しても利用者の設定を保持しておくには、利用者の機器にクッキーで保存したり (詳細はリソースのセクションを参照)、ウェブサーバーに保存されるプロファイルにクエリー文字列として渡して格納するなどの方法で実現できる場合がある。
スタイルスイッチャーを実装するための技術的手法は、利用者の環境においていくつかの技術が利用可能であることを前提としている (たとえば、多くのクライアントサイドソリューションは、JavaScript と CSS の両方が利用可能であることを必要とする)。これらのウェブコンテンツ技術が適合のために当てにできる場合を除き、クライアントサイドのサポートとウェブコンテンツ技術の利用可能性が保証されない場合には、コンテンツ制作者はサーバーサイドのウェブコンテンツ技術を使うことを検討すべきである。その代案としては、これらのウェブコンテンツ技術のサポートを適合のために当てにできない場合に、使用されているいくつかのウェブコンテンツ技術が有効でなくてもコンテンツが確実に適切な表現に変換されるような達成方法を使うことが、より良いページにするための効果的な方法となる。
この例では、文字色と背景色を変更するリンクを JavaScript で提供する。そのリンクは、利用者の環境で JavaScript がサポートされており、かつ有効な場合にのみ挿入されるようにすべきである。これは、そのリンク自身を挿入するためにスクリプトを使う (つまり JavaScript がサポートされており、かつ有効な場合にのみリンクが表示される) ことで実現できる。
以下のコードは、JavaScript に依存した色を変更するリンク並びに、ウェブページのコンテンツの一部、関連するスタイルシート規則、及び色を変更するリンクが選択されたときに使われるスタイルシートを変更する JavaScript を示している。
この例は、現在のページの表示だけに適用される。実稼働環境では、利用者がそのサイトで一度選択すれば済むように、その設定をクッキーまたはサーバーサイドのユーザプロファイルに保存することが望ましい。
XHTML (抜粋):
コード例:
In <head> section:
<link href="main.css" rel="stylesheet" type="text/css" />
<link id="currentCSS" href="defaultColors.css" rel="stylesheet" type="text/css" />
In <body> section:
<div id="colorswitch">
<p>Change colors:</p>
<ul class="inline">
<li><a href="#" onClick="javascript:changeColors('altColors1.css');return false;"
id="altColors1">dark blue on white</a></li>
<li><a href="#" onClick="javascript:changeColors('altColors2.css');return false;"
id="altColors2">yellow on black</a></li>
<li><a href="#" onClick="javascript:changeColors('altColors3.css');return false;"
id="altColors3">black on pale yellow</a></li>
<li><a href="#" onClick="javascript:changeColors('altColors4.css');return false;"
id="altColors4">black on white</a></li>
<li><a href="#" onClick="javascript:changeColors('defaultColors.css');return false;"
id="default">Reset to default</a></li>
</ul>
</div>
<div id="mainbody">
<h1>Conference report</h1>
<p>Last week's conference presented an impressive line-up of speakers...</p>
</div>
CSS (抜粋):
コード例:
In 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;
}
In defaultColors.css:
body, p {
color:#000000;
background-color:#FFFFFF;
}
h1, h2, h3 {
color:#990000;
background-color:#FFFFFF;
}
In altColors1.css:
body, h1, h2, h3, p, a {
color:#000066;
background-color:#FFFFFF;
}
In altColors2.css:
body, h1, h2, h3, p, a {
color:#FFFF33;
background-color:#000000;
}
In altColors3.css:
body, h1, h2, h3, p, a {
color:#000000;
background-color:#FFFF99;
}
In altColors4.css:
body, h1, h2, h3, p, a {
color:#000000;
background-color:#FFFFFF;
}
JavaScript (抜粋):
コード例:
function changeColors (newCSS)
{
document.getElementById('currentCSS').href = newCSS;
}このコードの実装サンプル: 異なる外部スタイルシートファイルを適用するために JavaScript のコントロールを使う
この例はコンテンツの一部分を単純に変更するもので、複雑なサイトやページに対してはあまり実用的なものではないかもしれない。この例では、特定のコンテンツを強調表示するための背景として (あらかじめ用意された選択肢から) 利用者が選択した色を反映させるために、クラス名を変更する目的でクライアントサイドの JavaScript を使用している。
注記: 以下のコードには、達成方法を理解しやすくする目的で、XHTML コード内から JavaScript を呼び出す部分が含まれている。しかし、コンテンツ制作者は、JavaScript を組み込むためのその時点でのベストプラクティスを採用することが推奨される (控えめな JavaScript とプログレッシブエンハンスメントについての詳細はリソースを参照)。
XHTML (抜粋):
コード例:
<h1>Product comparison</h1>
<p>The products you selected to compare are listed below.
Any differences between the products are highlighted and italicized.</p>
<p class="inlinePara">Change hightlight color: </p>
<ul class="inline">
<li><a href="#" onClick="changeColor('hghltLightYellow');return false;"
class="hghltLightYellow">light yellow</a></li>
<li><a href="#" onClick="changeColor('hghltBrightYellow');return false;"
class="hghltBrightYellow">bright yellow</a></li>
<li><a href="#" onClick="changeColor('hghltLightBlue');return false;"
class="hghltLightBlue">light blue</a></li>
<li><a href="#" onClick="changeColor('hghltBrightBlue');return false;"
class="hghltBrightBlue">bright blue</a></li>
<li><a href="#" onClick="changeColor('hghltLightRed');return false;"
class="hghltLightRed">light red</a></li>
<li><a href="#" onClick="changeColor('hghltDrkRed');return false;"
class="hghltDrkRed">dark red</a></li>
</ul>
<table width="400" border="1">
<tr>
<td> </td>
<th scope="col">Product 1</th>
<th scope="col">Product 2</th>
</tr>
<tr>
<th scope="row">Aspect 1</th>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
<th scope="row">Aspect 2</th>
<td class="hghltLightYellow">Yes</td>
<td class="hghltLightYellow">No</td>
</tr>
<tr>
<th scope="row">Aspect 3</th>
<td>Yes</td>
<td>Yes</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; }
}
}このコードの実装サンプル: CSS プロパティを変更するためにクライアント JavaScript を使う
このシンプルな例では、二つあるうちの一つの外部スタイルシートを割り当てるために PHP の $_GET を使用している。同様のことは、PHP の様々な機能を使って実現できる。この例では、現在のページの表示だけに適用される。実際の制作においては、利用者がそのサイトにおいて一度選択すれば済むように、設定をクッキーまたはサーバーサイドのユーザプロファイルに保存することが望ましい。
以下のコードは PHP であるが、同様のアプローチは様々なサーバーサイドのウェブコンテンツ技術によって可能である。
PHP と XHTML (抜粋):
コード例:
At the beginning of the PHP page:
<?php
$thestyle = $_GET['set'];
if ($thestyle == "style1")
{
$thestyle = "style2";
}
else
{
$thestyle = "style1";
}
?>
In the <head> section:
<link rel="stylesheet" type="text/css" media="screen" href="<?php echo($thestyle);?>.css" >
In <body> section:
<?php
if ($thestyle == "style1") {
echo "<a href=\"index.php?set=style1\">Switch to Style Sheet Two</a>";
}
else {
echo "<a href=\"index.php?set=style2\">Switch to Style Sheet One</a>";
}
?>
<div id="mainbody">
<h1>Conference report</h1>
<p>Last week's conference presented an impressive line-up of speakers...</p>
</div>
CSS (抜粋):
コード例:
In style1.css:
body, p { color:#000000; background-color:#FFFFFF; }
h1, h2, h3 {color:#990000; background-color:#FFFFFF; }
In style2.css:
body, h1, h2, h3, p, a { color:#FFFF00; background-color:#000000; }このコードの実装サンプル: 異なる外部スタイルシートファイルを適用するために PHP の $_GET を使う
以下の例では二つのファイルを使用している:
フォームを含む Java Server Page (JSP) 及びフォームの処理コード
上記ページ及び同様のスタイルを使用する他のページで使用される関数を含むインクルードファイル
サーバーサイドのコードは、利用者が選択したスタイルシートのための通常の link 要素及び他のスタイル用の「alternate stylesheet」のついた link 要素を出力する。そのコードは、二つめの例にあるように、クライアントサイドのコードのフォールバックとして使用することもできる。
フォームを含む 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>Change Style</title>
<%
String fStyle = "";
String styleName = "style";
String defaultStyle = "default";
Cookie[] cookies = request.getCookies();
// get style from post request parameters
if (request.getMethod().equals("POST") && 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">Select style: </label>
<select id="styleSelect" name="styleSelect">
<option value="default">Default (shades of green)</option>
<option value="wonb">White on black</option>
<option value="bonw">Black on white</option>
</select>
<input type="submit" value="Change Style" />
</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 スクリプトのようなサーバーサイドのスクリプトを使用することで、作成、読み込み、変更、及び削除することができる。クライアントサイドの実装に依存するということは、クッキーがサポートされその利用が許可されていることに加えて、利用者のコンピュータでその達成方法がサポートされており、かつ利用可能であることを要求することになる。
クッキーの生成と使用方法に関する情報はウェブ上にある。以下にいくつかの参考となるページを示す。
コンテンツ制作者はクッキーをサポートしているかどうかのテストを行い、もしサポートされていなければ別のコントロールを提供することが推奨される。この別のコントロールには、「この設定をすべてのページに適用する」のような設定の有効化に関する情報が含まれるべきである。メッセージや別のコントロールの設定に応じて利用者に向けて表示されるページは、クッキーの動作環境とそれ以外の環境で利用できるオプションについての情報を提供する。 利用者がクッキーを有効にできない状況において、もし利用者がサイトの閲覧を継続することを選択した場合、それはどうなることを意味するのかということについての説明を含める。そしてクッキーをサポートしている場合と同様の結果を得るにはユーザエージェントをどう設定すればよいかということについての情報を提供する。
例:「このブラウザはクッキーを受け付ける設定になっていません。このサイトでは、サイト内の全ページに渡って、あなたの変更した設定を適用するためにはクッキーが有効になっている必要があります。お使いの環境においてクッキーを有効にする方法については How to Enable Cookies を参照してください。ただし、これを実行するためには、お使いのコンピュータにおける管理者の権限が必要となる場合がありますので注意してください。クッキーが利用できない場合、あなたの設定はこのサイト内の他のページも含めて保存されません。弊社では、この機能をコンピュータの性能に関わらず提供できるよう努力しておりますが、それが実現できるまでの間でも、各ページにおいて設定を変更することは可能です。」
HTML 又は XHTML ページにおける JavaScript 実装をするための現在のベストプラクティスは、構造及び提示からコンテンツの動作をある程度分離させて使用することである。「プログレッシブエンハンスメント」及び「控えめな JavaScript」という用語は、ページの機能を向上又改善するが、JavaScript がサポートされていない場合でもコンテンツが機能し続けられるように優雅に変換するスクリプトを表すのによく使用されている。
より詳しく知るための推奨される情報:
利用者が代替となる提示を選択できるようなコントロールがウェブページに含まれていることを確認する。
個々の CSS スタイルのプロパティを変更する、又は代替スタイルシートをアクティブにすることによって、コントロールが提示の変更していることを確認する。
結果として表示されたページは、元のページの適合している代替版であることを確認する。
上記の全ての結果が真である。
この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。
CSS をサポートするすべてのウェブコンテンツ技術
これは、次の達成基準に関連する達成方法である:
この達成方法の目的は、利用者が彼らの好みに従ってコンテンツを見ることができるような方法で構造化された HTML テキストを画像化されたテキストに置き換えるための CSS の用い方を実践することである。この達成方法を用いるには、コンテンツ制作者はページの構造をマークアップするためにセマンティックな要素を用いる HTML ページを作ることから始める。次にコンテンツ制作者はページに対して 2 またはそれ以上のスタイルシートを作成する。一つめのスタイルシートは HTML テキストをテキストとして表現し、二つめはいくつかの HTML テキストをテキストの画像に置き換えるために CSS の機能を用いている。最後に、server-side 又は client-side scripting の使用を通して、コンテンツ制作者は利用者が利用するビューを切り替えることができるコントロールを提供する。
この達成方法は、文字画像を含まない表現が利用可能であり、かつ、利用者が代替表現に切り替えることができるユーザインタフェースコントロールが関連する達成基準を満たす限り、達成基準 1.4.5 又は 1.4.9 を満たすために用いることができる。可能であれば、コンテンツ制作者はデフォルトの表現として文字画像を含まない表現を配信すべきである。更に、切り替えのためのコントロールはページの先頭近くに配置されるべきである。
「画像の置き換え」の達成方法は、さまざまなユーザエージェント、構成、及び支援技術の課題との互換性 (詳細は「参照リソース」を参照) に取り組むために多様なものが開発されてきた。コンテンツ制作者がテキストの置き換えのために用いる数々のアプローチがある一方、その達成方法がスクリプト、CSS、画像 (又はそれらの組み合わせ) をオフにした場合に正確に動作するかどうか、支援技術との互換性を考慮することは重要である。すべての場合において動作する単一の解決法を見出すことは難しいので、この達成方法は、利用者が画像置き換えの達成方法を含んでいない表現へ切り替えることのできるコントロールを用いることを推奨している。
注記: この達成方法は、不適合コンテンツのための適合している代替版のページを提示するために、スタイル切り替えの達成方法との組み合わせで用いることができる。更なる情報として C29: 適合している代替版を提供するために、スタイルスイッチャーを使用すると適合している代替版を理解するを参照。
デザインスタジオのサイトは、利用者が彼らのウェブページの 2 種類の提示を見ることができるようにスタイルの切り替えを用いている。デフォルトのバージョンでは、見出しのテキストが文字画像で置き換えられている。ページ上のコントロールによって利用者はテキストで見出しを表現したバージョンへ切り替えることができる。
CSS:
コード例:
...
<div id="Header">
<h1><span>Pufferfish Design Studio</span></h1>
<h2><span>Surprising Identity and Design Solutions</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;
}この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
訳注: Background に関するプロパティは、CSS Backgrounds and Borders Module Level 3 で再定義されている。この仕様は W3C 勧告ではないが、CSS Snapshot 2018 によれば、今日の CSS を構成する仕様として位置づけられている。
ウェブページに利用者が代替となる提示を選択できるコントロールが含まれていることを確認する。
コントロールがアクティブである時、結果のページは文字画像が用いられている箇所全てにおいてテキスト (プログラムによる解釈が可能なテキスト) を含んでいることを確認する。
上記の全ての結果が真である。
この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。