按钮角色 role="button"

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了按钮角色 role="button"相关的知识,希望对你有一定的参考价值。

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

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

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

常见的按钮是 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

使用 role="button" 在 <a> 标记上水平居中标题文本

【中文标题】使用 role="button" 在 <a> 标记上水平居中标题文本【英文标题】:Centering header text horizontally on an <a> tag with role="button" 【发布时间】:2020-11-07 05:48:24 【问题描述】:

我是 html 和堆栈溢出的新手。我现在正在学习一门专注于引导框架的课程。有没有一种方法可以在已分配角色 =“按钮”的 a 标记中将标题文本居中?

我尝试使用常规文本,文本出现在我想要的位置,但字体粗细太轻。我试着让它加粗,但这让它太重了。 h6 标签给了我理想的重量,但我无法将它水平居中,因为它出现在顶部。最好,如果可能的话,我想使用引导程序。

以下是我当前的代码:

<div class="col col-sm align-self-center">
          <a href="#reservationForm" class="btn btn-warning btn-block btn-sm p-2" role="button"><h6 class="text-center">Reserve Table</h6></a>
</div>

【问题讨论】:

你在使用引导程序吗? 【参考方案1】:

你可以使用bootstrap中的文本对齐类

<div class="col col-sm align-self-center text-center">

【讨论】:

【参考方案2】:

首先:ainline 元素,h6block 元素。 Block 元素在 inline 元素内无效。

将您的a 放入h6 并在h6 上使用引导类text-center

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<header>
    <div class="col col-sm align-self-center">
        <h6 class="text-center">
          <a href="#reservationForm" class="btn btn-warning btn-block btn-sm p-2" role="button">
            Reserve Table
          </a>
        </h6>
    </div>
</header>

本示例基于 Bootstrap v4.5

【讨论】:

非常感谢。效果很好。感谢您对块和内联元素的提醒?

以上是关于按钮角色 role="button"的主要内容,如果未能解决你的问题,请参考以下文章

使用 role="button" 在 <a> 标记上水平居中标题文本

如何修复“按钮”交互角色必须是可聚焦的

JQuery mobile中按钮背景色无法改变,为啥呀

div 按钮可访问性可点击

html js button点击后不跳转

html中怎样添加返回按钮?