CSSのセレクタとしてARIAの州と役割を使用しない理由はありますか？

Question

私は現在、ARIAタグを使ってアクセス可能なサイトを作っています。 クラスを使用するのではなく、aria-invalidなどの属性がCSSをターゲットにする良いセレクタになりました。

これは、よりリーンで意味のあるHTMLであり、CSS（およびJS）からのフックが簡単です。つまり、私はこれが他の場所で行われているのを見たことがないので、アクセシビリティタグをスタイリングに活用することには欠点があることが疑わしい。私は、無制約の属性セレクタの使用がCSSのパフォーマンスを低下させると思われますが、私が考慮していない他の弱点がありますか？

Answer 1

属性セレクタは常にspecificity of 0-0-1-0を持つため、属性セレクタは大規模なCSSのスタイルを管理するための非常に柔軟な方法です。

[aria-*]セレクタはスタイリングフックとして使用するときれいになります。また、カスタムの[data-*]属性を使用して、ワンオフが必要なギャップを埋めることもお勧めします。確かに、クラスセレクタは、しかし、あなたは、属性セレクタを持ついくつかの非常にエレガントなスタイルの拡張を行うことができ、使用され続ける必要があります。

[data-foo] { 
    color: red; 
} 
[data-foo="bar"] { 
    color: blue; 
} 
[data-foo="fizz"] { 
    color: green; 
} 

これらのセレクタのそれぞれは、同じ特異性を有し、かつカスケードスタイルが適切に適用することができるようになります。

必要に応じて[attr~="value"]セレクタを使用して、独自のクラスのフォームを作成できます。

"attribute contains" selectorを使用すると、クラス上の属性を使用することに隠された利点のa technique that I call "classy images"

---

一つに役立ちますが、JavaScriptでパフォーマンスの向上です。要素上のクラスの存在をチェックするのではなく、間違っていることは非常に簡単です。ブラウザは、getAttribute,hasAttribute、およびsetAttributeを長い間サポートしています。