迹忆客 专注技术分享

在本文中，我们将介绍 HTML 角色属性及其用途。

HTML中 role 属性介绍

HTML 中的角色属性属于 WAI-ARIA（Web 可访问性倡议 - 可访问的富互联网应用程序）规范。 WAI-ARIA 的主要目的是提高网络界面的可访问性，以支持残障人士。

它让屏幕阅读器使用我们提供的信息来阅读 HTML 文档的内容。 role 属性定义描述语义的 HTML 元素的角色。

首先，让我们了解语义和非语义 HTML 元素之间的区别。 <p> 、<table> 和 <li> 等元素是表示含义的语义元素。

它更注重它的功能而不是它的外观。 元素的具体含义呈现给浏览器和开发者。

例如，<p> 标签创建段落。

另一方面，非语义 HTML 元素是那些没有明确解释其内容的元素。 例如 <div> 和 <span> 等标签。

此类标签不包含有关内容的任何信息。 换句话说，它们没有语义。

role 属性为 HTML 中的非语义元素提供语义。 我们可以使用 role="role_type" 格式为元素编写角色。

这里，role_type 是 ARIA 中指定的角色。 在下面的部分中，我们将看到角色属性的不同用例。

在 HTML 中使用辅助功能的 role 属性

role 属性的主要目的之一是提供可访问性，尤其是对于视障用户。 使用屏幕阅读器，角色属性会读出特定元素的确切用途或行为。

让我们考虑一个 Web 应用程序用户视力受损的场景。 我们需要创建一个登录用户的按钮。

但是，框架不允许我们使用 <button> 元素。 尽管框架无能为力，但我们仍然可以使用 <a> 标签使其成为可能。

但是，除非我们使用角色属性，否则我们无法告诉视障人士有一个登录按钮。

在这种情况下，我们可以使用角色属性将链接定义为按钮。 我们可以通过将角色属性的值写为“按钮”来实现。

结果，屏幕阅读器向用户读出登录是一个按钮。 因此，他将能够登录系统。

我们可以从 Chrome 网上商店为 Chrome 浏览器添加屏幕阅读器扩展。 当用户通过键盘导航 标签时，屏幕阅读器会将 Login 读取为一个按钮。

示例代码：

<a href="#" role="button"> Login </a>