web-dev-qa-db-ja.com

スタイリングのセレクターとしてaria-labelを使用するベストプラクティス

（非対話型）チェックマークが付いたテーブルセルを持つテーブルをスタイリングしています。チェックマークアイコンはCSSを介して追加されます。アクセス可能なコンテンツがないため、aria-labelを追加しました。ここで、この属性をCSSセレクターとして使用して、次のようなチェックマークアイコンを追加することをお勧めしますか。

td[aria-label="yes"] {
  &:after {
    content: '\f00c';
    font-family: $font-family-icons;
  }
}

少なくともaria-hidden、aria-expandedなどの状態関連の属性の場合、セレクターとしてARIA属性を使用することは一般的に良い習慣であることを学びました。この場合、tdスタイルを対応するラベル。しかし、もちろん、それらのラベルがいつか変更された場合は、CSSも適合させる必要があります。

それ以外の欠点はありますか？または、これをよりエレガントに解決する方法についてのアイデアがありますか？

csscss-selectorsaccessibilitywai-aria
6
josi

HTMLでネイティブに伝達されない（たとえば）拡張などの制御状態を表すには、スタイルセレクターとしてARIA属性に頼るのが適しています。

この場合、CSSを使用してARIAに基づいてページにコンテンツを追加しますが、必要ないと思います。最初に、aria-labelのサポート（<td>sおよび他の要素） 古いブラウザー/スクリーンリーダーのコンボでは不安定になる可能性があります 、および2番目に CSSのサポート古いブラウザ/スクリーンリーダーのコンボで生成されたコンテンツ はより不安定になる可能性があります。ただし、これが重要かどうかを知るために、ユーザーについては何も知りません。

これは、CSSが問題なくロードされることも想定しています（ネットワークのドロップなど）。

これは、一部のユーザーがセルの値を聞いたり見たりすることがないことを意味します。

CSSをロードしてスタイルを設定するかどうかに関係なく、未加工のコンテンツを確実に使用できるようにし、ARIAへの依存を制限するようにします。

そうは言っても、aria-hiddenのサポートは、一般的に、私が上で挙げた2つの問題よりも優れています。

別のアイデアを投げてみましょう。これは必ずしも良いとは限りませんが、未知のユーザーAT設定と潜在的なネットワークの問題を考慮すると、より堅牢になると思います。

テキストとチェックマークの両方を<td>に入れました。 CSSが読み込まれない場合（またはユーザーが本当に古いブラウザーを使用している場合）、大した問題はありません。最悪の事態は、ユーザーが「はいチェック」を見る/聞くことです。

次に、aria-hiddenは、チェックマークがスクリーンリーダーに通知されないようにします。 CSSは、目の見えるユーザーからテキストを隠します。そして、私はあなたが望む効果を持っていると思います。

<td>
 <span class="visually-hidden">Yes</span>
 <span aria-hidden="true">&#10004;</span>
</td>

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

それ以外の欠点はありますか？

スタイリングのセレクターとしてaria-label属性を使用しても、技術的には問題ありません。

  • aria-labelのこの使用に関して

それ自体が、あらゆる種類のアクセシビリティの懸念に対する有効な代替テキストとして十分ではありません。

スクリーンリーダーを使用する人はほとんどいません。 aria-labelが彼らの助けになる場合（スクリーンリーダーのサポートに応じて、@ aardrianの回答を参照）、それは人口の大部分にとっては役に立ちません。

チェックマークを表す特別なUTF-8コードは、視覚的に画像以外の何物でもありません。ユーザーは、たとえば、ツールチップを期待しています。そのため、title属性をお勧めします。これは、ブラウザーとスクリーンリーダーのサポートを改善するために、aria-labelと組み合わせて使用​​します。

画面拡大鏡を使用している人や認知障害のある人は、列の表見出しにスクロールすることなく、チェックマークの代替テキストにアクセスできる場合があります。

このチェックマークの意味を確認するためにスクロールして見出しを表示したり、マウスを使用したりすることは依然として非常に難しいため、運動障害のある人にとってはこの問題は依然として重要です。

TLDR：ARIAはあらゆる種類の障害に対して普遍的なアクセシビリティを提供しません

2
Adam