Artwork

المحتوى المقدم من Vanessa Otto, Peter Kröner, Hans Christian Reinl, Stefan Baumgartner, Christian »Schepp« Schaefer, Vanessa Otto, Peter Kröner, Hans Christian Reinl, Stefan Baumgartner, and Christian »Schepp« Schaefer. يتم تحميل جميع محتويات البودكاست بما في ذلك الحلقات والرسومات وأوصاف البودكاست وتقديمها مباشرة بواسطة Vanessa Otto, Peter Kröner, Hans Christian Reinl, Stefan Baumgartner, Christian »Schepp« Schaefer, Vanessa Otto, Peter Kröner, Hans Christian Reinl, Stefan Baumgartner, and Christian »Schepp« Schaefer أو شريك منصة البودكاست الخاص بهم. إذا كنت تعتقد أن شخصًا ما يستخدم عملك المحمي بحقوق الطبع والنشر دون إذنك، فيمكنك اتباع العملية الموضحة هنا https://ar.player.fm/legal.
Player FM - تطبيق بودكاست
انتقل إلى وضع عدم الاتصال باستخدام تطبيق Player FM !

Revision 651: Accessible Rich Internet Applications (ARIA)

1:19:58
 
مشاركة
 

Manage episode 469712490 series 2406115
المحتوى المقدم من Vanessa Otto, Peter Kröner, Hans Christian Reinl, Stefan Baumgartner, Christian »Schepp« Schaefer, Vanessa Otto, Peter Kröner, Hans Christian Reinl, Stefan Baumgartner, and Christian »Schepp« Schaefer. يتم تحميل جميع محتويات البودكاست بما في ذلك الحلقات والرسومات وأوصاف البودكاست وتقديمها مباشرة بواسطة Vanessa Otto, Peter Kröner, Hans Christian Reinl, Stefan Baumgartner, Christian »Schepp« Schaefer, Vanessa Otto, Peter Kröner, Hans Christian Reinl, Stefan Baumgartner, and Christian »Schepp« Schaefer أو شريك منصة البودكاست الخاص بهم. إذا كنت تعتقد أن شخصًا ما يستخدم عملك المحمي بحقوق الطبع والنشر دون إذنك، فيمكنك اتباع العملية الموضحة هنا https://ar.player.fm/legal.

In dieser Episode sprechen wir mit Marco Bretschneider über den ARIA-Standard und dessen Bedeutung für Barrierefreiheit bei dynamischen Webinhalten. Ein Accessibility-Audit war für sein Team der Ausgangspunkt, ARIA intensiver zu nutzen – daraus entstanden in seiner Firma die „ARIA of the week“-Sessions, die bis heute wertvolle Ergebnisse liefern.

Schaunotizen

[00:01:15] Accessible Rich Internet Applications (ARIA)
Wir starten mit einem historischen Exkurs zur Entstehung von ARIA und werfen einen Blick darauf, welche bestehenden Standards als Vorbild dienten. ARIA wurde nämlich stark von Accessibility-APIs aus der Desktop-Welt inspiriert, darunter Microsoft Active Accessibility (MSAA) und Apples Accessibility API. Diese Ansätze wurden auf das Web übertragen, um mit Technologien wie JavaScript, React und Angular umzugehen, die für assistive Technologien lange Zeit schwer zugänglich waren.

Marco erklärt, wie ARIA den Accessibility-Tree eines Browsers beeinflusst und assistiven Technologien wie Screenreadern wichtige Zusatzinformationen liefert, die mit reinem HTML nicht immer verfügbar sind.

Anschließend gehen wir auf die Funktionsweise einer Auswahl des ARIA-Vokabulars ein. Wir sprechen etwa darüber, wie Tabs mit Rollen wie role="tablist" und Attributen wie aria-controls korrekt umgesetzt werden und warum bestimmte Tastatur-Interaktionen bei ARIA ein absolutes Muss sind. Außerdem reden wir über die Unterschiede zwischen Toggle-Buttons, Checkboxen und Switches sowie die Einsatzmöglichkeiten von Live-Regions mit aria-live.

Am Ende bleibt die zentrale Erkenntnis: ARIA ist ein mächtiges Werkzeug, aber es muss gezielt und mit Bedacht eingesetzt werden. Wichtig ist ein grundlegendes Verständnis des Accessibility-Trees. Gut umgesetztes ARIA macht dynamische Webinhalte nicht nur zugänglicher, sondern erleichtert auch Entwickler*innen die Arbeit, indem es Barrierefreiheit strukturiert und nachvollziehbar macht.

Links

Inclusive Front-End Design Patterns
Ein Buch mit praxiserprobten Frontend-Design-Mustern, die Barrierefreiheit und Usability in den Vordergrund stellen.
Open UI
Eine Initiative zur Standardisierung von UI-Komponenten, die auch Barrierefreiheit im Blick hat.
Inclusive Components
Eine Website, die praktische Anleitungen und Beispiele bietet, um zugängliche UI-Komponenten zu entwickeln.
W3C ARIA Authoring Practices: Tabs
Offizielle W3C-Dokumentation zu Best Practices für die Umsetzung von Tabs mit ARIA.
HTML Spec: Link Type Next
Die offizielle HTML-Spezifikation zu den Link-Typen rel="next" und rel="prev".
Was ist Usability wirklich? (ProContext)
Ein Artikel, der das Konzept der Gebrauchstauglichkeit-Messung und die Stufen der Usability erklärt.
Inclusive Front-End Design Patterns
Ein Buch mit praxiserprobten Frontend-Design-Mustern, die Barrierefreiheit und Usability in den Vordergrund stellen.
HTML Living Standard
Die aktuelle HTML-Spezifikation, die vom WHATWG gepflegt wird.
  continue reading

927 حلقات

Artwork
iconمشاركة
 
Manage episode 469712490 series 2406115
المحتوى المقدم من Vanessa Otto, Peter Kröner, Hans Christian Reinl, Stefan Baumgartner, Christian »Schepp« Schaefer, Vanessa Otto, Peter Kröner, Hans Christian Reinl, Stefan Baumgartner, and Christian »Schepp« Schaefer. يتم تحميل جميع محتويات البودكاست بما في ذلك الحلقات والرسومات وأوصاف البودكاست وتقديمها مباشرة بواسطة Vanessa Otto, Peter Kröner, Hans Christian Reinl, Stefan Baumgartner, Christian »Schepp« Schaefer, Vanessa Otto, Peter Kröner, Hans Christian Reinl, Stefan Baumgartner, and Christian »Schepp« Schaefer أو شريك منصة البودكاست الخاص بهم. إذا كنت تعتقد أن شخصًا ما يستخدم عملك المحمي بحقوق الطبع والنشر دون إذنك، فيمكنك اتباع العملية الموضحة هنا https://ar.player.fm/legal.

In dieser Episode sprechen wir mit Marco Bretschneider über den ARIA-Standard und dessen Bedeutung für Barrierefreiheit bei dynamischen Webinhalten. Ein Accessibility-Audit war für sein Team der Ausgangspunkt, ARIA intensiver zu nutzen – daraus entstanden in seiner Firma die „ARIA of the week“-Sessions, die bis heute wertvolle Ergebnisse liefern.

Schaunotizen

[00:01:15] Accessible Rich Internet Applications (ARIA)
Wir starten mit einem historischen Exkurs zur Entstehung von ARIA und werfen einen Blick darauf, welche bestehenden Standards als Vorbild dienten. ARIA wurde nämlich stark von Accessibility-APIs aus der Desktop-Welt inspiriert, darunter Microsoft Active Accessibility (MSAA) und Apples Accessibility API. Diese Ansätze wurden auf das Web übertragen, um mit Technologien wie JavaScript, React und Angular umzugehen, die für assistive Technologien lange Zeit schwer zugänglich waren.

Marco erklärt, wie ARIA den Accessibility-Tree eines Browsers beeinflusst und assistiven Technologien wie Screenreadern wichtige Zusatzinformationen liefert, die mit reinem HTML nicht immer verfügbar sind.

Anschließend gehen wir auf die Funktionsweise einer Auswahl des ARIA-Vokabulars ein. Wir sprechen etwa darüber, wie Tabs mit Rollen wie role="tablist" und Attributen wie aria-controls korrekt umgesetzt werden und warum bestimmte Tastatur-Interaktionen bei ARIA ein absolutes Muss sind. Außerdem reden wir über die Unterschiede zwischen Toggle-Buttons, Checkboxen und Switches sowie die Einsatzmöglichkeiten von Live-Regions mit aria-live.

Am Ende bleibt die zentrale Erkenntnis: ARIA ist ein mächtiges Werkzeug, aber es muss gezielt und mit Bedacht eingesetzt werden. Wichtig ist ein grundlegendes Verständnis des Accessibility-Trees. Gut umgesetztes ARIA macht dynamische Webinhalte nicht nur zugänglicher, sondern erleichtert auch Entwickler*innen die Arbeit, indem es Barrierefreiheit strukturiert und nachvollziehbar macht.

Links

Inclusive Front-End Design Patterns
Ein Buch mit praxiserprobten Frontend-Design-Mustern, die Barrierefreiheit und Usability in den Vordergrund stellen.
Open UI
Eine Initiative zur Standardisierung von UI-Komponenten, die auch Barrierefreiheit im Blick hat.
Inclusive Components
Eine Website, die praktische Anleitungen und Beispiele bietet, um zugängliche UI-Komponenten zu entwickeln.
W3C ARIA Authoring Practices: Tabs
Offizielle W3C-Dokumentation zu Best Practices für die Umsetzung von Tabs mit ARIA.
HTML Spec: Link Type Next
Die offizielle HTML-Spezifikation zu den Link-Typen rel="next" und rel="prev".
Was ist Usability wirklich? (ProContext)
Ein Artikel, der das Konzept der Gebrauchstauglichkeit-Messung und die Stufen der Usability erklärt.
Inclusive Front-End Design Patterns
Ein Buch mit praxiserprobten Frontend-Design-Mustern, die Barrierefreiheit und Usability in den Vordergrund stellen.
HTML Living Standard
Die aktuelle HTML-Spezifikation, die vom WHATWG gepflegt wird.
  continue reading

927 حلقات

Minden epizód

×
 
Loading …

مرحبًا بك في مشغل أف ام!

يقوم برنامج مشغل أف أم بمسح الويب للحصول على بودكاست عالية الجودة لتستمتع بها الآن. إنه أفضل تطبيق بودكاست ويعمل على أجهزة اندرويد والأيفون والويب. قم بالتسجيل لمزامنة الاشتراكات عبر الأجهزة.

 

دليل مرجعي سريع

حقوق الطبع والنشر 2025 | سياسة الخصوصية | شروط الخدمة | | حقوق النشر
استمع إلى هذا العرض أثناء الاستكشاف
تشغيل