Barrierefreiheit: Das MUSS in eine Website Navigation (Anleitung & Vorlage) скачать в хорошем качестве

Barrierefreiheit: Das MUSS in eine Website Navigation (Anleitung & Vorlage)

In diesem Video dreht sich alles um den Aufbau einer individuell erstellten Navigation in Webflow. Wir zeigen Schritt für Schritt, wie man mit einfachen HTML- und CSS-Anpassungen eine barrierefreie und flexible Navigation erstellt – inklusive "Skip to Content"-Link, speziell definiertem Dialog-Element für mobile Menüs und ausgeklügelten Animationen. Außerdem erfährst du, warum Position Sticky, data-Attribute und die richtige Fokussierung von Elementen so wichtig sind. Ergebnis anschauen: https://a11y-navigation.webflow.io Kostenloses Cloneable des Projekts: https://try.webflow.com/accessible-na... * (Affiliate Link) --------------------------------------------- Meine Onlinekurse: 👉 Webflow Onlinekurse: Lerne Webseiten für Kunden Schritt für Schritt professionell umzusetzen: https://formburg.com/courses 👉 50+ Webflow-Tricks: https://www.formburg.com/tricks 👉 Webdesign Angebote mit drei Preisoptionen erstellen: https://www.jonasarleth.com/produkt/w... --------------------------------------------- Kostenlosen Webflow Account anlegen: https://formburg.com/webflow-kostenlos * Webflow schnell und einfach lernen: https://formburg.com/tutorials --------------------------------------------- Chapters 00:00 Praktische Schritte zur barrierefreien Navigation 00:23 Vorschau 00:38 Global Custom CSS Styles 02:58 Variablen Aufbau 03:38 HTML Tags und Struktur in Webflow 04:07 Start Barrierefreie Desktop Navigation 05:09 Wichtig: Versteckter Skip to main content Link 06:49 Gestaltung von Header und Logo 07:49 Wann SPAN Elemente und wann Webflow Text Elemente 08:38 Wichtig: NAV Tag vergeben 09:29 Wichtig: List Element für Nav Links verwenden 10:57 Aufbau Animation Link Unterstrich 12:15 Wann sind Animationen erlaubt und wann nicht 13:40 Toggle-Buttons und Interaktivität 14:28 Eigene Attribute brauchen immer data- davor 15:27 Dialog-Elemente und Animationen 17:52 Animationen und Clip-Path-Techniken 19:01 CSS-Layout und Responsive Design 20:01 Mobile Menü Links 24:00 Unterschiede zwischen Webflow-Navigation und Dialogfenstern 24:15 Wichtig: Tastaturzugänglichkeit muss im Mobile Menü bleiben 25:37 JS-Plugins und Fokusfängigkeit 26:12 Abschluss und Ausblick #webflow #css #webdesign --------------------------------------------- // PATREON ► Unterstütze meinen Kanal auf Patreon (mehrere Podcast Sonderfolgen und Webflow Tutorials pro Monat): http://jonasarleth.com/patreon ---------------------------------------------- // MEIN WEBDESIGN UND FREELANCER BLOG ► https://jonasarleth.com/blog ---------------------------------------------- // MEIN FORMBURG PODCAST ► iTunes: https://jonasarleth.com/itunes ► Spotify: https://jonasarleth.com/spotify ► SoundCloud: https://jonasarleth.com/soundcloud ► Overcast: https://jonasarleth.com/overcast ---------------------------------------------- Affiliate Links