現在表示中:

AEM は以下の両方をサポートします。

  • 画像の代替テキストを含む標準のアクセシビリティ機能
  • リッチテキストエディター(RTE)を使用するコンポーネントでコンテンツを作成するときにアクセスできる追加の機能

コンテンツ作成者は、RTE の機能を使用して、アクセシビリティ情報を提供し、同時にコンテンツをページに追加できます。これには、見出しや段落の要素を使用した構造情報の追加が含まれる場合があります。

コンポーネントのRTE プラグインを設定することにより、これらの機能を設定およびカスタマイズできます。例えば、paraformat プラグインを使用すると、デフォルトで提供されている基本的な H1H2 および H3 以外にもサポートされる見出しレベルの数を拡大することを含めて、ブロックレベルの意味的要素を追加できます。

RTE は、タッチ操作向け UI とクラシック UI の両方から、様々なコンポーネントで使用できます。ただし、RTE を使用する第一のコンポーネントはテキストコンポーネントです。

AEM のテキストコンポーネントは、タッチ操作向け UI とクラシック UI の両方で使用できます。次の図は、paraformat を含む様々なプラグインが有効になっているリッチテキストエディターを示しています。

  • タッチ操作向け UI のテキストコンポーネント:

    タッチ操作向け UI の全画面表示モードのテキストコンポーネント(RTE)。
  • クラシック UI のテキストコンポーネント:

    クラシック UI のテキストコンポーネントの編集ダイアログ(RTE)。

注意:

クラシック UI とタッチ操作向け UI では、使用可能な RTE 機能に違いがあります。詳しくは、以下を参照してください。

プラグイン機能の設定

RTE 設定の完全な手順は、リッチテキストエディターの設定ページを参照してください。重要な手順を含めて、すべての問題に対応しています。

CRXDE Lite の該当する rtePlugins サブブランチ内でプラグインを設定することにより(次の図を参照)、そのプラグインのすべての機能または特定の機能をアクティベートできます。

CRXDE Lite で rtePlugin の例を表示。

例 - RTE 選択フィールドで使用可能な段落書式を設定

意味的ブロックの新しい書式を選択可能にするには、次の手順を実行します。

  1. 使用している RTE によって、設定場所を特定し、移動します。

  2. これにより、コンテンツ作成者は、指定した段落書式を RTE の選択フィールドから選択できます。アクセス方法は次のとおりです。

    • タッチ操作向け UI の段落(段落記号)アイコンを使用。
    段落(段落記号)アイコン。
    • クラシック UI の「書式」フィールド(ドロップダウンセレクター)を使用。

段落書式オプションを介して RTE で構造要素を使用できるので、AEM はアクセス可能なコンテンツの開発に適した基礎を提供します。コンテンツ作成者は、RTE を使用してフォントのサイズや色、その他の関連する属性を書式設定できないので、インライン書式設定は作成できません。代わりに、見出しなどの該当する構造要素を選択し、「スタイル」オプションから選択されたグローバルスタイルを使用する必要があります。これにより、独自のスタイルシートで閲覧するユーザーにとってはマークアップがクリーンになり、オプションも多くなるほか、コンテンツの構造が正確になります。

ソース編集機能の使用

コンテンツ作成者が、RTE を使用して作成された HTML ソースコードを調査し、調整することが必要になる場合があります。例えば、RTE 内で作成されたコンテンツの一部に、WCAG 2.0 への準拠を確実にするために追加のマークアップが必要になる場合があります。これをおこなうには、RTE のソースの編集オプションを使用します。misctools プラグインで sourceedit 機能を指定できます。

警告:

sourceedit 機能には次の特徴があります。

  • クラシック UI でのみ使用できます。タッチ操作向け UI ではサポートされていません。
  • 十分に注意して使用する必要があります。入力ミスをしたり、RTE でサポートされていない機能を導入しようとすると、さらに問題が発生する可能性があります。

追加の HTML 要素および属性のサポートの追加

AEM のアクセシビリティ機能をさらに拡張するには、RTE に基づく既存のコンポーネント(テキストコンポーネントやテーブルコンポーネント)を、要素や属性を追加して拡張することができます。

以下の手順では、データテーブルに関する情報を支援テクノロジーユーザーに提供するキャプション要素を含めてテーブルコンポーネントを拡張する方法について説明します。

例 - テーブルのプロパティダイアログへのキャプションの追加

TablePropertiesDialog のコンストラクターに、キャプションの編集に使用するテキスト入力フィールドを追加します。itemIdcaption(DOM 属性の名前)に設定し、コンテンツを自動で処理できるようにする必要があります。

テーブル」では、DOM 要素の属性を明示的に設定または削除する必要があります。この値は、ダイアログによって config オブジェクトに渡されます。DOM 属性は、対応する CQ.form.rte.Common メソッド(comCQ.form.rte.Common のショートカット)を使用して設定または削除し、よくあるブラウザーの実装によるピットフォールを避ける必要があります。

注意:

この手順は、クラシック UI のみに適しています。

手順説明

  1. CRXDE Lite を起動します。次に例を示します。http://localhost:4502/crx/de/

  2. 次のファイル
        /libs/cq/ui/widgets/source/widgets/form/rte/commands/Table.js
    を、以下にコピーします。
        /apps/cq/ui/widgets/source/widgets/form/rte/commands/Table.js

    注意:

    中間フォルダーが存在しない場合は、作成する必要があります。

  3. 次のファイル
        /libs/cq/ui/widgets/source/widgets/form/rte/plugins/TablePropertiesDialog.js
    を、以下にコピーします。
        /apps/cq/ui/widgets/source/widgets/form/rte/plugins/TablePropertiesDialog.js

  4. 次のファイルを編集用に開きます(ダブルクリックで開く)。

        /apps/cq/ui/widgets/source/widgets/form/rte/plugins/TablePropertiesDialog.js

  5. constructor メソッドで、以下の内容の行

    var dialogRef = this;

    の前に、次のコードを追加します。

    editItems.push({
        "itemId": "caption",
        "name": "caption",
        "xtype": "textfield",
        "fieldLabel": CQ.I18n.getMessage("Caption"),
        "value": (this.table && this.table.caption ? this.table.caption.textContent : "")
    });
  6. 次のファイルを開きます。

        /apps/cq/ui/widgets/source/widgets/form/rte/commands/Table.js

  7. transferConfigToTable メソッドの最後に次のコードを追加します。

    /**
     * Adds Caption Element
    
*/
    var captionElement;

    if (dom.firstChild && dom.firstChild.tagName.toLowerCase() == "caption")

    {
       captionElement = dom.firstChild;
    }
    if (config.caption)
    {
        var captionTextNode = document.createTextNode(config.caption)
        if (captionElement)
        {
           dom.replaceNode(captionElement.firstChild,captionTextNode);

        } else
        {
            captionElement = document.createElement("caption");
            captionElement.appendChild(captionTextNode);
            if (dom.childNodes.length>0)
            {
               dom.insertBefore(captionElement, dom.firstChild);
            } else
            {
               dom.appendChild(captionElement);
            }
        }
    } else if (captionElement)

    {
      dom.removeChild(captionElement);
    }
  8. すべて保存」を使用して変更を保存します。

注意:

プレーンテキストフィールドは、キャプション要素の入力値として許可されている唯一のタイプではありません。getValue() メソッドを使用してキャプションの値を指定する ExtJS ウィジェットならどれでも使用できます。

追加の要素および属性用に編集機能を追加するには、以下の両方を確認します。

  • 対応する各フィールドの itemId プロパティが適切な DOM 属性の名前(TablePropertiesDialog)に設定されていること。
  • DOM 要素で属性が設定/削除されていること(Table)。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー