WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

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

達成方法に関する重要な情報

これらの達成方法(参考)の使用法及び、それらがWCAG 2.0 達成基準(規定)とどのように関係するかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用(対象)セクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法があるからといって、WCAG 2.0 を満たすコンテンツを作成する際に、常にその技術が使用可能であるわけではない。

適用(対象)

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

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

解説

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

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

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

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

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

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

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

事例

事例 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; 
}

このコードの実装サンプル: 異なる外部スタイルシートファイルを適用するために JavaScript のコントロールを使う

事例 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; }
  }
}

このコードの実装サンプル: CSS プロパティを変更するためにクライアントJavaScriptを使う

事例 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; }

このコードの実装サンプル: 異なる外部スタイルシートファイルを適用するためにPHPの「$_GET」を使う

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

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

サーバーサイドのコードは、利用者が選択したスタイルシートのための通常の 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. 結果として表示されたページは、元のページの「適合している代替版」になっている。

判定基準

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