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

Adobe Experience Manager支援符合各種無障礙標準的無障礙功能。 此外,開發人員可以自訂或擴充功能,提供功能,協助使用使用RTF編輯器(RTE)的Experience Manager元件來建立無障礙內容。

設計網頁並將內容新增至頁面時,內容開發人員和作者可使用RTE的功能,提供無障礙相關資訊。 例如,通過標題和段落元素添加結構資訊。

若要設定和自訂這些功能,請為元件設定RTE外掛程式。 例如, paraformat外掛程式可讓您新增其他區塊層級語義元素,包括將支援的標題層級數量擴展至預設提供的基本H1H2H3以外。

RTE提供多種元件,適用於觸控式使用者介面和傳統使用者介面。 但是,使用RTE的主要元件是​Text​元件,可用於兩個介面。 下列影像顯示啟用了一系列外掛程式的RTE,包括paraformat:

觸控式UI中以全螢幕模式顯示的文字元件(RTE)。

圖:觸控式使用者介面中的文字元件。

在傳統UI中編輯文字元件的對話方塊(RTE)。

圖:傳統使用者介面中的文字元件。

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

配置插件功能

如需設定RTE的完整指示,請參閱設定RTF編輯器頁面。 涵蓋所有問題,包括關鍵步驟:

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

CRXDE Lite顯示範例rtePlugin。

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

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

  1. 視您的RTE而定,決定並導覽至設定位置

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

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

  4. 然後,內容作者可從RTE中的選取欄位使用段落格式。 可存取:

    • 在觸控式UI中使用段落垂直圖示。
    • 使用傳統UI中的​Format​欄位(快顯選取器)。

透過段落格式選項,在RTE中提供結構元素,AEM為開發無障礙內容提供了良好的基礎。 內容作者無法使用RTE來設定字型大小、顏色或其他相關屬性的格式,因而無法建立內嵌格式。 相反,它們必須選取適當的結構元素,例如標題,並使用從樣式選項中選擇的全域樣式。 這可確保標籤簡潔,為使用自己的樣式表和正確結構化內容瀏覽的用戶提供更多選項。

使用源編輯功能

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

注意

請小心使用sourceedit功能。 輸入錯誤和/或不支援的功能可能會導致更多問題。

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

若要進一步擴充AEM的協助功能,可以根據RTE(例如​Text​和​Table​元件)擴充現有元件,並附加元素和屬性。

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

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

TablePropertiesDialog的建構子中,添加用於編輯標題的附加文本輸入欄位。 請注意,itemId必須設為caption(即DOM屬性的名稱),才能自動處理其內容。

在​Table​中,明確設定或將屬性移除到DOM元素或從中移除。 該值由config對象中的對話框傳遞。 請注意,應使用對應的CQ.form.rte.Common方法(comCQ.form.rte.Common的捷徑)來設定/移除DOM屬性,以避免瀏覽器實作的常見陷阱。

注意

此程式僅適用於傳統用戶介面。

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

RTE可以使用strongem標籤來取代bi。 將以下節點添加為對話框中uiSettingsrtePlugins節點的同級節點。

<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. 使用​Save All…​保存更改

注意

純文字欄位並非字幕元素值允許的唯一輸入類型。 您可以使用任何ExtJS Widget,透過其getValue()方法提供註解的值。

若要新增其他元素和屬性的編輯功能,請確定兩者:

  • 每個對應欄位的itemId屬性設為適當DOM屬性(TablePropertiesDialog)的名稱。
  • 在DOM元素上明確設定和/或移除屬性(Table)。

本頁內容