設定RTE以建立無障礙的網頁和網站 configure-rte-for-accessibility

Last update: Sun Jul 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

主題：
管理

建立對象：

管理員

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

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

若要設定和自訂這些功能，請設定元件的RTE外掛程式。例如，paraformat外掛程式可讓您新增其他區塊層級語意元素，包括擴充支援的標題層級數目，超出預設提供的基本H1、H2和H3。

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

在觸控式UI中全熒幕模式的文字元件(RTE)。

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

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

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

如需各種介面中可用的RTE功能之間的差異，請參閱外掛程式及其功能。

設定外掛程式功能 configure-the-plugin-features

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

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

CRXDE Lite顯示rtePlugin範例。

範例 — 指定RTE選取欄位中可用的段落格式 example-specifying-paragraph-formats-available-in-rte-selection-field

新的語意區塊格式可能可供下列使用者選取：

根據您的RTE，決定並導覽至設定位置。
啟用段落選擇欄位；方法是啟動外掛程式。
在[段落]選取欄位中指定您要使用的格式。
然後，內容作者可以從RTE的選擇欄位中使用段落格式。這些檔案可存取：
- 使用觸控式UI中的段落枕邊圖示。
- 使用傳統UI中的 Format 欄位（彈出式選取器）。

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

使用來源編輯功能 use-of-the-source-edit-feature

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

CAUTION

請謹慎使用sourceedit功能。輸入錯誤和/或不支援的功能可能會造成更多問題。

新增對更多HTML元素和屬性的支援 add-support-for-more-html-elements-and-attributes

若要進一步擴充AEM的協助工具功能，您可以利用其他元素和屬性，以RTE為基礎擴充現有元件（例如 Text 和 Table 元件）。

下列程式說明如何使用 Caption 元素來擴充 Table 元件，該元素將資料表的相關資訊提供給輔助技術使用者：

範例 — 將標題加入表格屬性對話方塊中 example-adding-the-caption-to-the-table-properties-dialog

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

在 Table 中，明確設定或移除DOM專案的屬性。此值由config物件中的對話方塊傳遞。請注意，應使用對應的CQ.form.rte.Common方法來設定/移除DOM屬性（com是CQ.form.rte.Common的捷徑），以避免瀏覽器實作中的常見陷阱。

NOTE

此程式僅適用於Classic使用者介面。

範例 — 在文字中使用強調時建立無障礙HTML create-accessible-html-for-text

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>

逐步指示 step-by-step-instructions

開始CRXDE Lite。例如： http://localhost:4502/crx/de/

複製:

/libs/cq/ui/widgets/source/widgets/form/rte/commands/Table.js

至:

/apps/cq/ui/widgets/source/widgets/form/rte/commands/Table.js

note note
NOTE
如果中間資料夾尚不存在，您可能需要建立這些資料夾。

複製:

/libs/cq/ui/widgets/source/widgets/form/rte/plugins/TablePropertiesDialog.js

至:

/apps/cq/ui/widgets/source/widgets/form/rte/plugins/TablePropertiesDialog.js。
開啟下列檔案進行編輯（按兩下即可開啟）：

/apps/cq/ui/widgets/source/widgets/form/rte/plugins/TablePropertiesDialog.js

在constructor方法中，行讀取之前：

code language-none
`var dialogRef = this;`

新增下列程式碼：

code language-none

code language-none
`editItems.push({ "itemId": "caption", "name": "caption", "xtype": "textfield", "fieldLabel": CQ.I18n.getMessage("Caption"), "value": (this.table && this.table.caption ? this.table.caption.textContent : "") });`

editItems.push({
    "itemId": "caption",
    "name": "caption",
    "xtype": "textfield",
    "fieldLabel": CQ.I18n.getMessage("Caption"),
    "value": (this.table && this.table.caption ? this.table.caption.textContent : "")
});

開啟下列檔案：

/apps/cq/ui/widgets/source/widgets/form/rte/commands/Table.js。

在transferConfigToTable方法的結尾新增下列程式碼：

code language-none

code language-none
/** * 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); }

/**
 * 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);
}

使用 全部儲存…… 儲存您的變更

NOTE

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

若要為其他元素和屬性新增編輯功能，請確定兩者：

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

recommendation-more-help

19ffd973-7af2-44d0-84b5-d547b0dffee2