So löst du Barrierefreiheitsprobleme mit Tailwind CSS und Symfony CMS

Tailwind CSS und Symfony CMS optimal nutzen: In diesem Video zeige ich euch, wie ihr Barrierefreiheitsprobleme mit Tailwind CSS und Symfony CMS löst. Wir gehen auf die richtigen Einstellungen für Listen, Padding und Margins ein, um euren Content im Rich Editor perfekt darzustellen.

Tailwind CSS bietet viele Vorteile, aber globale Einstellungen können manchmal Probleme bereiten. Ich erkläre, wie ihr mit einfachen Anpassungen das Layout eurer Listen optimiert, um sie korrekt und barrierefrei darzustellen. Besonders praktisch: Mit Symfony und Zulu Fullstack CMS lassen sich diese Änderungen effizient umsetzen.

Diskutiert mit: Welche Erfahrungen habt ihr mit Tailwind CSS und Listen gemacht? Nutzt ihr ähnliche Workflows oder andere Tools? Schreibt eure Meinung in die Kommentare oder stellt Fragen zu den vorgestellten Anpassungen. Ich freue mich auf eure Beiträge!

Neue Videos:
Zweimal wöchentlich veröffentliche ich hier Live-Coding-Tutorials und alles als Open Source. Falls du den Kanal noch nicht kennst, folge gerne und schalte die Glocke ein, um keine neuen Videos zu verpassen!

ChatGPT Playlist:

Cypress.IO Live Coding Tutorial Playlist:

Vim Playlist:

Tailwind Playlist:

00:00 Intro: Tailwind CSS Listen im CMS richtig stylen
00:35 Problem Demo: Fehlende List-Styles & Abstände
01:28 Symfony & Zulu CMS Setup mit Tailwind
02:15 Quick-Fix: List-Style mit Tailwind überschreiben
03:20 Troubleshooting: Selektoren & Padding anpassen
04:45 Best Practice: Margins & Abstände optimieren
06:10 Accessibility: Semantic HTML & Section Headers
07:30 Deployment: Continuous Delivery Pipeline
09:15 Wrap-up & Kontaktmöglichkeiten

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

Hier geht es zu unseren Social-Media-Kanälen:

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

Das sind unsere Webseiten:

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

Du möchtest Never Code Alone unterstützen?
Dann lass uns gerne ein Abo da und schreibe deine Fragen und/oder Anregungen in die Kommentare.

Danke fürs zuschauen!
Ich hoffe das Video hat dir gefallen.

[sascham.]

Das schaut ziemlich umständlich aus mit der Liste.

Wäre es nicht leichter alle ul/ol, die im header/footer/nav vorkommen mit list-style: none zu versehen?
Dann würde das ul/ol im Content unangetastet bleiben.

Oder ggf. ein globales list-style: none mit :not([class]) zu erweitern? Dann würden alle ul/ol ohne Klasse als normale Liste ausgegeben.
Das wäre eine reine CSS-Lösung.