從 ARIA 開始：增強網站的可訪問性

僅使用標準 HTML，現代網頁應用程式可能會將有輔助功能需求的使用者拒之門外。

HTML 是主要的線上標記語言，近 83% 的現有網站都在使用。儘管自創建以來 25 年來發生了一些變化，但即使是較新的迭代，例如 HTML5 和 AMP，也有很多不足之處，尤其是在可訪問性方面。這就是 ARIA 的用武之地。在本教程中，我將討論 ARIA 是什麼、為什麼它對您的網站有用，以及將其添加到您的網站的幾種方法。

p>

#什麼是 ARIA？

ARIA，也稱為 WAI-ARIA，代表 Web Accessibility Initiative 的可存取富互聯網應用程式。完整的規格文件可以在這裡找到。請注意，完整的規範文件相當密集，因此最好先閱讀這篇文章並查看下面連結的其他一些資​​源。

ARIA 的主要目的是允許 HTML 中的高級語義結構作為 HTML 語法繁重性質的對應物。換句話說，HTML 告訴瀏覽器事物的走向，而 ARIA 告訴瀏覽器它們如何互動。

誰負責 ARIA？

ARIA 是由 W3C（萬維網聯盟）主辦的計畫。該項目遵循與其他計劃相同的更新和編輯標準。他們還提供了一個 GitHub 儲存庫，其中包含多個測試，您可以執行這些測試來確保您的頁面正常運作。

我目前的網站標記有什麼問題？

大多數具有結構化、深思熟慮設計的網站在自適應技術（即螢幕閱讀器）方面都做得足夠好。然而，讓用戶能夠弄清楚如何使用您的網站和讓它易於使用是不同的事情。低視力使用者佔人口的近 2%，對他們來說，這種差異可能意味著在嘗試執行基本線上任務時節省大量時間和偵查工作。這可能是為遊客提供壯觀的體驗和為他們提供迷宮般的導航之間的區別。

除了傳統的可訪問性之外，ARIA 正在尋找一種技術，為標準互動提供新的視角。越來越多的語音系統、聚合瀏覽（例如汽車嵌入式電腦）和其他創新正在利用 ARIA，利用其增強的語義功能。

好的，但是它有什麼作用呢？

總體而言，ARIA 以語義上有意義的方式將元素連接在一起。它為用戶提供了有關互動的附加含義。以下是一些如何使用它的實際範例：

1. 關聯非巢狀元素：使用純 HTML，使用者的瀏覽器只能看到基於父/子關係的關係。然而，在某些情況下，我們可能需要一系列與 HTML 層次結構中的內容平行的按鈕。借助 ARIA，我們可以定義每個按鈕的控制器類型，以及它在文件其他位置控制什麼元素。
2. 聲明互動元素：雖然 HTML 提供了一些用於互動的元素，但 ARIA 定義了更多元素，從而可以更精細地描述頁面每個元素的功能。此外，這些可以指派給 HTML 標記，這些標記通常不用於此類目的，但在您的特定情況下可能有意義。例如，您可以將 25edfb22a4f469ecb59f1190150159c6 標記用於一系列您不希望由表單元素組成的複選框。
3. 即時區域更新通知：ARIA 提供的另一個功能是「即時」內容區域的定義。以這種方式定義內容區域時，只要該元素內的內容發生更改，ARIA 就會通知使用者。當確保弱視用戶知道您的頁面上發生了某些變化時，這非常有用。

將 ARIA 加入您的網頁

我們已經討論了 ARIA 的功能，現在讓我們來看一些最常見的範例。我們將在每個部分開始時簡要說明我們希望實現的目標，然後是如何實現該目標的程式碼範例。

使用 ARIA 建立替代標籤

說到替代標籤，大多數開發人員都熟悉 alt 屬性，該屬性常用於 a1f02c36ba31691bcfe87b2722de723b 標籤。這個標籤有一個重要的用途：描述它所附加的圖像以提高可訪問性（或作為常見的 SEO 策略，取決於您的觀點）。

ARIA 提供了一個名為aria-label 的類似屬性，可以附加到任何HTML 元素，不僅提高了映像的可訪問性，還提高了網站部分、表單控制項等的可訪問性。下面是一個範例：

<!-- adding alternative labeling to an image (with non-visible text) -->

<img aria-label="Descriptive image text" src="#" />


<!-- adding alternative labeling to an image (with visible text) -->

<img aria-labelledby="image-text-desc" src="#" />

<div id="image-text-desc">A text description of the image, visible on the screen</div>

定義 ARIA 特定的 UI 元素

HTML 已經提供了許多用於建立網頁的元素，但它們的主要焦點通常是一般性地定義一個區域並向使用者呈現網站的結構。 ARIA 提供了幾十個附加元素，這些元素更注重元素的使用方式，例如計時器、工具提示或進度列。

此处使用的示例是您可能会在表单上找到的工具提示。创建模式的方法有很多种，从触发一些 JavaScript 的链接到悬停在上面时创建模式的元素。这里缺少的一点是，尽管它可能对视力正常的用户有效，但弱视用户可能甚至不知道工具提示的存在。

您可以使用 ARIA 定义工具提示，如下所示：

<!-- Defining a question mark image as a tooltip UI element -->

<img src=”questionmark.png” role=”tooltip” />

可用的 ARIA 定义

为了扩展这些 UI 元素，这里简要列出了一些可以定义的最有趣的“角色”。完整的列表可在参考的规范文档中找到。

• 搜索
• banner
• 演示
• 工具栏
• status
• menuitem
• log
• dialog
• link

在父/子结构之外建立关系

现在让我们扩展一下我们之前讨论过的一点：HTML 的强制结构。虽然父母/孩子的关系有利于决定事情应该如何排序，但当需要更有意义的联系时，它就显得不足了。兄弟元素就是一个例子。一些库添加了遍历兄弟元素或其他形式的元素关系的功能，但这通常发生在 JavaScript 或标记之外的其他语言中。

ARIA 使我们能够在标记中直接定义这些关系，从而更轻松地对菜单项进行分组、创建非标准导航以及将控件附加到通常难以完成的元素区域。

让我们看一下如何使用它来将一些控件连接到内容区域：

<img src=”nextbutton.jpg” role=”button” aria-controls=”tutorial” />

<div id=”tutorial”>
    Your tutorial's content
</div>

此代码段表示 nextbutton.jpg 图像是一个按钮，它是下面教程 div 的控件。

在 ARIA 中创建“实时”元素

我们将在此处介绍的 ARIA 的最后一个功能是 aria-live 属性。虽然 ARIA 的大多数其他功能都处理语义连接，但这一功能直接涉及向用户提供内容或元素更改通知的想法。

对于许多视力不佳的人来说，可能无法立即清楚他们与您网站的交互是否导致了页面其他位置的变化。对于细微的变化尤其如此，例如可能会发生变化但保持相对相同长度的小文本摘要。通过使用此属性，每次定义元素内的内容发生更改时，您的用户都会收到通知。

我们可以将此属性添加到元素中，如下所示：

<div aria-live=”true”>
    Content that updates, ie. guided directions
</div>

让网络成为所有用户更美好的地方

略多于 2% 的美国人口带有某种形式的低视力标签，提高网站的可访问性可以显着提高网站的覆盖范围。对于那些网站覆盖多个国家的公司来说，这个数字会更大。除了可访问性之外，ARIA 还为非浏览器界面提供了一种利用您的网站的方法，许多基于语音的设备已经提供了支持。

实施 ARIA 可以帮助您的用户，也可以帮助您的流量，所以开始吧！

我是否遗漏了任何细节，或者您还有其他问题吗？请在下面发表评论！

如果您想深入了解完整的 ARIA 文档或尝试官方测试工具，请查看以下链接：

• ARIA 创作实践
• 完整的 ARIA 规范文档
• 测试工具示例报告

以上是從 ARIA 開始：增強網站的可訪問性的詳細內容。更多資訊請關注PHP中文網其他相關文章！