Kurz-Fakten
- Schreibweise: data-produkt-id="4711"; erlaubt an jedem Element
- Zugriff in JavaScript über element.dataset.produktId – der Bindestrich wird zu Binnengroßschreibung
- Auch in CSS ansprechbar über Attributselektoren wie [data-status="offen"]
- Werte sind immer Zeichenketten; Zahlen müssen umgewandelt werden
- Nichts darin ist für Nutzer sichtbar – Inhalte, die gelesen werden sollen, gehören in den Text
Einordnung für die Praxis
Der Nutzen liegt darin, den Umweg über missbrauchte Klassennamen zu vermeiden. Statt eine Klasse status-offen zu setzen und in JavaScript nach Zeichenketten zu suchen, steht der Zustand in data-status – lesbar, ohne die Gestaltung zu berühren.
Eine Grenze gibt es: Alles, was ein Bedienelement für Hilfstechnik beschreibt, gehört nicht in ein data-Attribut, sondern in die vorgesehenen ARIA-Attribute. Der Screenreader kennt nur diese.