按钮角色 role="button"

按钮角色用于可点击元素，用户点击按钮来触发一些动作。按钮角色使用 `role="button"` 表示。

上面示例创建一个可捕获焦点、可点击按钮。不同于常风的按钮：

按钮角色用于向屏幕阅读器标识元素为按钮。按钮的常见用法是执行动作，如提交表单，打开d窗或者执行插入数据或显示信息的动作等等。

常见的按钮是 button, role="button" 可以创建可切换状态的非按钮元素，如菜单按钮。按钮有两种状态，一是按下，二是非按下。这两种状态使用 aria-pressed 属性的 true 或 false 值来表示。aria-pressed="undefined" 是默认值表示不支持按。

按钮应该有可访问名。通常是按钮中的文字。如果按钮没有文字，如图标按钮，可用 [aria-label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute) 或 [aria-labelledby](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute) 标识。

按钮可由鼠标，触摸，或键盘交互。对于原生 <button> 元素，当按钮有焦点时，用户按 Space 或 Enter 就可以触发按钮的 onclick 事件。如果用其他标签创建按钮时，onclick 事件只有在用户用鼠标点击元素时才会触发，即使有 role="button" 也不行。因些必需要添加添加一些事件才能支持 Space 或 Enter  *** 作。

onclick: 处理鼠标点击或触摸事件。

onKeyDown: 处理 Enter 或 Space  *** 作。

1. 创建一个 span 元素表示按钮，设置 tabindex 属生使按钮可聚焦且有焦点顺序。使用 CSS 样式设置按钮外观。handleBtnClick 和 handleBtnKeyDown 事件处理句柄用于按钮处理鼠标点击或 Space 或 Enter 的 *** 作，其动作为向列表添加新名称。

html

css

js

2. 使用 span 元素表示按钮，切换其 aria-pressed 状态。

html

css

js

按钮是可交互的控件，因些需要焦点。如果添加了 button 角色但元素 (如 <span>, <div> 或 <p>) 本身不可捕获焦点，那么可用 tableindex 属性使其可捕获焦点。

注意链接充当按钮，链接其望用 Enter 打开，而按钮是 Space 或 Enter. 给链接加 role="button" 是不够的，还需要处理 Space  *** 作使其与原生按钮一致。

当使用 button 角色时，屏幕阅读器会将元素识别为按钮，通常说点击后加元素的可访问名。可访问名是元素的内容或者来自 aria-label 或 aria-labelledby 属性指定，或者是元素的描述。

思考有助天更好理解问题，看完上面的描述后，不妨思考以下几个问题?

1. 按钮角色 role="button" 主要用来干什么的?

2. 如何创建自定义按钮?

2. 按钮的可访问性。

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role

方法一：直接在标签元素上添加

方法二：是通过js来添加

如图：

介绍：

HTML(Hyper Text Mark-up Language )即超文本标记语言，是 WWW 的描述语言，由 Tim Berners-lee提出。设计 HTML 语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起，形成有机的整体，人们不用考虑具体信息是在当前电脑上还是在网络的其它电脑上。

这样，你只要使用鼠标在某一文档中点取一个图标，Internet就会马上转到与此图标相关的内容上去，而这些信息可能存放在网络的另一台电脑中。

HTML文本是由 HTML命令组成的描述性文本，HTML 命令可以说明文字、 图形、动画、声音、表格、链接等。 HTML的结构包括头部 (Head)、主体 (Body) 两大部分。头部描述浏览器所需的信息，主体包含所要说明的具体内容。

你这样是无法触发click事件的，原因是span是内联元素，自身大小根据内容而变化，没内容就没大小，更不可能被click；

解决方法很简单：

1、span中添加内容，例如<span class="1">内容</span>

2、定义span的display属性为block或inline-block,并定义大小例如:<style>标签中加入 .1{display:blockwidth:50pxheight:50px}

---