button 角色会向辅助技术(如屏幕阅读器)识别一个元素为按钮。按钮是用于执行操作的小部件,例如提交表单、打开对话框、退出活动或执行一个命令,例如插入新的记录或者显示信息。添加 role="button" 会告诉辅助技术,这是一个按钮,但是不提供按钮的功能。你应该使用 或者 以及 type="button"。
button 角色可以和 aria-pressed 属性一起使用,以创建切换按钮。
html保存上面这个例子创建了一个可聚焦的按钮,但是需要 JavaScript 和 CSS 来包含按钮的外观和行为。这些功能默认是由 或者 (带有 type="button")元素提供的。
html保存备注:如果使用 role="button" 而不是语义化的 或 你需要让这个元素可聚焦并定义 click 和 keydown 事件的事件处理器。这包括了对按下 Enter 和 Space 的事件的处理,以处理各种形式的用户输入。参见官方的 WAI-ARIA 示例代码。
除了常见的按钮部件之外,使用非按钮元素创建切换按钮和菜单按钮时,应该使用 role="button"。
切换按钮是指有两个状态的按钮,可以是关(未按下)或者开(已按下)。aria-pressed 属性值 true 或 false 会将按钮识别为切换按钮。
菜单按钮是指控制一个菜单且 aria-haspopup 属性设置为 menu 或 true 的按钮。