WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

SCR38: プログレッシブ・エンハンスメントで設計されたウェブページに対して、適合している代替版を作成する

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

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

適用(対象)

HTML with scripting.

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

解説

この達成方法の目的は、プログレッシブエンハンスメントで設計されたウェブページに適合する代替バージョンを提供することである。この達成方法は、スクリプトを用いて達成する方法を次のように示している:

  1. ウェブページの初期拡張バージョンを格納することで、後に拡張されたコンテンツのバージョンに対して「適合した代替バージョン」として機能できるようにし、かつ

  2. すべての拡張されたバージョンのウェブページに対して、利用者がコンテンツを格納された初期拡張の代替バージョンに戻すことができる機能を実装する。

プログレッシブエンハンスメントで設計されたウェブページはサポートされたウェブ技術を HTML 基盤のレイヤーに適用できるようにするため、ウェブ対応機器(サイズ、機能及びソフトウェア)の特徴を検出する。より高度なアクセス機器のさまざまな機能に合わせて拡張バージョンのページが作成される一方で、そのようなウェブページの基本的なコンテンツと機能は、よりシンプルなウェブ対応機器を使用している人なら誰でも HTML 基盤を通じて利用することができる。

現在の代替バージョンのウェブページの要件は次のようになっている: 「注記 4: 様々な技術環境又は利用者層に対応するために、複数の代替バージョンを提供してもよい。この場合、各バージョンは可能なかぎり適合したものでなければならず、適合要件 1を満たすためには、そのうちの一つのバージョンが完全に適合したものでなければならない。」プログレッシブエンハンスメントで設計されたウェブページは、どのバージョンを完全に適合したものとして選ぶかという問題を残しているが、どんな利用者においても不利な状況におかれないようにする。

この課題の解決策の 1 つは、広範囲のウェブ対応機器がコンテンツにアクセス可能なため、拡張前のウェブページ(例: スクリプト、スタイル、HTML ではないプラグインが無効時に作成される HTML のソースコードの DOM の状態)を「完全に適合したバージョン」として選択することである。

注記: この達成方法はすべてのスクリプト、スタイル、プラグインを除外するが、これは WCAG 2.0 に適合するために必須ではないことを示す必要がある。制作者は類似した技術を使用することができるが、還元されたスタイルとスクリプトを「拡張前」のバージョンで保つことができる。

この技術は 1 つのバージョンで適合表明を行う方法を提供するが、制作者は各拡張版のウェブページが可能な限り適合するために作業し続けるべきである。

事例

事例 1: JavaScriptを使用する

この事例は「accToggle.js」ファイル内でJavaScriptを使用し、HTMLソースコードのみで作成された拡張前のウェブページを格納することで、後に拡張されたウェブページの「適合した代替バージョン」として機能させることができる。そして、利用者がウェブページを最初の拡張前の「適合した代替バージョン」に戻せるよう、すべての拡張されたウェブページに切り替えリンクを設置する。注記: 「sayhello.js」ファイルは単なる外部のペイロードファイルの例であり、必要な他の外部スクリプトに置き換えられる。

accToggle.js ファイル内のスクリプトは拡張前のバージョンを格納し、このバージョンの URL に #accessible という接尾辞を付与する。「WCAG 2.0 適合する代替版」という(すべての拡張されたバージョンのページにおいて、body 要素の最初の子要素として設置される)リンクをクリックすることにより、接尾辞に「#accessible」とついたURLに変化し、body 要素と head 要素内のHTMLを拡張前のコードに初期化する。拡張前の状態はリンクから、又はURLをブラウザに直接入力することでアクセスできる。さらに、拡張前の「適合する代替版」にリンクが追加され、利用者がウェブページを拡張版にすることができる(これはブラウザの戻るボタンからでも可能)。

acctoggle.js ソースコード:


window.onload = function(event) {

    // 拡張前のコンテンツを保管する
    var initialHead = document.head.innerHTML;
    var initialBody = document.body.innerHTML;
    var initialURL = location.href;
    
    var runOnce = function() {
         // ページ読み込み毎に実行したいペイロード 例: Google Analytics コード
    }
    
    var setup = function() {
         // 適合している代替版のリンクを作成する

        var toggleEnhanced = document.querySelector("#toggle_enhanced");
        if (toggleEnhanced) {
            toggleEnhanced.outerHTML = "";
        }
        
        var nel = document.createElement("a");
        nel.id = "acctoggle";
        nel.setAttribute("href", "#accessible");
        nel.innerHTML = "WCAG 2.0 に適合している代替版";
        document.body.insertBefore(nel, document.body.firstChild);
        
         // ペイロード
        var s = document.createElement("SCRIPT");
        s.setAttribute("src", "sayhello.js");
        document.querySelector("HEAD").appendChild(s);   
       }
    
    setup();
    runOnce();
    
    window.onpopstate = function(event) {
        if (location.href.indexOf("#accessible") != -1) {
             // コンテンツを拡張前のバージョンに戻す
            document.head.innerHTML = initialHead;
            document.body.innerHTML = initialBody;
            
            // create enhanced version link
            var el = document.createElement("a");
            el.id = "toggle_enhanced";
            el.setAttribute("href", "");
            el.innerHTML = "拡張版";
            var back = function(e) {
                 e.preventDefault();
                 window.history.back();
            }
            el.addEventListener("click", back, false);
            document.body.insertBefore(el, document.body.firstChild);
        }
        if (location.href == initialURL) {
            setup();
        }
    };
}
		 

HTML ウェブページソースコード:


<!DOCTYPE html>
<html lang="ja">
    <head>
        <title>Evaluera Ltd</title>
        <meta charset="UTF-8" />
        <script src="accSwitch.js"></script>
    </head>
    <body> 
        <h1>テストページ</h1>
        <p>発言: <span id="change">さよなら</span></p>
    </body>
</html>			
		 

sayhello.js ソースコード


var change = document.querySelector("#change");
change.innerText = "こんにちは";		
		 

事例 2: EnhanceJS を使用する―プログレッシブエンハンスメントのアプリケーションを改善するために設計された Javascript フレームワーク

EnhanceJS は「高度なスタイルとスクリプトをページに適用する前に、JavaScript の主要な機能と CSS のサポートを最初にテストすることで、プログレッシブエンハンスメントのアプリケーションを改善するように設計された」オープンソースの JavaScript フレームワークである。さらに、デフォルトの EnhanceJS スクリプトは、利用者が拡張前のウェブページの状態に戻すことがでるよう、すべての拡張版のページに自動的に切り替えリンクを作成する。(EnhanceJS でデフォルトで設定されるこれを「低帯域幅版」と呼ぶ)。EnhanceJS ではこの設定は拡張前の状態が「低帯域幅版」ではなく、「WCAG 2.0 の適合している代替版」として認識されるよう変更されている。

HTML コンポーネント:


<!DOCTYPE html>
<html lang="ja">
    <head>
    <script type="text/javascript" src="enhance.js"></script>
    <script type="text/javascript">
        // 機能テストを実行
        enhance({
            loadStyles: [
                "example.css"
            ], 
            loadScripts: [
                "example.js"
            ],
           // 拡張モードで表示されるテスト
          forceFailText: "WCAG 2.0 に適合している代替版",
           // アクセシブルモードで表示されるテスト
          forcePassText: "拡張版"
        });
    </script>
    </head>
    ....

参考リソース

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

検証

チェックポイント

  1. 拡張されたウェブページが「適合している代替版」へのリンクを含んでいる。

  2. 代替バージョンが、オリジナルページの適合している代替版であり、かつ要求された適合レベルで WCAG 2.0 に適合している。

判定基準

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