web-dev-qa-db-ja.com

アイコンのみvs.テキストとアイコン

私は現在プロジェクトに取り組んでいますが、アイコンだけにアクセスできるかどうか(AA)、またはテキストを伴う必要があるかどうかわかりません。

どちらがWCAG AA基準を満たしますか?

2
UIO

通常、私のアドバイスは、常にアイコンを画面上のテキストとペアにし、両方をクリック可能にすることです。このようにして、aria-hidden属性を使用してスクリーンリーダーのアイコンを非表示にできます。これにより、オーディオスクリーンリーダーのテキストリンクだけが残ります。

ただし、これが不可能な場合は、オーディオスクリーンリーダーを使用しているために誰かが画面を表示できないことを考慮する必要があります。そのため、アイコンと同等のテキストがあることを確認して、オーディオ画面を読者ユーザーはその意味を理解することができます。これは WCAG 2.0ガイドライン1.1.1非テキストコンテンツ でカバーされており、レベルAの要件です(AAに会いたい場合、会うことを意味しますすべてレベルAおよびallレベルAA要件)。

同等のテキストは、アイコンの形式によって異なります。

  • アイコンが画像の場合は、画像のalt属性を使用できます(ソリューションはhtmlであると想定しています)。
  • アイコンがアイコンフォントの場合、他のテクニックを使用する必要があります。これらについては、ここで説明します。 https://www.filamentgroup.com/lab/bulletproof_icon_fonts.html
9
SteveD

テキストは重要です。プロジェクトを使用する一部のユーザーにとって、アイコンのみで混乱するため、これはユーザーエクスペリエンスの低下につながります。ただし、プロジェクトにすでに(ページごとに)表示するにはデータが多すぎる場合は、アイコンのためだけにテキストを追加すると、画面が多すぎて画面がクラスター化する可能性があります。

  1. ページのコンテンツにデータが大量に読み込まれている場合は、テキストを追加せずにアイコンを保持する必要があります(ただし、ユーザーがアイコンをホバーすると、そのアイコンを表すテキストをそこに表示できます)。
  2. 1ページに表示されるコンテンツが少ない場合は、テキストとアイコンの両方を使用できます。これは、画面に多くのものを集めることがないためです。
0
Siddhesh Dighe