アクセス可能なWebページとサイトを作成するようにRTEを設定

Adobe Experience Managerは、様々なアクセシビリティ標準に従って、人間標準のアクセシビリティ機能をサポートしています。 また、開発者は、リッチテキストエディター(RTE)を使用するExperience Managerコンポーネントを使用して、アクセシブルなコンテンツの作成に役立つ機能をカスタマイズまたは拡張できます。

Webページをデザインし、ページにコンテンツを追加する場合、コンテンツ開発者および作成者はRTEの機能を使用してアクセシビリティ関連の情報を提供できます。 例えば、見出しや段落要素から構造情報を追加します。

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

RTEは、タッチ対応ユーザーインターフェイスおよびクラシックユーザーインターフェイス用の様々なコンポーネントで利用できます。 ただし、RTEを使用する主なコンポーネントは、両方のインターフェイスで使用できる​Text​コンポーネントです。 次の画像は、paraformatを含む、様々なプラグインが有効なRTEを示しています。

タッチ対応UIのフルスクリーンモードのテキストコンポーネント(RTE)。

図:タッチ対応ユーザーインターフェイスのテキストコンポーネント。

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

図:クラシックユーザーインターフェイスのテキストコンポーネント

様々なインターフェイスで使用できるRTE機能の違いについては、プラグインとその機能を参照してください。

プラグイン機能の設定

RTEを設定する詳細な手順については、リッチテキストエディターの設定ページを参照してください。 ここでは、主な手順を含むすべての問題について説明します。

CRXDE Lite内の適切なrtePluginsサブブランチ内にプラグインを設定すると、そのプラグインのすべての機能または特定の機能をアクティブ化できます。

CRXDE Lite で rtePlugin の例を表示。

例 — RTE選択フィールドで使用可能な段落書式を指定する

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

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

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

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

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

    • タッチ対応UIでの段落ピルクローアイコンの使用
    • クラシックUIで​形式​フィールド(ポップアップセレクター)を使用する。

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

ソース編集機能の使用

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

注意

sourceedit 機能の使用には十分に注意してください。タイピングの誤りやサポート対象外の機能は、問題を大きくする可能性があります。

より多くのHTML要素と属性追加のサポート

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

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

例 — テーブルプロパティダイアログにキャプションを追加する

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

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

メモ

この手順は、Classicユーザーインターフェイスにのみ適しています。

例 — テキストで強調を使用する場合、アクセシブルなHTMLを作成する

RTEは、bおよびiの代わりにstrongタグとemタグを使用できます。 次追加のノードは、ダイアログ内のuiSettingsノードとrtePluginsノードの兄弟として指定します。

<htmlRules jcr:primaryType="nt:unstructured">
    <docType jcr:primaryType="nt:unstructured">
        <typeConfig jcr:primaryType="nt:unstructured"
                useSemanticMarkup="{Boolean}true">
            <semanticMarkupMap
                    b="strong"
                    i="em"/>
        </typeConfig>
    </docType>
</htmlRules>

詳しい説明

  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)。

このページ

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now