什么是 ally.js
ally.js 是一个 JavaScript 库，它提供了大量功能以帮助你开发更具可访问性的 web 应用程序。该库的主要目标是使您的应用程序易于使用，并确保所有用户都可以访问您的内容。
ally.js 提供了各种方法和工具，以帮助您处理键盘导航、焦点管理、无障碍表单验证和其他许多与可访问性相关的任务。
安装 ally.js
要使用 ally.js，请先安装它。为了安装最新版本的 ally.js，您需要在终端中运行以下命令：
--- ------- -------
这将自动下载并安装 ally.js 到您的项目中。
如何使用 ally.js
下面是一些例子，介绍如何使用 ally.js 中的一些方法和工具来处理不同的可访问性任务。
处理键盘导航
如果您的应用程序允许用户使用键盘浏览内容，那么您需要确保该体验对所有用户都是可访问的。ally.js 提供了几个方法，以帮助您管理键盘导航的行为。
以下示例演示如何使用 ally.when.key() 方法来捕获特定按键的事件：
------ - ---- - ---- ----------
----------
------- ------- - --------- -- -- -
------------------- --- ----------
------------
--
---在上面的示例中，我们使用了 when.key() 方法来监听 “Escape” 按键的事件。当用户按下该键时，escape 回调函数将被调用。
焦点管理
ally.js 还提供了一些方法，以帮助您管理焦点行为，并确保您的应用程序具有正确的焦点顺序和可访问性。
以下示例演示如何使用 ally.when.focusable() 方法来获取可聚焦元素：
------ - ---- - ---- ---------- ----- ----------------- - -------------------------------------------------- --------- -- ------------------------ -- -------------------------------
在上面的示例中，我们使用了 when.focusable() 方法来获取所有可聚焦的 HTML 元素，并将它们保存在名为 focusableElements 的数组中。这可以帮助您确保您的页面上的元素按照正确的顺序获得焦点。
无障碍表单验证
最后，ally.js 还提供了一些方法，以帮助您进行无障碍表单验证。这些方法可以检查表单字段是否有效，并向用户提供相应的反馈。
以下示例演示如何使用 ally.when.valid() 方法来检查表单字段是否有效：
------ - ---- - ---- ----------
----- ----------- - -------------------------------
----- -------------------- - ------------------------------------------
----------------------- -- -- -
----------------- -- --------
---
---------------------------------- ---------- -- -
-------------------------- -- -
---------------------
---
---在上面的示例中，我们使用 when.valid() 方法来检查名为 formElement 的表单是否有效。如果表单有效，则触发回调函数。
我们还使用了 when.invalid() 方法来检查名为 usernameInputElement 的输入字段是否有效。如果该字段无效，则触发回调函数，并提供一些关于问题的信息。
结论
通过使用 ally.js 库，您可以确保您的 web 应用程序具有良好的可访问性，并提供更好的用户体验。本文介绍了如何安装和使用 ally.js 中的某些方法和工具来处理键盘导航、焦点管理和无障碍表
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/35262