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

标签 html accessibility wai-aria

正如标题所说,为了可访问性,我们需要在标签文本不可见或不存在的元素上放置一个 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/

相关文章:

javascript - 仅针对单个实例显示 jquery 向下滑动?

html - 将 angularJS $index 传递给 onchange

iOS 更改辅助功能焦点。

ios - 如何捕捉可访问性焦点的变化?

html - 我可以在具有相同用途的不同元素中使用相同的 "role"属性吗?

Java正则表达式复杂模式

javascript - 如何在 Angular js/HTML 中处理数组

css - 辅助功能 : Prevent browser from overriding CSS in input fields

javascript - aria-expanded 和 aria-haspopup 属性是否适用于 <select/> 元素?

javascript - aria-hidden=true 是否意味着您不必使用显示 :none?