7

の付いたボタンaria-label:

<button type="button" class="btn btn-default dropdown-toggle"
  aria-expanded="false"
  aria-label="Sort">
  <i class="fa fa-arrows"></i>
</button>

WAVEによって、依然としてアクセシビリティ エラー (「空のボタン」) として識別されます。何か案は？

4

4 に答える 4

5

古いスクリーンリーダー/ブラウザは ARIA を利用しません。上記のコメントに CBroe が残したリンクのように、視覚的に隠されたテキストを使用する方がより堅牢な方法です。

于 2016-01-16T05:28:01.883 に答える
3

属性と組み合わせて属性titleを追加できます。aria-label

WAVE ツールバーを満たすためだけにテキストを非表示にしようとしないでください。これは、スクリーン リーダーを使用していない人には読めません。アクセシビリティは視覚障害者だけに焦点を当てているわけではありません。

属性は常にスクリーン リーダーによって読み取られるとは限らないaria-labelため、属性を削除しないでください。title

しかし、これは少し素朴に思えるかもしれませんが、全文を非表示にせずに書くことを検討できます。

<button type="button" class="btn btn-default dropdown-toggle">
  <i class="fa fa-arrows">Sort</i>
</button>

これは、誰もが完全にアクセスできるようにするための視覚的な最良の方法であり、「標準」ユーザーが小さなツールチップ内でボタンの動作を表示するために何らかのアクションを実行する必要はありません。

于 2016-01-17T14:12:38.003 に答える
0

aria-labelは、スクリーン リーダー用のラベルが既に表示されているボタンにアクセシビリティ対応の名前を追加する方法として、非常に広くサポートされています。もう少し広くサポートされている手法は、titleの代わりに属性を使用することですaria-label。これにより、自然に言えばドラゴンとの互換性が確保されます-タイトルを非常によくサポートします. 注: これは、表示可能なラベルが存在することを前提としています。これは、入力フィールドなどにとって重要です (そして見過ごされがちです)。

より最新のアクセシビリティ チェックが必要な場合は、私が勤務している会社 (Deque Systems) の ax 拡張機能を使用してください。Chrome の ax 拡張機能とFirefox の ax 拡張機能は次のとおりです。

于 2016-01-16T19:58:51.400 に答える