Show Menu
トピック×

アクセス可能なサイトを生成するための RTE の設定

AEM は以下の両方をサポートします。
  • 画像の代替テキストを含む標準のアクセシビリティ機能
  • リッチテキストエディター(RTE)を使用するコンポーネントでコンテンツを作成するときにアクセスできる追加の機能
コンテンツ作成者は、RTE の機能を使用して、アクセシビリティ情報を提供し、同時にコンテンツをページに追加できます。これには、見出しや段落の要素を使用した構造情報の追加が含まれる場合があります。
コンポーネン トのRTEプラグインを設定することで 、これらの機能を設定およびカスタマイズできます。 例えば、プラグインを使 paraformat 用すると、追加のブロックレベルセマンティック要素を追加できます。例えば、基本の範囲を超えてサポートされ、デフォルトで提供される見出しレ H1 ベルの数 H2 を拡張 H3 するなどです。
RTEは、タッチ対応UIとクラシックUIの両方から、様々なコンポーネントで使用できます。 ただし、RTEを使用する主なコンポーネントは Text コンポーネントです。
AEMの Text コンポーネントは、タッチ対応UIとクラシックUIの両方で使用できます。 次の画像は、様々なプラグインが有効なリッチテキストエディターを示していま paraformat す。
  • The Text component in the touch-enabled UI:
  • クラシック UI の​ テキスト ​コンポーネント:
クラシックUIのRTE機能とタッチ操作対応UIの間には違いがあります。 詳しくは、以下を参照してください。

プラグイン機能の設定

RTE 設定の完全な手順は、 リッチテキストエディターの設定 ページを参照してください。重要な手順を含めて、すべての問題に対応しています。
CRXDE Lite の該当する rtePlugins サブブランチ内でプラグインを設定することにより(以下の図を参照)、そのプラグインのすべての機能または特定の機能をアクティベートできます。

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

意味的ブロックの新しい書式を選択可能にするには、次の手順を実行します。
  1. 使用している RTE によって、 設定場所 を特定し、移動します。
  2. これにより、コンテンツ作成者は、指定した段落書式を RTE の選択フィールドから選択できます。アクセス方法は次のとおりです。
    • Using the paragraph ( pilcrow ) icon in the touch-enabled UI:
    • クラシック UI の「 書式 」フィールド(ドロップダウンセレクター)を使用。
段落書式オプションを介して RTE で構造要素を使用できるので、AEM はアクセス可能なコンテンツの開発に適した基礎を提供します。コンテンツ作成者は、RTE を使用してフォントのサイズや色、その他の関連する属性を書式設定できないので、インライン書式設定は作成できません。代わりに、見出しなどの該当する構造要素を選択し、「スタイル」オプションから選択されたグローバルスタイルを使用する必要があります。これにより、独自のスタイルシートで閲覧するユーザーにとってはマークアップがクリーンになり、オプションも多くなるほか、コンテンツの構造が正確になります。

ソース編集機能の使用

In some cases, content authors will find it necessary to examine and adjust the HTML source code created using the RTE. For example, a piece of content created within the RTE may require additional markup to ensure compliance with WCAG 2.0. This can be done with the source edit option of the RTE. この機能はプラグイン で指
Use the sourceedit feature carefully. タイピングの誤りやサポート対象外の機能は、問題を大きくする可能性があります。

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

AEM のアクセシビリティ機能をさらに拡張するには、RTE に基づく既存のコンポーネント( テキスト ​コンポーネントや​ テーブル ​コンポーネント)を、要素や属性を追加して拡張することができます。
The following procedure illustrates how to extend the Table component with a Caption element that provides information about a data table to assistive technology users:

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

のコンストラクターで、 TablePropertiesDialog キャプションの編集に使用する追加のテキスト入力フィールドを追加します。 コンテンツ itemId を自動的に処理す caption るには、に設定する必要があります(DOM属性の名前など)。
表で 、DOM要素に対する属性を明示的に設定または削除する必要があります。 値は、オブジェクトのダイアログによって渡さ config れます。 ブラウザーの実装で一般的な問題が発生するのを防ぐために、DOM属性は、対応するメソッド(のシ CQ.form.rte.Common ョートカット) com を使用して設 CQ.form.rte.Common 定または削除する必要があります。
この手順は、クラシック UI のみに適しています。

手順説明

  1. CRXDE Liteを起動します。 For example: 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. Add the following code at the end of the transferConfigToTable method:
    /**
     * 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. Save your changes using Save All
キャプション要素の値に対して許可される入力のタイプは、プレーンテキストフィールドだけではありません。 キャプションの値をメソッドを通じて提供するExtJSウィジェッ getValue() トは、どれでも使用できます。
追加の要素および属性用に編集機能を追加するには、以下の両方を確認します。
  • The itemId property for each corresponding field is set to the name of the appropriate DOM attribute ( TablePropertiesDialog ).
  • DOM 要素で属性が設定/削除されていること( Table )。