Question

正如标题所说，为了获取可访问性，我们需要在标签文本不可见或不存在的元素上放置一个咏叹调标签，例如只有“X”的解雇按钮。

我认为按钮有文字，然后不需要aria-label，例如：

<button>Submit</button>

但是怎么样：

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

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

Answer 1

这取决于你的两个例子本身都不需要它，因为有可见（和可读）的文本。如果要更详细地描述元素，请在使用title属性之前使用aria-label属性; 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
-->

是否需要在表单提交按钮上添加aria-label？

1 个答案: