Revision 683: ARIA-Glücksrad

Wir drehen wieder am „Glücksrad“ – diesmal allerdings ausschließlich mit ARIA-Attributen! Schepp hat sich als Mitspielende Accessibility Engineer Daniela Kubesch (LinkedIn / Bluesky / Mastodon) und Frontend/Design-Systems Engineer Marco Bretschneider eingeladen. Der Zufall spuckt ARIA-Attribute aus und wir sezieren sodann deren Einsatzfälle, Stolpersteine und ggf. sinnvolle Alternativen: von aria-placeholder über erklärende Verknüpfungen mit aria-details (plus ariaDetailsElements) bis hin zu großen, virtuellen Listen mit aria-posinset/aria-setsize. Außerdem sprechen wir über gute modale Dialoge (aria-modal & <dialog>) und wagen einen Blick nach vorn mit dem brandneuen aria-brailleroledescription aus WAI-ARIA 1.3.

Unser Sponsor

Ende Oktober ist es so weit: Die programmier.con lädt ein – und zwar nach Bad Nauheim, nördlich von Frankfurt! Zwei Tage, zwei Tracks, ein Abendprogramm – und jede Menge praxisnahe Talks zu Webentwicklung und angewandter AI.

Von Svelte über lokale LLMs bis zu Developer Experience, A/B-Testing, Security und AI-Agenten: Die programmier.con bringt die Community zusammen – und das auf Augenhöhe. Die meisten Vorträge sind auf Deutsch, internationale Highlights wie Svelte-Macher Rich Harris inklusive.

🎟 Dank Sponsoring gibt’s die Tickets aktuell schon ab 249 € (zzgl. MwSt.).

👉 Alle Infos und Tickets auf con.programmier.bar

Schaunotizen

[00:19:52] aria-placeholder Entspricht inhaltlich dem HTML-placeholder – verschwindet also, sobald Nutzer:innen tippen. In der Praxis deshalb eher nicht verwenden: wichtige Hinweise gehören dauerhaft sichtbar neben/unter das Feld. Als Notnagel kann der Placeholder in der Accessible-Name-Ermittlung herangezogen werden, falls kein Label vorhanden ist (trotzdem immer ein richtiges <label> setzen). Möglicher Spezialfall: contenteditable. Weiterführend: HTML placeholder, Accessible Name Computation. [00:27:58] aria-details & ariaDetailsElements (DOM) Verknüpft ein Widget mit einer längeren, „reichen“ Zusatzbeschreibung (z. B. FAQ-Inhalt, Größentabelle, Bildbeschreibung). Anders als aria-describedby beeinflusst aria-details nicht den Accessible Name; Screenreader können die Details kontextuell anbieten. Über die DOM-Property ele