用Divi 5測試可訪問性屬性

現在，可訪問性屬性與Divi 5完全兼容，為您提供了一種無編碼的方法來添加詠嘆調角色，標籤和其他屏幕讀取器的助手。如果您正在使用Divi 5，則是在不更改工作流程或設計的情況下構建網站可訪問性的最簡單方法。

隨著歐洲可及性法案於6月28日生效，Google越來越喜歡可訪問性的最佳實踐，現在是時候取得成功了。以下是可訪問性屬性的工作方式及其如何幫助您的網站達到現代可訪問性標準的方式！

Divi 5的可訪問性屬性

可訪問性屬性是一個Divi插件，可讓您可以直接從Divi Builder中添加ARIA角色，標籤和其他可訪問性幫助者，而無需編寫任何代碼。 ARIA（可訪問的Internet應用程序）屬性可幫助您為無法自行提供足夠上下文的元素添加含義，尤其是在Divi 5中構建自定義佈局時。

例如，如果您使用文本模塊在視覺上樣式設計標題或按鈕模塊來創建召喚，則屏幕讀取器將不會自動理解其角色。 ARIA角色和標籤使您可以定義每個元素是什麼以及輔助技術應如何解釋它，而無需更改視覺設計。這有助於確保您的Divi 5站點既可以訪問又靈活。

安裝插件後，它會自動將自定義輸入字段添加到您的各個部分，行，模塊和其他Divi元素中。 （要訪問ARIA字段，請單擊任何元素，然後轉到其高級選項卡。）

現在，您可以直接從Divi Builder中定義角色，添加ARIA標籤並改善屏幕閱讀器的支持。可訪問性屬性非常適合您的Divi工作流程，每年的費用僅為19美元。它為您提供了一種簡單，負擔得起的構建可訪問網站的方式。

獲取可訪問性屬性

為什麼可訪問性不再可選

可訪問性曾經是您可以推遲的東西，但不再是。現在，它會影響您的法律安全，搜索性能以及用戶的信任。

如果您的網站無法訪問，那麼您不僅僅是落後 - 您處於危險之中。為什麼：

• 法律訴訟正在上升：從2025年6月28日起，將執行《歐洲可及性法》。如果您的網站無法訪問，並且歐盟的人們使用它，則可以面臨罰款或其他罰款。該法律適用於大多數員工超過10名員工，每年賺取超過200萬歐元的企業，但也鼓勵較小的企業遵循它，因為……
• 可訪問性可能會影響您的排名：雖然可訪問性不是排名因素，但許多可訪問功能可能間接影響您的SEO。諸如Alt文本，正確的標題結構和描述性標籤之類的東西使您的網站更容易供用戶和搜索引擎理解。因此，如果您的網站很難導航，則可以在搜索結果中悄悄地落後。
• 無法訪問的網站將用戶驅逐出境：如果您的網站無法訪問，則殘疾人可能無法使用它。當他們迅速離開時，它可能會表明搜索引擎並損害您排名的用戶體驗差。更改諸如清晰的結構，可讀字體和簡單的鍵盤導航使您的網站可供所有人使用。

很容易假設可訪問性僅對大型企業很重要，但是即使您是一個較小的品牌，忽略它仍然會傷害您。

在Divi 5中設置可訪問性屬性

本節將帶您通過Divi 5網站中的可訪問性屬性中的安裝和訪問工具。

安裝插件

購買可訪問性屬性後，您將收到插件的zip文件。將其上傳到您的WordPress插件>添加插件>上傳插件。

現在，添加ZIP文件，然後單擊立即安裝。

最後，激活它。

激活後，您會注意到在每個元素的高級選項卡中添加了額外的ARIA字段。

現在，您可以直接從Divi Builder輕鬆地將這些可訪問性屬性添加到頁面上的每個元素。我們將在短短一分鐘內介紹一下。在此之前，讓我們快速查看您在可訪問性屬性儀表板中可用的所有選項。

可訪問性屬性演練

插件在您的Divi站點上處於活動狀態後，將添加到WordPress側邊欄中的可訪問性選項卡。單擊它以訪問您的儀表板，其中包含四個選項卡：管理員，模塊，元素和產品。

讓我們查看每個選項卡的選項：

“管理”選項卡

此選項卡為您提供帳戶級控件，例如管理訂閱（可以支持） ，檢查插件狀態，選擇是否刪除卸載上的數據以及將所有設置重置為默認設置。

“模塊”選項卡

它使您可以決定在Divi模塊中啟用哪些ARIA屬性。只有選定的選項出現在“高級”選項卡上。您可能需要讓它們全部打開。

並非每個模塊都需要可訪問性屬性。例如，您可以安全地跳過沒有字幕或鏈接的圖庫，例如分隔線，動畫圖像或圖像庫，因為它們不會為屏幕閱讀器添加有意義的內容。

要排除模塊，請在“兼容性”部分中輸入模塊slug（例如et_pb_image）。這告訴插件在添加ARIA字段時跳過它，並僅專注於實際需要可訪問性支持的模塊。

元素選項卡

網站的某些部分不是由Divi模塊構建的。它們可能來自您的主題，其他插件或普通的HTML。 “元素”選項卡可讓您使用CSS選擇器將ARIA屬性添加到網站的那些部分。您可能需要包括菜單，圖標，按鈕和表單字段等全局元素，而不是在Divi Builder內部創建的字段。

• ARIA MAIN：告訴屏幕讀取器您的主內容從哪裡開始，以便他們可以跳過菜單或側邊欄。
• ARIA隱藏：隱藏裝飾元素，因此輔助技術不會大聲讀出它們。
• ARIA鏈接：標記不是實際鏈接作為鏈接的可單擊元素。這有助於屏幕讀取器正確識別它們。
• ARIA按鈕：將按鈕角色添加到切換圖標或類似按鈕的樣式文本鏈接中。
• 必需的ARIA：即使HTML不這樣說，也會根據需要標記自定義表單字段。
• TAB索引：使用TAB鍵使重要元素可以達到，這有助於僅鍵盤導航。

每個設置允許您使用CSS選擇器添加或刪除這些角色。如果您不確定從哪裡開始，ARIA MAIN和ARIA按鈕是很好的第一選擇，通常會錯過且易於設置。

產品選項卡具有來自同一創作者的其他產品。

使用Divi 5中的可訪問性屬性

設置後，真正的工作發生在構建器內部。每個詠嘆調領域都有目的。讓我們看看它的作用，何時使用它以及它如何在真實佈局中有助於可訪問性。

1。將角色分配給具有ARIA角色的元素

ARIA角色字段使您可以將目的分配給代碼中可能不明顯的元素。例如，如果您使用Blurb模塊來創建呼叫聲，則屏幕讀取器不會自動將其識別為按鈕。您需要為其分配角色按鈕，以使其功能清晰，以使用戶使用語音命令或鍵盤快捷鍵導航。

像下面的這種情況下一樣，此字體包括一個按鈕。

要添加ARIA角色，請在選項上切換並分配以下值：

• ARIA角色類型作為小部件角色（這是按鈕和滑塊等交互元素的類別。）
• ARIA角色價值作為按鈕
• ARIA角色選擇器為.ET_PB_BUTTON （這是Divi的類用於按鈕模塊。）

2。添加帶有ARIA標籤的屏幕閱讀器的清晰標籤

雖然ARIA角色告訴輔助技術是什麼元素，但​​ARIA標籤解釋了它的作用。當元素沒有可見的文本，例如圖標，定制風格的按鈕或任何旨在互動互動但沒有大聲說出來的內容時，這一點尤其有用。讓我們使用同一示例將其分解。

我們已經添加了角色，但是按鈕文字說“現在捐款”。對於視覺用戶來說，這很好，但是使用屏幕讀取器的人可能需要更多的上下文，因為該按鈕多次出現。

要將標籤分配給此按鈕，只需在ARIA標籤上切換並添加一個簡短的標籤即可。

現在，該按鈕仍將在屏幕上說“立即捐贈”，但是屏幕閱讀器將閱讀完整的標籤，以幫助用戶準確了解按鈕的功能以及其領導地點。

3。提供額外的背景和ARIA描述

ARIA描述使屏幕讀取器對元素的詳細信息比標籤可以解釋的要多。雖然標籤講述了什麼是什麼，但描述說明了為什麼它很重要。

例如，假設您在一頁上有多個“立即捐贈”按鈕，每個按鈕都置於沿海清理，海洋教育或棲息地修復等不同原因之下。屏幕閱讀器用戶可能會直接降落在按鈕上，並錯過附近的內容。這是ARIA描述有幫助的地方。

讓我們拿第一張卡：沿海清理。為了添加更多上下文，您可以添加一個描述，例如“此捐贈支持海洋清理和野生動植物保護”，作為ARIA描述文本。

對其他按鈕做同樣的事情，使他們都在視覺上說“現在捐贈”，屏幕讀者也會宣布每個按鈕的描述不同。這為用戶提供了完整的上下文，而無需更改他們在屏幕上看到的內容。

4。屏幕讀取器隱藏裝飾元素

當您想在視覺上顯示某些內容，例如圖標或背景圖像，但不希望屏幕讀取器宣布它時，Aria隱藏了。這使體驗更加專注於依靠輔助技術的用戶。

例如，拍攝廣告系列的預覽圖像，例如海鷗的照片。它支持設計，但並未添加超出標題或描述中已經存在的任何新信息。在這裡，您可以使用隱藏的ARIA將其隱藏在屏幕讀取器中。

5。鏈接到其他信息，鏈條詳細信息

ARIA詳細信息使您可以將一個元素連接到另一個元素，從而提供額外的信息。例如，您可以將按鈕鏈接到附近的段落，以說明該按鈕的內容。當您希望輔助技術讀取更多不直接屬於點擊元素的上下文時，這很有用。

讓我們參加海洋教育部分。假設您希望段落文本描述“立即捐贈”按鈕。您可以使用ARIA詳細信息將按鈕鏈接到段落。

首先，在段落中添加一個唯一的ID。單擊包含描述的文本模塊，然後轉到高級> CSS ID和類。在CSS ID字段中輸入您的唯一ID。讓我們進入海洋 - 埃杜。

現在，此文本模塊具有一個ID，屏幕讀取器可以參考。

接下來，我們將ARIA詳細信息屬於該按鈕。單擊按鈕模塊，然後轉到其高級> ARIA詳細信息。在ID字段中輸入Marine-Edu。

這告訴輔助技術，該按鈕與ID“ Marine-Edu”的段落中的更多信息連接在一起。當您在不同地方使用相同的按鈕文本時，這也很有幫助，但是每個按鈕都意味著不同的東西。

您可能已經註意到，ARIA標籤，ARIA描述和ARIA詳細信息都以不同的方式添加了額外的上下文，因此最好不要將它們一起使用在同一元素中，因為它會使屏幕讀取器混淆。如果您已經在頁面上解釋了某些內容，請考慮使用ARIA詳細信息鏈接到該文本，而不是編寫新標籤或描述。

您只是看到可訪問性屬性如何使Divi Builder直接添加ARIA角色，標籤和其他關鍵可訪問性功能變得容易。它使您的網站無需編碼即可訪問。

獲取可訪問性屬性

Divi 5

可訪問性屬性會照顧可訪問性的技術方面。它還帶有附加組件（在可訪問性捆綁包中），可為您提供諸如鍵盤導航和視覺控件之類的額外功能，以提供更完整的包含解決方案。

1。可訪問性側邊欄

可訪問性側欄添加了一個浮動工具欄，該工具欄使用戶可以自定義其瀏覽體驗。具有移動性障礙的訪問者可以調整字體大小，切換到高對比度模式，啟用灰度和使用鍵盤導航。您還可以自定義它以匹配您網站的設計。

2。可訪問性調整

可訪問性調整添加了實用功能，可幫助用戶更輕鬆地瀏覽您的網站。其中包括用於更好導航的Skip鏈接，專注於大綱以幫助鍵盤用戶查看其位置以及其他可用的可用性的細微增強功能，而無需更改網站的佈局。

查看可訪問性捆綁包

立即使您的Divi 5網站訪問

可訪問性屬性為您提供了一種簡單的視覺方式，使您的Divi站點更具包容性。沒有編碼，沒有解決方法 - 只是直接構建在構建器中的正確工具。

它與Divi 5完全兼容，積極支持，現在享受50％的折扣，直到6月28日。只要報價運行，您就可以以每年36美元的價格獲得完整的可訪問性捆綁包，包括側欄和調整。如果您準備為所有人提供更好的網站，這是最簡單的開始方式。

獲得50％的可訪問性捆綁包