Barrierefreie, mehrsprachige Websites bauen

Mehrsprachigkeit klingt nach einer reinen Übersetzungsaufgabe, bis man Arabisch hinzufügt und merkt, dass sich die halbe Seite in die falsche Richtung dreht. Hier sind ein paar Dinge, die uns auf die harte Tour beigebracht wurden. CSS-Logical-Properties reichen allein nicht aus. `margin-inline-start` statt `margin-left` zu verwenden, löst viele Probleme automatisch, aber nicht alle. Layouts, die auf Pixel-genauem `translateX` für Animationen basieren, brechen in RTL, weil die Bewegungsrichtung selbst gespiegelt werden muss – das übernimmt keine Logical Property. Flexbox- und Grid-Reihenfolge kann Animationen sabotieren, die auf fester Reihenfolge beruhen. Unser Logo-Marquee zum Beispiel verschwand komplett vom Bildschirm in RTL, weil sich schrumpfende Block-Boxen in RTL standardmäßig rechts ausrichten, kombiniert mit einer Animation, die von einer Links-nach-rechts-Bewegung ausging. Die Lösung war, den Marquee-Container explizit auf `direction: ltr` zu setzen und die visuelle Spiegelung dem übergeordneten Container zu überlassen. Arabisch ist eine Schreibschrift – Buchstaben verbinden sich je nach Nachbarn. Eine Technik, die wir für gestaffelte Texteffekte auf Englisch verwendet hatten (Text in einzelne Buchstaben-Spans aufteilen), zerstörte diese Verbindungen komplett und produzierte unleserlichen Text. Die Lösung war, arabischen Text per Regex zu erkennen und auf Wortebene statt auf Buchstabenebene zu animieren.