設定RTE以建立無障礙的網頁和網站 configure-rte-for-accessibility
Adobe Experience Manager支援許多符合各種協助工具標準的協助工具功能。 此外,開發人員可以自訂或擴充功能,協助您使用使用RTF編輯器(RTE)的Experience Manager元件來建立無障礙內容。
在設計網頁並將內容新增至頁面時,內容開發人員和作者可使用RTE的功能來提供協助工具的相關資訊。 例如,透過標題和段落元素新增結構資訊。
若要設定和自訂這些功能, 設定RTE外掛程式 用於元件。 例如, paraformat
外掛程式可讓您新增其他區塊層級的語意元素,包括增加基本標題以外支援的標題層級數目 H1
, H2
、和 H3
預設提供。
RTE提供多種元件供觸控式使用者介面和傳統使用者介面使用。 不過,使用RTE的主要元件為 文字 兩個介面都可用的元件。 下圖顯示已啟用一系列外掛程式的RTE,包括 paraformat
:
圖:觸控式使用者介面中的文字元件。
圖:傳統使用者介面中的文字元件。
如需各種介面中可用的RTE功能之間的差異,請參閱 外掛程式及其功能.
設定外掛程式功能 configure-the-plugin-features
如需設定RTE的完整指示,請參閱 設定RTF編輯器 頁面。 這涵蓋所有問題,包括關鍵步驟:
透過在適當的環境中設定外掛程式 rtePlugins
CRXDE Lite的子分支,您可以為該外掛程式啟動所有或特定功能。
範例 — 指定RTE選取欄位中可用的段落格式 example-specifying-paragraph-formats-available-in-rte-selection-field
新的語意區塊格式可能可供下列使用者選取:
-
根據您的RTE,決定並導覽至 設定位置.
-
然後,內容作者可以從RTE的選擇欄位中使用段落格式。 這些檔案可存取:
- 使用觸控式UI中的段落枕邊圖示。
- 使用 格式 傳統UI中的欄位(彈出式選取器)。
透過RTE中透過段落格式選項提供的結構元素,AEM為開發無障礙內容提供了良好的基礎。 內容作者無法使用RTE來格式化字型大小、顏色或其他相關屬性,因而無法建立內嵌格式。 相反地,他們必須選取適當的結構元素(例如標題),並使用從「樣式」選項中選擇的全域樣式。 這可確保為使用自己的樣式表和正確結構內容瀏覽的使用者提供乾淨的標示,以及更豐富的選項。
使用來源編輯功能 use-of-the-source-edit-feature
在某些情況下,內容作者會發現必須檢查並調整使用RTE建立的HTML原始碼。 例如,在RTE內建立的內容片段可能需要額外的標籤,以確保符合WCAG 2.0。您可以透過以下專案完成此作業: 來源編輯 RTE的選項。 您可以指定 sourceedit
上的功能 misctools
外掛程式.
sourceedit
功能精心。 輸入錯誤和/或不支援的功能可能會造成更多問題。新增對更多HTML元素和屬性的支援 add-support-for-more-html-elements-and-attributes
若要進一步擴充AEM的協助工具功能,可根據RTE擴充現有元件(例如 文字 和 表格 元件)與其他元素和屬性。
下列程式說明如何延伸 表格 具有的元件 註解 向輔助技術使用者提供有關資料表資訊的元素:
範例 — 將標題加入表格屬性對話方塊中 example-adding-the-caption-to-the-table-properties-dialog
在 TablePropertiesDialog
,新增其他文字輸入欄位來編輯標題。 請注意 itemId
必須設為 caption
(即DOM屬性的名稱)以自動處理其內容。
在 表格,明確設定或移除DOM元素中的屬性。 此值由中的對話方塊傳遞 config
物件。 請注意,應使用對應的設定/移除DOM屬性 CQ.form.rte.Common
方法( com
是以下專案的捷徑 CQ.form.rte.Common
)以避免瀏覽器實作的常見陷阱。
範例 — 在文字中使用強調時建立無障礙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 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 /** * 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); }
-
儲存您的變更,使用 儲存全部……
getValue()
方法。- 此
itemId
每個對應欄位的屬性都會設定為適當DOM屬性的名稱(TablePropertiesDialog
)。 - 屬性是在DOM元素上明確設定及/或移除(
Table
)。