Gibt es Gründe, ARIA-Status und -Rollen nicht als Selektoren in CSS zu verwenden?

Question

Ich arbeite zZ an einer barrierefreien Seite unter anderem mit ARIA-Tags. Mir ist aufgefallen, dass Attribute wie aria-invalid gute Selektoren für mein CSS sind, um zu zielen, anstatt eine .error-Klasse zu verwenden.

Der Vorteil davon ist schlanker, aussagekräftiger HTML, der für mich einfacher ist, in CSS (und JS) einzuhaken. Abgesehen davon, habe ich noch nicht gesehen, dass dies anderswo gemacht wurde, deshalb bin ich skeptisch, dass es Nachteile gibt, wenn man die Tags für die Barrierefreiheit für das Styling nutzt. Ich vermute, dass die Verwendung von uneingeschränkten Attributselektoren zu weniger leistungsfähigem CSS führt, aber gibt es andere Nachteile, die ich nicht berücksichtigt habe?

Answer 1

Attributselektoren sind eine sehr flexible Möglichkeit, Stile für CSS im großen Maßstab zu verwalten, da die Attributselektoren immer eine specificity of 0-0-1-0 haben.

[aria-*] Selektoren sind perfekt als Styling-Haken zu verwenden, und ich empfehle auch benutzerdefinierte Attribute [data-*] zu verwenden, um die Lücken zu füllen, in denen Sie eine einmalige benötigen. Sicherlich sollte Klasse Selektoren weiter verwendet werden, jedoch können Sie einige sehr eleganten Stil Erweiterungen mit Attributselektoren tun:

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

Jede dieser Selektoren die gleiche Spezifität aufweist und die Kaskade können die Stile in geeigneter Weise angewendet werden.

Sie können Ihre eigene Form von Klassen erstellen, indem Sie den [attr~="value"] Selektor verwenden, falls erforderlich.

die "attribute contains" selector Verwendung für a technique that I call "classy images"

---

Einer der verborgenen Vorteile für die Verwendung Attribute über Klassen ist ein Performance-Gewinn in JavaScript nützlich sein. Statt auf das Vorhandensein einer Klasse auf ein Element (die bemerkenswert leicht zu bekommen falsch) zu haben, haben Browser getAttribute unterstützt zu überprüfen, hasAttribute und setAttribute für eine lange Zeit.