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が「×」と言ったらどう思いますか？そのため、スクリーン リーダー (またはその他のテクノロジ) を支援したいと考えています。しかし、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 に答える