ベストプラクティス - アクセシビリティガイドライン

  1. Adobe Animate ユーザーガイド
  2. Animate の概要
    1. Animate の新機能
    2. ビジュアル用語集
    3. Animate の必要システム構成
    4. Animate キーボードショートカット
    5. Animate での複数のファイルタイプの取り扱い
  3. アニメーション
    1. Animate のアニメーションの基本
    2. Animate でフレームとキーフレームを使用する方法
    3. Animate でのフレームアニメーション
    4. Animate でのクラシックトゥイーンアニメーションの操作
    5. ブラシツール
    6. モーションガイド
    7. モーショントゥイーンと ActionScript 3.0
    8. モーショントゥイーンアニメーションについて
    9. モーショントゥイーンアニメーション
    10. モーショントゥイーンアニメーションの作成
    11. プロパティキーフレームの使用
    12. トゥイーンを使用した位置のアニメーション化
    13. モーションエディターを使用したモーショントゥイーンの編集
    14. トゥイーンアニメーションのモーションパスの編集
    15. モーショントゥイーンの操作
    16. カスタムイージングの追加
    17. モーションプリセットの作成と適用
    18. アニメーションのトゥイーンスパンの設定
    19. XML ファイルとして保存したモーショントゥイーンの操作
    20. モーショントゥイーンとクラシックトゥイーン
    21. シェイプトゥイーン
    22. Animate のボーンツールアニメーションの使用
    23. Animate でのキャラクターリグの操作
    24. Adobe Animate でのマスクレイヤーの使用
    25. Animate でのシーンの操作
  4. インタラクティブ機能
    1. Animate でのボタンの作成
    2. 他のドキュメントタイプ形式への Animate プロジェクトの変換
    3. Animate での HTML5 Canvas ドキュメントの作成およびパブリッシュ
    4. Animate のコードスニペットを使用したインタラクティブ機能の追加
    5. カスタム HTML5 コンポーネントの作成
    6. HTML5 Canvas でのコンポーネントの使用
    7. カスタムコンポーネントの作成例
    8. カスタムコンポーネントのコードスニペット
    9. ベストプラクティス - Animate を使用した広告
    10. バーチャルリアリティの作成と公開
  5. ワークスペースとワークフロー
    1. ペイントブラシの作成と管理
    2. HTML5 Canvas ドキュメントでの Google フォントの使用
    3. Creative Cloud ライブラリと Adobe Animate の使用
    4. Animate のステージとツールパネルの使用
    5. Animate ワークフローとワークスペース
    6. HTML5 Canvas ドキュメントでの Web フォントの使用
    7. タイムラインと ActionScript
    8. 複数のタイムラインの操作
    9. 環境設定
    10. Animate オーサリングパネルの使用
    11. Animate でのタイムラインレイヤーの作成
    12. モバイルアプリおよびゲームエンジン用アニメーションの書き出し
    13. オブジェクトの移動とコピー
    14. テンプレート
    15. Animate での検索と置換
    16. 取り消し、やり直し、ヒストリーパネル
    17. キーボードショートカット
    18. Animate でのタイムラインの使用
    19. HTML 拡張機能の作成
    20. 画像とアニメーション GIF の最適化オプション
    21. 画像および GIF の書き出し設定
    22. Animate のアセットパネル
  6. マルチメディアとビデオ
    1. Animate のグラフィックオブイジェクトの変形と組み合わせ
    2. Animate でのシンボルインスタンスの作成と操作
    3. 画像トレース
    4. Adobe Animate でのサウンドの使用方法
    5. SVG ファイルの書き出し
    6. Animate で使用するビデオファイルの作成
    7. Animate にビデオを追加する方法
    8. ビデオのキューポイントの操作
    9. Animate でのオブジェクトの描画および作成
    10. 線とシェイプの変更
    11. Animate CC での線、塗り、グラデーション
    12. Adobe Premiere Pro と After Effects の使用
    13. Animate CC のカラーパネル
    14. Animate で Flash CS6 ファイルを開く
    15. Animate でのクラシックテキストの操作
    16. Animate へのアートワークの挿入
    17. Animate に読み込まれたビットマップ
    18. 3D グラフィック
    19. Animate でのシンボルの操作
    20. Adobe Animate での線とシェイプの描画
    21. Animate でのライブラリの使用
    22. サウンドの書き出し
    23. Animate CC でのオブジェクトの選択
    24. Animate での Illustrator AI ファイルの操作
    25. スプレーブラシツールでのパターンの適用
    26. ブレンドモードの適用
    27. オブジェクトの配置
    28. コマンドメニューを使用したタスクの自動化
    29. 多言語テキスト
    30. Animate でのカメラの使用
    31. Adobe Scout での Animate の使用
    32. Fireworks ファイルの作業
    33. グラフィックフィルター
    34. サウンドと ActionScript
    35. 描画の環境設定
    36. ペンツールを使用した描画
  7. プラットフォーム
    1. 他のドキュメントタイプ形式への Animate プロジェクトの変換
    2. カスタムプラットフォームサポート
    3. Animate での HTML5 Canvas ドキュメントの作成およびパブリッシュ
    4. WebGL ドキュメントの作成とパブリッシュ
    5. AIR for iOS 用アプリケーションのパッケージ化
    6. AIR for Android アプリケーションのパブリッシュ
    7. デスクトップ用 Adobe AIR のパブリッシュ
    8. ActionScript パブリッシュ設定
    9. ベストプラクティス - アプリケーションでの ActionScript の整理
    10. Animate での ActionScript の使用
    11. ベストプラクティス - アクセシビリティガイドライン
    12. Animate ワークスペースのアクセシビリティ
    13. スクリプトの記述と管理
    14. カスタムプラットフォームサポートの有効化
    15. カスタムプラットフォームサポートの概要
    16. アクセシビリティコンテンツの作成
    17. カスタムプラットフォームサポートプラグインの操作
    18. ActionScript 3.0 のデバッグ
    19. カスタムプラットフォームサポートの有効化
  8. 書き出しとパブリッシュ
    1. Animate CC からファイルを書き出す方法
    2. OAM パブリッシング
    3. SVG ファイルの書き出し
    4. Animate によるグラフィックとビデオの書き出し
    5. AS3 ドキュメントのパブリッシュ
    6. モバイルアプリおよびゲームエンジン用アニメーションの書き出し
    7. サウンドの書き出し
    8. QuickTime ビデオファイルの書き出し
    9. ActionScript を使用した外部ビデオ再生の制御
    10. ベストプラクティス - モバイルデバイス向けのコンテンツ作成のヒント
    11. ベストプラクティス - ビデオ規則
    12. ベストプラクティス - SWF アプリケーションのオーサリングガイドライン
    13. ベストプラクティス - FLA ファイルの構造化
    14. FLA ファイルを Animate 向けに最適化するベストプラクティス
    15. ActionScript パブリッシュ設定
    16. Animate のパブリッシュ設定の指定
    17. プロジェクターファイルの書き出し
    18. 画像とアニメーション GIF の書き出し
    19. HTML パブリッシュ用テンプレート
    20. Adobe Premiere Pro と After Effects の使用
    21. アニメーションのクイック共有とパブリッシュ

アクセシビリティガイドラインについて

スクリーンリーダーは複雑で、これで使用するために開発された FLA ファイルで予期せぬ結果を簡単に招く可能性があります。このソフトウェアは、視覚障害のあるユーザーが実行して、Web サイトを読み上げるものです。テキストは、特別に設計されたソフトウェアを使用して読み上げられます。スクリーンリーダーはテキストコンテンツしか解釈できません。ただし、SWF ファイル全体にわたって提供する説明、ムービークリップ、イメージ、その他のグラフィックコンテンツも読み上げます。重要なイメージやアニメーションには説明を記述して、スクリーンリーダーが SWF ファイルのアセットも解釈できるようにします。これは、HTML Web ページにおける alt テキストと同等の SWF ファイルです。

注意:Animate アプリケーションは、Windows 上の Internet Explorer で表示する必要があります。これは、Microsoft Active Accessibility(MSAA)サポートがこのブラウザーに限定されているためです。

Flash Player では、Animate コンテンツをスクリーンリーダーに公開するために、Microsoft Active Accessibility(MSAA)を使用します。MSAA は Windows ベースのテクノロジーで、スクリーンリーダー、その他アプリケーションなどのユーザー補助技術どうしで情報をやり取りする標準化されたプラットフォームです。アプリケーションにおける変更などのイベントやオブジェクトは、MSAA を使用することでスクリーンリーダーに認識されます。

注意:

Flash Player 7 以降では、スクリーンリーダー技術がすべて利用できるわけではありません。MSAA が提供する情報は、サードパーティのプロバイダーで処理する必要があります。

アクセス可能なサイトの作成

Web サイトをアクセスできるようにするにあたっては、次に示すようにいくつかの異なる基準があります。

情報をスクリーンリーダーに公開する

テキストやイメージを認識可能にする

訪問者によっては、小さな文字のテキストを読んだり、小さなグラフィックを見るのに困難を感じる場合があります。これらのエレメントでは、SWF ファイルの拡大縮小可能なベクターグラフィックの利点を活かして、ユーザーがズームインできるようにします。

オーディオナレーションを提供する

ビデオコンテンツを含むなどの理由からスクリーンリーダーでは不十分な場合や、スクリーンリーダーを持たない訪問者のために、オーディオナレーションの提供を検討します。

オーディオナレーションにキャプションを提供する

訪問者によっては、サイトまたはビデオのオーディオナレーションを聴き取れない場合があります。このような人々には、キャプションの提供を検討してください。

情報の伝達に色を使用しない

色覚異常を持つ訪問者が数多くいる可能性があります。情報の伝達に色を使用する(例えば「緑のボタンをクリックすると 1 ページに進み、赤のボタンを押すと 2 ページに進みます」 など)場合は、同じ内容のテキストまたは音声を用意します。

従来は、多くのオンラインプレゼンテーション(ビデオなど)で、視覚障害のある訪問者がコンテンツにアクセスするための代替方法(ビデオのテキストによる説明など)が提供されてきました。しかし、Animate では、テキスト情報を直接スクリーンリーダーに提供します。通常これは FLA ファイルに追加設定または ActionScript を必要とすることを意味しますが、完全に独立したバージョンを作成する必要はありません。

SWF ファイルの一部は、スクリーンリーダーに公開できます。テキストフィールド、静止テキスト、動的テキストなどのテキストエレメント、ボタン、ムービークリップ、コンポーネント、および SWF ファイルの全体は MSA に準拠したスクリーンリーダーで解釈できます。

米国リハビリテーション法第 508 条は、障害を持つ人々が情報にアクセスできるようにするためのガイドラインを提供しています。第 508 条は特に、Web サイトに数通りの方法でアクセスできるようにする必要性について定めています。連邦政府のすべての Web サイトを含む一部の Web サイトではこれらのガイドラインに従う必要があります。SWF ファイルがすべての情報をスクリーンリーダーに伝達しない場合、その SWF ファイルは第 508 条に準拠していません。詳細については、第 508 条の Web サイトを参照してください。

多くの国々で、アクセス可能な Web サイトの作成に、従うべきガイドラインを設けています。あるいは、国以外の組織が確立したガイドラインに従っている国もあります。アクセシビリティと Web の規格の詳細については、W3C(World Wide Web Consortium)の Web Accessibility Initiative の Web サイトを参照してください。これらの規格およびガイドラインは、アクセス可能な HTML Web サイトの作成時に扱うべき要素を記述しています。そしてこの情報の一部は、Animate にもあてはまります。

SWF ファイル構造の公開と Web ページ内の移動

一部の SWF ファイルは表示されるという性質を持っているため、Web ページのレイアウトと移動方法が複雑で、スクリーンリーダーによる変換が難しい場合があります。SWF ファイルの全体的な説明は、その構造についての情報およびサイトの構造の中を行き来する方法を伝達するのに重要です。「ステージ」をクリックしてアクセシビリティパネルにこの説明を入力することによって説明を提供できます。また、サイトに独立した領域を設けて、この説明や概要を提供する方法もあります。

注意:

メイン SWF ファイルの説明を入力する場合、この説明は SWF ファイルが更新されるたびに読み取られます。このような冗長性は、情報のページを別に作成すると避けられます。

SWF ファイルを変更するような、移動にかかわるエレメントがあれば、ユーザーに通知します。その変更とは新しいボタンが追加されたとか、ボタン上に示されたテキストが変更になったというもので、変更はスクリーンリーダーが読み上げます。Flash Player 7 以降では、ActionScript を使用してこのようなプロパティの更新をサポートしています。アプリケーションの実行時にコンテンツが変更された場合、アクセシビリティ情報を更新することができます。

説明と繰り返しの制御

デザイナーと開発者は、SWF ファイルのアニメーション、イメージ、およびグラフィックに説明を割り当てることができます。グラフィックはスクリーンリーダーが解釈できるように、名前を付けます。グラフィックまたはアニメーションが重要な情報を SWF ファイルに伝達しない場合(おそらくは情報が装飾用か繰り返しであるために)、または SWF ファイル全体の説明のエレメントを概説した場合は、そのエレメントの説明を独立させないでください。不必要な説明を提供すると、スクリーンリーダーを使用するユーザーが混乱することがあります。

注意:

SWF ファイルのテキストを分割するか、ファイル内のテキストにイメージを使用した場合は、これらのエレメントに名前か説明を与えます。

1 つの目的のための、または 1 つの概念を持つネストされたムービークリップがいくつかある場合は、必ず次の作業を実行します。

  • SWF ファイルでこれらエレメントをグループ化します。

  • 親ムービークリップに説明を与えます。

  • すべての子ムービークリップをアクセス不可にします。

    これは非常に重要で、これを行わないとスクリーンリーダーが関連性のないすべてのネストされたムービークリップを説明しようとします。これはユーザーを混乱させるもとになり、ユーザーが Web サイトから離れてしまう可能性があります。この決定は、SWF ファイルに多数のムービークリップなど複数のオブジェクトがある場合は常に行ってください。1 つの説明を使用して全体的なメッセージが最もよい形で伝達される場合は、説明をオブジェクトの 1 つに与え、その他すべてのオブジェクトはスクリーンリーダーからアクセスできないようにします。

    SWF ファイルやアプリケーションをループさせると、スクリーンリーダーではループのたびに Web ページで新しいコンテンツが検出されるため、スクリーンリーダーが更新し続ける原因になります。スクリーンリーダーはコンテンツが更新されたと認識し、Web ページの一番上に戻ってコンテンツをもう一度読み始めます。読み直し不要のオブジェクトのループや更新は、スクリーンリーダーからアクセスできないようにします。

    注意:テキストなど、スクリーンリーダーが読み上げるインスタンスについては、アクセシビリティパネルの「説明」フィールドには、説明を入力しないでください。

色の使用

アクセス可能なファイルでは、色の使用について決める必要があります。色だけに頼って特定の情報またはディレクティブをユーザーに伝達することは避けてください。「新しい Web ページを表示するには青の領域をクリックし、音楽を聴くには赤の領域をクリックしてください」と表示された場合、色覚異常を持つユーザーは Web ページを操作できません。このようなページには、Web ページまたは別のバージョンに同じ意味のテキストを用意して、サイトにアクセスできるようにします。また、読みやすくするために、前景と背景の色が大きく違うかどうかもチェックします。明るい灰色のテキストを白い背景に配置すると、ユーザーにとって読みにくくなります。同様にテキストが小さいと、多くの訪問者が読みにくく感じます。コントラストがはっきりして大きくサイズ変更可能なテキストを使用すると、障害のない多くのユーザーにとっても読みやすくなります。

読み上げ順序、タブ移動、およびキーボード

読み上げ順序とタブ移動は、アクセス可能な Animate Web サイトを作成する上で重要な考慮事項です。インターフェイスを設計するときは、Web ページでの表示順と、スクリーンリーダーがそれぞれのインスタンスを説明する順序が異なる場合があります。読み上げ順序は制御してテストすることができます。SWF ファイルのタブ移動の制御も同様です。

読み取り順序の制御

デフォルトの読み取り順序は予測不可能で、Web ページのアセットや視覚的なレイアウトの配置と常に一致するとは限りません。レイアウトを単純にすることで、ActionScript を使用せずに論理的な読み取り順序を作成しやすくなります。しかし、ActionScript を使用して SWF ファイルの読み取り順序をテストすると、読み取り順序をよりよく制御できます。

注意:

SWF ファイル内のインスタンスを 1 つも忘れずに順序付けしてください。忘れた場合、読み上げ順序は予測不可能なデフォルトに戻ってしまいます。

タブ移動とコンテンツの制御

サイトのコンテンツの説明をスクリーンリーダーに頼る訪問者は、通常、オペレーティングシステムや Web ページでの移動にタブとキーボードコントロールを使用します。これは、画面が見えない状態ではマウスの使用が不便なためです。ムー ビークリップ、ボタン、テキストフィールドのインスタンスに tabIndex および tabEnabled の各プロパティを使用すると、アクセス可能な SWF ファイルにインテリジェントなタブ移動制御機能が提供されます。タブ移動の他に、キーを押すアクションを使用して SWF ファイルの中を行き来することもできますが、その情報はアクセシビリティパネルを使用して伝達する必要があります。ActionScript の Key クラスを使用して、キーを押すスクリプトを SWF ファイルに追加します。キーを押すスクリプトの使用対象となるオブジェクトを選択し、アクセシビリティパネルの「ショートカット」フィールドでショートカットキーを追加します。キーボードショートカットは、SWF ファイルの重要で頻繁に使用するボタンに追加します。

注意:ActionScript 3.0 では、tabIndex および tabEnabledInteractiveObject クラスのプロパティです。ActionScript 2.0 では、クラスの参照は不要です。

注意:

アクセス可能な SWF ファイルでは不可視のボタンは避けます。これは、スクリーンリーダーがこのようなボタンを認識しないためです(不可視のボタンとは、ボタンのヒット領域、つまりクリック可能な領域のみを定義したボタンです)。

多くの SWF ファイルでは、情報が高速かつ連続して収められているため、スクリーンリーダーがそのペースについていけなくなることが頻繁に起こります。SWF ファイルにコントロールを用意して、ユーザーがボタンを使用してファイル内を各自のペースで行き来できるようにし、必要であれば処理を一時停止できるようにします。

オーディオ、ビデオ、およびアニメーションの処理

音声を含むオーディオナレーションまたはビデオを提供するときは、耳が不自由なユーザーのためにキャプションを用意します。Animate でテキストフィールドを使用して、キャプションを含むビデオを読み込むことができます。さらに XML キャプションファイルを使用することもできます。ビデオのキューポイントを使用して、実行時にテキストフィールドでいつテキスト情報を更新するかを指定することができます。

Hi-Caption SE と Hi-Caption Viewer コンポーネントの使用については、Adobe Add-ons ページを参照してください。このサードパーティ拡張機能を使用すると、XML ファイルに保存したキャプションの作成と、実行時における SWF ファイルへのこれらキャプションのロード、その他高度な制御機能が利用できます。その他の方法として、キューポイントとテキストフィールドを使用して、キャプション情報を表示する方法があります。

アクセシビリティと Animate の拡張

Animate の拡張レイヤーを使用すると、高度なオーサリングを可能にする拡張機能を開発者が作成することができます。これによって、アクセシビリティを必要とする拡張機能をサードパーティ企業が開発することができます。SWF ファイルの検証やキャプションの追加には、いくつかのオプションが用意されています。

例えば、検証ツールでは、SWF ファイルの説明が欠落していないかを調べることができます。このツールは、インスタンスのグループに説明が追加されているかどうか、またはテキストがインスタンスにラベルを持っているかどうかを調べて、問題があれば通知します。また、このツールは SWF ファイルの読み取り順序も調べて、指定が必要なインスタンスをすべて見つけます。読み取り順序の指定は、SWF ファイルの分析後にダイアログボックスを使用して行うことができます。

現在利用できるサードパーティ拡張機能の詳細については、Adobe Add-ons ページを参照してください。

ファイルのテストおよび変更

スクリーンリーダーで使用することを目的とした SWF ファイルは、すべてテストします。新バージョン(小規模な変更も含む)の Flash Player がリリースされるたびに、SWF ファイルをテストしてください。そのほかに、次の方法でテストします。

  • Windows スクリーンリーダーに Window Eyes および JAWS を使用します。これらはそれぞれ異なる方法で SWF ファイルを処理するため、異なる結果が得られる場合があります。

  • スクリーンリーダーを使用せずに Web サイトを開き、マウスを使用せずにサイト内を行き来します。

  • モニターをオフにし、スクリーンリーダーだけを使用して、Web サイトを移動します。

  • オーディオナレーションを使用する場合は、スピーカーなしでサイトをテストします。

  • 対象の Web サイトの訪問者を代表して複数のユーザーがテストします。

注意:

様々なブラウザーをテストする必要はありません。SWF ファイルをスクリーンリーダーに公開するために使用されている技術(MSAA)が、Windows 上の Internet Explorer でしかサポートされていないからです。

スクリーンリーダーを使用して SWF ファイルを聴き取るときは、以下の点について確認します。

  • 読み取り順序は正確か。

  • SWF ファイルにショートカットについての説明があるか。

  • インターフェイスのエレメントについての適切で完全な説明があるか。

  • サイトの構造内を行き来するための適切な説明があるか。

  • SWF ファイルが更新されたときにファイルのコンテンツが読み上げられるか。

  • ステージ上のエレメントのコンテキスト(「再生」から「一時停止」に変更するボタンなど)を変更する場合、その変更はスクリーンリーダーによってアナウンスされるか。

    HTML の検証と違って、SWF ファイルの検証に使用できる公式ツールはありません。ただし、ファイルの検証に有効なサードパーティツールはいくつかあります。これらの拡張機能について詳しくは、Adobe Add-ons ページを参照してください。

アドビのロゴ

アカウントにログイン