配置RTE以建立可訪問的網頁和站點

Adobe Experience Manager支援符合各種協助工具標準的多種協助工具功能。 此外，開發人員可自訂或擴充功能，以提供使用Rich Text Editor(RTE)的Experience Manager元件來建立可存取內容的功能。

當設計網頁並將內容新增至頁面時，內容開發人員和作者可使用RTE的功能來提供協助工具相關資訊。 例如，透過標題和段落元素新增結構資訊。

要配置和自定義這些功 能，請為元件配置RTE插件 。 例如，外掛程 paraformat 式可讓您新增其他區塊層級的語義元素，包括將支援的標題層級數擴充至基本、 H1 H2，以及 H3 預設提供。

RTE可用於Touch-enabled用戶介面和Classic用戶介面的多種元件。 但是，要使用RTE的主元件是 Text （文本）元件，它可用於兩個介面。 以下影像顯示啟用了一系列插件的RTE，包括 paraformat:

圖： 啟用觸控的使用者介面中的文字元件。

圖： Classic使用者介面中的Text元件。

有關各種介面中可用的RTE功能之間的差異，請參 閱插件及其功能。

設定外掛程式功能

有關配置RTE的完整說明，請參 閱配置Rich Text Editor 頁。 這涵蓋所有問題，包括關鍵步驟：

• 外掛程式和功能。
• 配置位置。
• 啟動外掛程式並設定features屬性。
• 配置RTE的其他功能。

在CRXDE Lite中的適當子 rtePlugins 分支中設定外掛程式，即可啟動該外掛程式的所有或特定功能。

示例——指定RTE選擇欄位中可用的段落格式

新的語義塊格式可通過以下方式提供供選擇：

1. 根據RTE，確定並導航到配 置位置。

2. 啟用「段落選擇」欄位; 啟動 外掛程式。

3. 在「段落選取」欄位中指定您想要使用的格式。

4. 然後，內容作者可從RTE中的選擇欄位使用段落格式。 可以訪問這些檔案：

   • 使用啟用觸控的UI中的段落戳記圖示。
   • 使用 Classic UI中的「格式」欄位（快顯選取器）。

AEM透過段落格式選項在RTE中提供結構元素，為開發可存取的內容提供了良好的基礎。 內容作者無法使用RTE格式化字型大小或顏色或其他相關屬性，因而無法建立內嵌格式。 而必須選取適當的結構元素，例如標題，並使用從「樣式」選項中選擇的全域樣式。 這可確保清晰的標籤、更適合使用自己樣式表瀏覽的使用者以及正確結構化內容的選項。

使用來源編輯功能

在某些情況下，內容作者會發現有必要檢查並調整使用RTE建立的HTML原始碼。 例如，在RTE中建立的一部分內容可能需要額外的標籤，以確保符合WCAG 2.0。 這可以通過RTE的源 編輯 選項來完成。 您可以在外掛 程 sourceedit 式上指定 misctools 功能。

新增對更多HTML元素和屬性的支援

若要進一步擴充AEM的協助功能，可以使用其他元素和屬性來擴充以RTE(例如 Text 和 Table components)為基礎的現有元件。

以下過程說明如何使用 Caption元素擴展Table​​ （表）元件，該元素向輔助技術用戶提供有關資料表的資訊：

示例——將標題添加到「表屬性」對話框

在的建構函 TablePropertiesDialog式中，新增用於編輯標題的其他文字輸入欄位。 請注意， itemId 必須設 caption 定為（亦即DOM屬性的名稱）才能自動處理其內容。

在表 中，將屬性顯式設定或從DOM元素中刪除。 值由對象中的對話框傳 config 遞。 請注意，DOM屬性應使用對應的方法來設 CQ.form.rte.Common 定／移除( com 是捷徑 CQ.form.rte.Common)，以避免瀏覽器實作中常見的錯誤。

範例——在文字中使用強調功能時建立可存取的HTML

RTE可以使 strong 用 em 和標籤來取代 b 和 i。 將以下節點作為同級添加到對話 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. 使用「全部儲 存……」儲存變更