web-dev-qa-db-ja.com

aria-label属性とtitle属性の違いは何ですか？

私はtitle=""リンク/ボタン/ ...の属性を使用して、詳細を示します。しかしbootstrap=は多くのaria-label=""属性。アクセシビリティの理由から、私が理解した限りでは。

そこで、次のようなボタンを作成します。

<button
    id="show-raw-result"
    class="btn btn-default btn-sm btn-twigfiddle"
    title="Result was not easily readable so it has been automatically cleaned up, use this button to see the result raw"
    aria-label="Result was not easily readable so it has been automatically cleaned up, use this button to see the result raw">
    <span class="glyphicon glyphicon-asterisk"></span> Show raw result
</button>

しかし、タイトルをコピーして貼り付けてaria-labelを作成すると、見苦しくなります。どちらを選択する必要があり、なぜですか？

htmltwitter-bootstraptitlewai-aria
35
Alain Tiemblo

ARIAタグは、サイトの障害を持つ訪問者に使用されます。デフォルトでサポートされていることは、Bootstrapの非常に素晴らしいことです。

アクセシブルリッチインターネットアプリケーション（ARIA）は、障害を持つ人々がWebコンテンツとWebアプリケーション（特にAjaxとJavaScriptで開発されたもの）をよりアクセスしやすくする方法を定義しています。たとえば、ARIAは、アクセス可能なナビゲーションランドマーク、JavaScriptウィジェット、フォームのヒントとエラーメッセージ、ライブコンテンツの更新などを可能にします。

ソース： https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA

使用すべき質問に答えるには、title属性のみを使用します。これは、マウスがボタンの上に移動してtitleのテキストをツールチップとして表示する場合にこの属性が使用されるためです。 aria-labelは、この方法ではサポートされていません。

14
tjati