【注意】この文書にはより新しいバージョンが存在します: WCAG 2.1 達成方法集

WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

FLASH12: クライアントサイドのバリデーションを提供し、アクセシブルな説明 (accessible description) によってエラーテキストを追加する

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

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

適用 (対象)

訳注: Flash Player は、2020 年末に提供を終了する計画が Adobe 社より発表されている (Adobe Blog窓の杜)。

WAIC での Flash に関する翻訳のメンテナンスも積極的に行う予定がないことに留意されたい。

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

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

FLASH12 に関するユーザエージェントサポートノートを参照のこと。Flash テクノロジーノートも参照。

解説

この実装方法の目的は、各フィールドに利用者が入力した値をクライアントサイドのスクリプトを用いてバリデートすることである。エラーが見つかった場合、無効なデータのあるコントロールにエラーメッセージが追加される。エラーメッセージは、コントロールのすぐ横に視覚的に配置される。また、エラーメッセージのテキストがコントロールのアクセシブルな「説明」に追加され、コントロールがフォーカスを受け取るときに、支援技術で読みやすくなる。

事例

事例 1: テキストフィールドのバリデート

この事例では、二つのテキストフィールド (「name」および「zip code」) を含むサンプルフォームが示されている。どちらのフィールドも必須入力である。フォームの「submit」ボタンが押されると、テキストフィールドの値が検証される。テキストフィールドに無効な値が含まれていると、_accProps オブジェクトがそのテキストフィールドに対して生成され、description プロパティにエラーメッセージが設定される。

注記: アクセシブルな「説明」(_accProps.description プロパティ) を使用する代わりに、エラーテキストをアクセシブルな「名前」(_accProps.name) に追加することもできる。これは、_accProps.description よりも広範囲の支援技術でサポートされている。

ActionScript 2.0 のコード

コード例:

import flash.accessibility. *;
import mx.accessibilty.ButtonAccImpl;
import mx.controls.Alert;
import mx.accessibility.AlertAccImpl;

AlertAccImpl.enableAccessibility();
ButtonAccImpl.enableAccessibility;

resetTextFieldAccNames();
Accessibility.updateProperties();

submit_btn.addEventListener("click", handleClick);
function handleClick(e) {
  //reset values
  resetTextFieldAccNames();
  resetTextFieldAccDescriptions();
  resetErrorLabels();
  //perform validation
  var errors =[];
  if (name_txt.text == '')
    errors.push([name_txt, "You must enter your name", name_error_lbl]);
  if (zipcode_txt.text == '')
    errors.push([zipcode_txt, "You must enter your zip code", zipcode_error_lbl]);
  else if (zipcode_txt.text.length != 5 || isNaN(zipcode_txt.text))
    errors.push([zipcode_txt, "Zip code must be 5 digits", zipcode_error_lbl]);
  
  //add validation error messages, if any
  var field, errorMsg, errorLabel;
  if (errors.length > 0) {
    //loop over encountered errors
    for (var i = 0; i < errors.length; i++) {
      field = errors[i][0];
      errorMsg = errors[i][1];
      errorLabel = errors[i][2];
      
      updateAccDescription(field, "Warning: " + errorMsg);
      errorLabel.text = errorMsg;
    }
  } else {
    Alert.show("Form field values were entered correctly");
  }
  Accessibility.updateProperties();
}

function updateAccName(obj, newName: String) {
  if (! obj._accProps)
  obj._accProps = new Object();
  obj._accProps.name = newName;
}

function updateAccDescription(obj, newDescription: String) {
  if (! obj._accProps)
  obj._accProps = new Object();
  obj._accProps.description = newDescription;
}

function getAccName(obj) {
  return obj._accProps? obj._accProps.name: "";
}

function resetTextFieldAccNames() {
  updateAccName(name_txt, "name, required");
  updateAccName(zipcode_txt, "zip code, required");
}

function resetTextFieldAccDescriptions() {
  updateAccDescription(name_txt, "");
  updateAccDesciption(zipcode_txt, "");
}

function resetErrorLabels() {
  name_error_lbl.text = "";
  zipcode_error_lbl.text = "";
}

この方法は、テキストフィールドのバリデートのサンプル(英語) で確認できる。また、テキストフィールドの検証のソース(英語) をダウンロードすることもできる。

検証

手順

Flash ムービーが送信可能でインタラクティブなフォームを提供する場合、次のことを確認する。

  1. エラーメッセージ (アラート) が、視覚的にコントロールのすぐ隣に配置されている。

  2. エラーメッセージ (アラート) が、コントロールのアクセシブルな「名前」または「説明」に追加されている。

期待される結果

この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。