5

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

我把它当作按钮有文本，然后不需要 aria-label，例如：

<button>Submit</button>

但是关于：

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

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

4

1 回答 1

7

这取决于，您的两个示例本身都不需要它，因为有可见（和可读）的文本。如果你想更详细地描述元素，你会在使用title属性之前使用aria-label属性；如标准文本所述。

<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
-->
于 2013-11-11T22:38:23.610 回答