gpt4 book ai didi

html - 是否需要将 aria-label 放在表单提交按钮上?

转载 作者:搜寻专家 更新时间:2023-10-31 23:05:14 26 4
gpt4 key购买 nike

正如标题所说,为了可访问性,我们需要在标签文本不可见或不存在的元素上放置一个 aria-label,例如只有一个“X”的关闭按钮。

我把它当作一个按钮有文本,那么就不需要 aria-label 了,例如:

<button>Submit</button>

但是关于:

<input type="submit" value="Submit"/>

输入提交按钮是否需要 aria-label?

最佳答案

这取决于,您的两个示例本身都不需要它,因为有可见(和可读)的文本。如果你想更详细地描述元素,你应该在使用 aria-label 属性之前使用 title 属性; as stated in the standard text .

<button title="Continue here after you’ve filled out all form elements">Submit</button>

<input title="Continue here after you’ve filled out all form elements" value="Submit" type="submit">

结尾的x 有点不同,因为如果我对你说“x”,你会怎么想?这就是我们想要帮助屏幕阅读器(或其他技术)的原因。但是 title 属性仍然会更好,并且可以为所有用户创建一个可见的工具提示。

<a href="/" title="Close this foo."><span aria-hidden="true">x</span></a>

验证的 ARIA 导航示例(见评论)。

<!doctype html>
<html>
<head><meta charset="utf-8"><title>ARIA Example</title></head><body>
<!--
More HTML that makes up your document
-->
<!--
We apply the role navigation on the nav element to help older browsers, of course
the nav element already has the ARIA meaning, but it doesn't hurt anyone to make
sure that all browsers understand it
-->
<nav role="navigation">
<!--
Omit title from display but not from e.g. screen readers see h5bp.com/v or
h5bp.com/p
-->
<h2 class="visuallyhidden">Main Navigation</h2>
<ul role="menu">
<li>
<a href="/" role="menuitem">Home</a>
</li>
</ul>
</nav>
<!--
More HTML that makes up your document
-->

关于html - 是否需要将 aria-label 放在表单提交按钮上?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19917220/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com