HTML role 语法
在 HTML 中，role 是一个全局属性，它用于描述元素在页面的语义角色。role 属性允许开发人员向辅助技术（例如屏幕阅读器）提供有关元素用途的附加信息，从而提高页面的可访问性。
语法：
<element role="角色名称"></element>说明：
role 属性的取值有很多，常用的如下表所示。
| 属性 | 说明 |
|---|---|
| banner | 表示页面顶部的标题区域 |
| navigation | 表示页面导航区域 |
| main | 表示页面主要内容区域 |
| form | 表示表单区域 |
| button | 表示按钮 |
| listbox | 表示下拉列表 |
| checkbox | 表示复选框 |
| radio | 表示单选按钮 |
| dialog | 表示对话框 |
| search | 表示搜索框 |
| alert | 表示警告框 |
| status | 表示状态栏 |
很多 HTML5 标签（比如 nav、main、button 等）已经隐含了默认的 role，比如 nav 自带 role="navigation"，而 button 自带 role="button"。
因此在实际开发中，能使用 HTML5 标签就尽量使用 HTML5 标签。只有在原生标签无法满足需求时（比如制作复杂的自定义组件），我们再考虑使用 role 属性。
提示: 虽然普通用户在视觉上感知不到 role 属性，但它对于视障用户和搜索引擎是非常重要的。随着无障碍标准日益普及，现代高质量的网站都应该规范地使用它。
HTML role 摘要
| 属于 | HTML 属性 |
|---|---|
| 使用频率 | 中 |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 暂无 |
HTML role 示例
接下来，我们通过一个简单的例子来讲解一下 HTML role 属性是如何使用的。
示例：role 属性的基本用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 150px;
height: 50px;
line-height: 50px;
text-align: center;
background-color: rgb(169, 0, 169);
color: white;
border-radius: 10px;
cursor: pointer;
}
div:hover {
background-color: rgb(132, 1, 132);
}
</style>
</head>
<body>
<div role="button" tabindex="0">查看更多</div>
</body>
</html>页面效果如下图所示。
分析：
在上面例子中，我们使用 div 元素实现了一个按钮效果。在 div 元素中，我们使用 role 属性为其定义了一个 “button” 角色，这样屏幕阅读器会将此元素读作 “按钮” 。
需要注意的是，虽然加上 role="button" 后，屏幕阅读器能够识别它是一个按钮，但 div 元素默认是无法通过键盘（Tab 键）获取焦点的。在实际开发中，如果我们必须使用 div 做按钮，还需要加上 tabindex 属性才行。
