Jeremey reagiert auf Saras Tweet über die Verwendung von `[aria-*]`-Selektoren anstelle von Klassen, wenn das Styling, das Sie anwenden, direkt mit dem ARIA-Status zusammenhängt.
… das ist meine bevorzugte Methode, um CSS- und JavaScript-Interaktionen zu verknüpfen. Hier ist [ein] alter CodePen, wo Sie es in Aktion sehen können.
Welches ist dieses klassische Duell.
[aria-hidden='true'] {
display: none;
}Es gibt viele weitere Möglichkeiten. Nehmen wir eine Tab-Designkomponente.
Da diese Tabs (mit Reach UI) bereits die richtigen ARIA-Zustände für Dinge wie den aktiven Tab anwenden, beschäftigen sie sich nicht einmal mit der Manipulation von Klassennamen. Um den aktiven Zustand zu gestalten, wählen Sie das <button> mit einem Datenattribut und ARIA-Status wie
[data-reach-tab][aria-selected="true"] {
background: white;
}Die Panels mit dem Inhalt? Diese haben eine ARIA-Rolle, also werden sie entsprechend gestaltet.
[role="tabpanel"] {
background: white;
}ARIA passt auch manchmal zu Variationen, wie zum Beispiel...
[aria-orientation="vertical"] {
flex-direction: column;
}Wenn Sie denken, warten Sie mal, was ist ARIA? Heydons neue Show Webbed Briefs hat eine lustige Einführung in ARIA als Pilotfolge.
Hallo, das ist großartig.
Eine Frage bezüglich dieses Vorschlags:
Könnte das nicht ein wenig zu viel sein – z. B. wenn Sie möchten, dass einige Inhalte für Screen-Reader-Benutzer sichtbar sind, aber nicht für assistierende Technologien?
Ein Beispiel, das mir einfällt, sind die Font Awesome 4 Icons, die oft Syntax wie
<i class="fa fa-something" aria-hidden="true"></i>verwenden, obwohl ich schätze, dass dies bei neueren Versionen mit SVG usw. jetzt weniger ein Problem ist?Zugegebenermaßen sind die meisten Beispiele, an die ich plötzlich denke, dekorativ, sodass Sie dafür ohnehin am besten CSS verwenden würden! (Und wenn ich ein paar große Projekte scannen, bei denen wir derzeit die ältere Version von Font Awesome verwenden, war das das einzige Beispiel, bei dem wir aria-hidden verwendet haben!)
Ich frage mich, ob Sie ein Element basierend auf dem Inhalt von aria-label auswählen können. Zum Beispiel hat auf Twitter die Seitenleiste "Trending Now" (Aktuelle Trends)
aria-label="Timeline: Trending now"
Sie hat keine ID und teilt sich Klassen mit vielen anderen Elementen. Ich möchte jedoch nur diese Trending-Seitenleiste in CSS auswählen und sie verschwinden lassen, während ich Twitter benutze.
Ich stelle mir vor, es wäre so etwas wie
IRGENDEINSELECTOR {display:none;}
Aber ich bin mir nicht sicher, ob das in CSS überhaupt möglich ist und welche Unterstützung aria-label hätte.
Ich habe mich gefragt, ob Sie das schon einmal erlebt haben?
— Chris