htmlアクセシビリティ：擬似要素の背景画像を持つタグをアンカーする - html、image、background、accessibility

私の会社では、WCAG 2.0規格に100％適合していない可能性があると認識しているデザインで一般的に使用するいくつかのシナリオを検討しています。

そのようなシナリオの1つは、コンテンツを持たないアンカータグ（例えばソーシャルメディアリンク）と、疑似要素で宣言された背景イメージがあることです。

私が知っている最良の選択肢は次のとおりです。

1. 使う title リンク上の属性

2. ラップされたリンクにテキストを追加する span この例のような「スクリーンリーダーのみ」のクラス eBayのマインドパターン：

   .clipped {
   border: 0 !important;
   clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
   clip: rect(1px, 1px, 1px, 1px);
   height: 1px !important;
   overflow: hidden;
   padding: 0 !important;
   position: absolute !important;
   white-space: nowrap !important;
   width: 1px !important;
   }
   

明示するために、これは私たちが使用している擬似クラスの背景画像のスタイリングの例です

.pseudo::after {
content: "";
display: block;
width: 64px;
height: 64px;
background-image: url("images/pizza.png");
}

これらのうちどれがより遵守されているか？

オプション1：タイトル、内部にテキストなし

<a title="pizza title" href="http://pizza.com" class="pseudo pizza"></a>

オプション2：リンク内のテキストのみのスクリーンリーダー

<a href="http://pizza.com" class="pseudo pizza">
<span class="clipped">pizza text</span>
</a>

回答：

回答№1は1

短い答え：可能であれば、2番目を好む。

ザ title 属性は、すべてのスクリーンリーダーがデフォルトでそれを読むわけではないので、ややこしいです。スクリーンリーダーで100％カバーして安全な側にするには、 <a> 必要に応じてスクリーンリーダーのみにします。

---

回答№2の場合は1

私も2番目のオプションに投票しますが、実際にリンクにテキストコンテンツを追加する方法もありますが、 text-indent: -5000px; （または同様に高い負の値）をCSSに適用してテキストを画面外に移動します。

---

回答№3の場合は0

最高の2つの世界の間を選ぶのが難しいときは、試してみないでください。

最も簡単なソリューション：

<a href="http://pizza.com" class="pseudo pizza" title="pizza text" aria-label="pizza test">
<span class="clipped">pizza text</span>
</a>

どうして？なぜなら title 属性はスクリーン・リーダー以外のユーザーがツールチップとしてアクセスできるようになり、スクリーンリーダーはクリップされたテキストを使用するように構成されていないときにそのテキストを使用する可能性があります。

の用法 aria-label 視覚的にCSSを使用することも非常に重要です要素を隠すと、使用される補助技術に応じてランダムな振る舞いをする可能性があります。例えば、一部の支援技術は、目に見えないテキストを削除することを選択し、他の支援技術はそれらを保持することがあります。

すべてのスクリーンリーダーをサポートするための最良の選択肢は、次の3つのオプションを使用することです。 aria-label 最近のスクリーンリーダーの場合、古いもののクリップされたテキスト、 title 標準ユーザーの属性。

---