From e779eed458a580650b5572f547a64d8c8a53e9a6 Mon Sep 17 00:00:00 2001 From: Yukinori Nagano Date: Fri, 12 Nov 2021 10:16:07 +0900 Subject: [PATCH] =?UTF-8?q?SCR38=E3=82=92=E4=BD=9C=E6=A5=AD=E3=81=97?= =?UTF-8?q?=E3=81=BE=E3=81=97=E3=81=9F=E3=80=82=20(#1239)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- techniques/client-side-script/SCR38.html | 150 ++++++++--------------- techniques/index.html | 2 +- 2 files changed, 51 insertions(+), 101 deletions(-) diff --git a/techniques/client-side-script/SCR38.html b/techniques/client-side-script/SCR38.html index 6cede2665..a3a17a083 100644 --- a/techniques/client-side-script/SCR38.html +++ b/techniques/client-side-script/SCR38.html @@ -2,7 +2,7 @@ - SCR38: Creating a conforming alternate version for a web page designed with progressive enhancement + SCR38: プログレッシブエンハンスメントで設計されたウェブページに対して、適合している代替版を作成する @@ -12,111 +12,72 @@ -

Creating a conforming alternate version for a web page designed with progressive enhancement

+

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

-

Important Information about Techniques

-

See Understanding Techniques for WCAG Success Criteria for important information about the usage of these informative techniques and how - they relate to the normative WCAG 2.1 success criteria. The Applicability section - explains the scope of the technique, and the presence of techniques for a specific - technology does not imply that the technology can be used in all situations to create - content that meets WCAG 2.1. +

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

+

この達成方法 (参考) の使用法と、この達成方法が WCAG 2.1 達成基準 (規定) とどのように関係するのかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) のセクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法の存在は、その技術があらゆる状況で WCAG 2.1 を満たすコンテンツを作成するために使用できることを意味するものではない。

-

Applicability

+

適用 (対象)

HTML with scripting.

-

This technique is not referenced from any Understanding document.

+

この達成方法は、解説書から参照されていない。

-

Description

-

This objective of this technique is to offer a conforming alternate version for a - web page designed with progressive enhancement. The technique demonstrates how to - use a scripting technique to accomplish this by: +

解説

+

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

    -
  1. Storing the initial pre-enhanced version of the web page so that it can act as a "conforming - alternate version" for any later enhanced versions of the content; and +
  2. ウェブページの初期拡張バージョンを格納することで、後に拡張されたコンテンツのバージョンに対して「適合した代替バージョン」として機能できるようにし、かつ
    3. -
  3. Inserting a mechanism into all enhanced versions of the web page which allows a user - to revert the content back to the stored pre-enhanced Alternate Version. +
  4. すべての拡張されたバージョンのウェブページに対して、利用者がコンテンツを格納された初期拡張の代替バージョンに戻すことができる機能を実装する。
-

Web pages designed with progressive enhancement detect features in the web-enabled - accessing device (size, capability and software) to allow those supported web technologies - to be applied in layers on top of an HTML foundation. The basic content and functionality - of such a web page are available through the HTML foundation to anyone using a more - simple web-enabled accessing device, whilst enhanced versions of the page are created - to suit the different features in more advanced accessing devices. +

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

-

The current guidance for web pages delivered in alternate versions reads: "Note 4: - Alternate versions may be provided to accommodate different technology environments - or user groups. Each version should be as conformant as possible. One version would - need to be fully conformant in order to meet conformance requirement 1." With regard - to web pages designed with progressive enhancement this leaves the problem of which - version to select as the one fully conformant version - all whilst trying to ensure - that no set of users is disadvantaged by that choice. +

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

-

One solution to this challenge is to select the pre-enhanced version of the web page - (e.g. the DOM state created solely from the HTML in the source code in the absence - of support for scripts, styles or non-HTML plugins) as the "fully conformant version", - due to its broad reach, with regard to support, across all the possible web-enabled - devices accessing the content. +

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

-
Note
+
注記
-

This technique removes all scripts, styles, and plugins, but it is important to state - that this is not required for conformance with WCAG 2.0. An author could use a similar - technique, but retain a reduced set of styles and scripts in the “pre-enhanced” version. +

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

-

While this technique offers a way to base conformance claims on a single version, - authors should continue to work to ensure that each enhanced version of the web page - is as conformant as possible. +

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

-

Examples

+

事例

-

Example 1: Using JavaScript

-

The example uses JavaScript in the "accToggle.js" file to store the initial pre-enhanced - version of the web page, created solely from the HTML in the source code, so that - it can act as a "conforming alternate version" for any later enhanced versions of - the web page; and inserts a toggle link into all enhanced versions of the web page - which allows a user to revert the web page back to the stored pre-enhanced "Conforming - Alternate Version". Note: The "sayhello.js" file is simply there as an example payload - external file, and is to be replaced by any other external scripts which are desired. +

事例 1: JavaScript を使用する

+

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

-

The script in the acctoggle.js file stores the pre-enhanced version - assigning the - version the url postfix #accessible. Clicking the "WCAG 2.0 conforming alternate version" - link (inserted as the first child of the body element in any enhanced versions) changes the url to include the postfix "#accessible" - which then resets the html located in the body element and the head element to pre-enhanced code. The pre-enhanced state can be reached from the link, - or directly from a url typed into the browser. In addition, a link is inserted into - the pre-enhanced "Conforming Alternate Version" which allows the user to re-enhance - the web page (something which can also be done using the web browser's back button). +

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

-

acctoggle.js source code:

window.onload = function(event) {
+               
acctoggle.js ソースコード:
window.onload = function(event) {
 
     // store pre-enhanced element content
     var initialHead = document.head.innerHTML;
@@ -173,7 +134,7 @@ 
Example 1: Using JavaScript

         }
     };
 }
-		 
HTML web page source code:
<!DOCTYPE html>
+		 
HTML ウェブページソースコード:
<!DOCTYPE html>
   <html lang="en">
     <head>
         <title>Evaluera Ltd</title>
@@ -185,23 +146,15 @@ 
Example 1: Using JavaScript

         <p>Say: <span id="change">Goodbye</span></p>
     </body>
 </html>			
-		 
sayhello.js source code
var change = document.querySelector("#change");
+		 
sayhello.js ソースコード
var change = document.querySelector("#change");
          change.innerText = "Hello";
-

Example 2: Using EnhanceJS - A Javascript framework designed to improve the application - of Progressive Enhancement +

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

-

EnhanceJS is an open source JavaScript framework "designed to improve the application of Progressive - Enhancement by first testing browser capabilities for key Javascript and CSS support - before applying advanced styles and scripts to the page". In addition, the default - EnhanceJS script automatically creates a toggle link in any post-enhanced versions - of the page which allows a user to return the web page to its pre-enhanced state (in - EnhanceJS with default settings this is called the "low bandwidth version"). The setting - have been changed in EnhanceJS to indicate that the pre-enhanced state is to be considered - the "WCAG 2.0 conforming alternate version", rather than the "low bandwidth version". +

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

-

HTML Component:

<!DOCTYPE html>
+               
HTML コンポーネント:
<!DOCTYPE html>
 <html lang="en">
     <head>
     <script type="text/javascript" src="enhance.js"></script>
@@ -226,54 +179,51 @@ 
Example 2: Using EnhanceJS - A Javascript framework designed to improve the
-

Resources

-

Resources are for information purposes only, no endorsement implied.

+

参考リソース

+

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

-

Tests

+

検証

-

Procedure

+

手順

    -
  1. Check enhanced versions of the web page contain a link to the "Conforming Alternate - Version". +
  2. 拡張されたウェブページが「適合している代替版」へのリンクを含んでいる。
    3. -
  3. Check that the alternate version is a conforming alternate version of the original page and that it conforms to WCAG 2.0 at the claimed conformance - level. +
  4. 代替版が、オリジナルページの適合している代替版であり、かつ要求された適合レベルで WCAG 2.0 に適合していることを確認する。
-

Expected Results

+

期待される結果

    -
  • Checks #1 and #2 are true.
    • +
  • 1. 及び 2. の結果が真である。
diff --git a/techniques/index.html b/techniques/index.html index 24ef4ab72..cc43f4904 100644 --- a/techniques/index.html +++ b/techniques/index.html @@ -190,7 +190,7 @@

クライアントサイドスクリプトの達成
  • SCR35: アンカー及びボタンの onclick イベントを用いて、アクションをキーボード操作可能にする
  • SCR36: 静的なウィンドウ又は領域にある、動きのあるテキスト、スクロールするテキスト、又は自動更新されるテキストを利用者が表示できるメカニズムを提供する
  • SCR37: デバイス非依存な方法でカスタムダイアログを作成する
    • -
  • SCR38: Creating a conforming alternate version for a web page designed with progressive enhancement
    • +
  • SCR38: プログレッシブエンハンスメントで設計されたウェブページに対して、適合している代替版を作成する
  • SCR39: フォーカス又はホバー時のコンテンツをホバー可能、非表示可能及び表示が継続されるようにする

    • CSS の達成方法§