如何在 WordPress 網站的 HTML 中使用 ARIA

已發表: 2019-06-29

Web 開發的主要目標之一是創建引人入勝的用戶體驗。 您通常會通過在您的網站上包含交互功能和令人驚嘆的視覺元素來做到這一點。 但是，並非每個潛在訪問者都可以訪問這些方面，尤其是那些依賴屏幕閱讀器的訪問者。

幸運的是，有一個系統可以幫助您的所有用戶體驗您辛勤工作的成果。 將可訪問的富 Internet 應用程序 (ARIA) 合併到您站點的 HTML 中只需要一點額外的努力，並且可以帶來巨大的回報。 這篇文章將向您介紹 ARIA 以及如何使用它。 我們走吧！

ARIA 簡介：它是什麼以及為什麼要使用它

簡而言之，ARIA 是一種指定 HTML 屬性的方法，以便屏幕閱讀器可以準確識別它們，然後將它們傳遞給訪問者。 它是可訪問 Web 開發的一個關鍵方面，有助於為屏幕閱讀器用戶創建更準確的體驗。

這是因為在 HTML 中加入 ARIA 會影響瀏覽器為屏幕閱讀器修改網頁的方式。 修改後的內容顯示在可訪問性樹中，ARIA 負責將您的 HTML 元素轉換為該樹。

例如，假設您有一個帶有復選框的頁面，並且您在 HTML 中使用了 ARIA。 ARIA 會告訴屏幕閱讀器通知用戶頁面上有一個複選框，並指示它是否被選中。 原生 HTML 不能自己做到這一點。

想一想您使用網絡的頻率，不僅在工作中，而且在日常生活中。 現在想像一下，如果您無法使用大部分網絡。 您將獲得更少的教育、就業、醫療保健、信息、通信甚至娛樂資源。

使用無障礙 Web 開發的最佳實踐是儘自己的一份力量，使互聯網成為所有人（無論年齡或能力如何）機會均等的地方。 這被聯合國視為一項基本人權，是一個值得追求的目標。

但是，如果這還不足以讓您投入使用 ARIA，那麼您可能還需要注意，從業務角度來看，可訪問的開發也很有用。 它與搜索引擎優化最佳實踐重疊，並增加您網站的覆蓋面。 另外，在某些情況下，這是法律要求的。 換句話說，有很多理由可以採取一些簡單的步驟來使您的網站更易於訪問。

如何在 WordPress 網站的 HTML 中使用 ARIA（3 個關鍵實踐）

我們絕對建議您繼續就 ARIA 和 Web 可訪問性進行自我教育，這超出了本文的範圍。 您可能特別想考慮測試您網站的當前可訪問性。

也就是說，要開始在 WordPress 網站的 HTML 中使用 ARIA，您只需要知道三件事。 學習以下實踐應該為您提供堅實的基礎。

1. 將 ARIA 與語義 HTML 結合使用

在我們討論如何將 ARIA 應用於您的 HTML 之前，重要的是要注意什麼時候使用它是合適的。 雖然原生 HTML 本身並不能提供可訪問的 Web 內容，但有一些語義元素要么使 ARIA 變得不必要，要么如果使用不當就會與 ARIA 發生衝突。

語義元素——例如<header> 、 <figure>和<nav> ——描述了它們的 HTML 的用途。 將 ARIA 合併到這些元素中是多餘的，因為語義 HTML 已經暗示了元素的角色（我們稍後將更多地討論 ARIA 角色）。

此外，還有一些適用於使用 ARIA 的規則，以防止開發人員以與語義 HTML 衝突的方式使用它。 萬維網聯盟 (W3C) 有一個有用的表格，可以分解哪些語義 HTML 元素暗示了 ARIA 角色：

解釋 ARIA for HTML 規則的表格。

第一列指定一個 HTML 元素，而第二列列出隱含的角色。 如果元素列出了隱含的角色，則不需要為其包含額外的 ARIA 角色。 根據最佳實踐，第三列列出了每個 HTML 元素可以具有的角色。

2. 為 HTML 標籤添加角色

一旦您確定您正在處理的 HTML 元素需要使用 ARIA，您就可以開始使用“角色”和“屬性”。 您可能已經從上一節中了解了 ARIA 角色的作用。 它們指定標籤中包含的元素類型，並表示元素的用途。

因此，例如，如果您想創建警報以通知用戶他們需要安裝更新，您可以像這樣使用“警報”角色：

 <div role="警報">
<p>請安裝最新更新！</p>
</div>

正如我們之前解釋過的，如果元素是語義化的並且暗示了角色，則您不需要分配角色，並且您不應該為與其暗示的角色衝突的元素分配新角色。 但是，您還應該注意，您只能對每個元素應用一個角色。

可以這樣想——角色定義了元素是什麼。 一個元素不能同時是兩個東西，所以你應該選擇最能描述它的角色。 也就是說，當您需要時，您可以選擇將一個元素嵌套在具有不同角色的元素中。

例如，如果您想將上述警報添加到您的標題中，它可能如下所示：

 <header><div role="alert">
<p>請安裝最新更新！</p>
</div></header>

這不是說明單個元素既是標題又是警報，而是清楚地表明標題中包含警報。

3. 包括註釋狀態和屬性的屬性

屬性是構成 ARIA 的第二個元素。 它們與角色的不同之處在於，它們告訴屏幕閱讀器有關特定元素的重要信息，而不是定義該元素是什麼。 有兩種類型的 ARIA 屬性：

  • 狀態共享有關在用戶與其交互時可能會更改的功能的信息。 例如，這可能包括複選框或單選按鈕。
  • 屬性指出在使用過程中不太可能改變的特性。 標記另一個元素的元素，或元素所在的層次級別，都是屬性。

兩者都很容易發現，因為它們總是以aria-開頭，然後是正在使用的特定狀態或屬性。 例如，用於通知屏幕閱讀器默認情況下已填充複選框的狀態是aria-checked，如下例所示：

 <span 角色="複選框" 
詠嘆調檢查=“真”
tabindex="0">
</span>

同樣，用於記錄一個元素何時標記另一個元素的屬性是aria-labelledby。 例如，您可以將此屬性應用於圖像，以指示與其關聯的標題：

 <figure aria-labelledby="operahouse_1" role="group">
<img src="operahousesteps.jpg" alt="悉尼歌劇院">
<figcaption>我們在這裡看了歌劇<cite>塞維利亞的理髮師</cite>！</figcaption>
</圖>

我們建議您查閱 W3C 的允許角色、狀態和屬性列表，以查看您可以使用的更多屬性示例。

結論

在 Web 開發方面，創建可訪問的內容可能不是您的第一要務。 但是，通過遵循 Web 可訪問性最佳實踐，並在您的站點中加入 ARIA HTML，您可以發揮作用，讓每個人都可以使用 Web。

在 WordPress 網站上使用 ARIA 的三個關鍵實踐包括：

  1. 將 ARIA 與語義 HTML 結合使用。
  2. 向 HTML 標籤添加角色。
  3. 包括註釋狀態和屬性的屬性。

您對在 WordPress 網站上使用 ARIA 有任何疑問嗎？ 在下面的評論部分讓我們知道！

文章縮略圖圖片 EgudinKa / shutterstock.com