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

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

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

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

コンポーネントのRTEプラグイン🔗を設定することで、これらの機能を設定およびカスタマイズできます。 例えば、paraformatプラグインを使用すると、デフォルトで提供される基本のH1、H2およびH3を超えた見出しレベルの数の拡張をサポートするなど、ブロックレベルのセマンティック要素を追加できます。

RTEは、タッチ操作対応UIとクラシックUIの両方から、様々なコンポーネントで使用できます。 ただし、RTEを使用する主なコンポーネントは、Text​コンポーネントです。

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

• タッチ操作対応UIの​テキスト​コンポーネント：

  

• クラシック UI の​テキスト​コンポーネント：

  

プラグイン機能の設定

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

• プラグインとその機能
• 設定場所
• プラグインのアクティベートと features プロパティの設定
• RTE の他の機能の設定

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

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

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

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

2. プラグインをアクティベートすることにより、段落選択フィールドを有効にします。

3. 段落選択フィールドで使用可能にする書式を指定します。

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

   • タッチ操作対応UIで段落(pilcrow)アイコンを使用します。

   

   • クラシック UI の「書式」フィールド（ドロップダウンセレクター）を使用。

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

ソース編集機能の使用

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

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

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

次の手順は、支援テクノロジーユーザーにデータテーブルに関する情報を提供する​Caption​要素を使用して、Table​コンポーネントを拡張する方法を示しています。

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

TablePropertiesDialogのコンストラクターに、キャプションの編集に使用する追加のテキスト入力フィールドを追加します。 itemIdはcaption（DOM属性の名前）に設定して、コンテンツを自動的に処理する必要があります。

テーブル​で、DOM要素に対する属性の設定または削除を明示的に行う必要があります。 値は、configオブジェクトのダイアログによって渡されます。 DOM属性は、対応するCQ.form.rte.Commonメソッド（ comはCQ.form.rte.Commonのショートカット）を使用して設定または削除し、ブラウザー実装で一般的な問題が発生しないようにする必要があります。

手順説明

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. 「すべて保存」を使用して変更を保存します。