Design web arabe pour le marché marocain : UX et bonnes pratiques RTL

L'arabe est la langue officielle du Maroc. La darija est parlée par la grande majorité de la population. Pourtant, la plupart des sites marocains sont conçus en français et parfois traduits en arabe après coup. Si votre audience principale lit l'arabe, votre site devrait être conçu en arabe, pas traduit dedans.

Layout RTL : bien plus que retourner gauche-droite

Le layout de droite à gauche n'est pas simplement le miroir d'un design de gauche à droite. Les menus de navigation s'écoulent de droite à gauche. Les icônes directionnelles doivent être retournées. Mais les numéros de téléphone, emails et URLs restent de gauche à droite même en contexte RTL.

Typographie : choisir la bonne police arabe

Le texte arabe est plus dense verticalement et nécessite plus de hauteur de ligne (1,6–1,8 vs 1,4–1,5 pour le latin). La taille de police doit être plus grande : arabe à 14px équivaut à environ 12px en lisibilité latine. Bonnes polices web arabes : Noto Sans Arabic, IBM Plex Arabic, Cairo, Tajawal.

Contenu multilingue : le défi marocain

Les sites marocains mélangent souvent arabe, français et parfois anglais sur la même page. Utilisez l'élément HTML bdi pour isoler le texte avec une directionnalité différente.

Design de formulaires pour les utilisateurs arabes

Labels alignés à droite, champs de droite à gauche. Mais les champs email et téléphone restent LTR. Auto-détection de la direction du texte basée sur le premier caractère tapé.

Considérations UX culturelles

Le vert a des connotations positives dans la culture islamique. Les images doivent refléter la culture marocaine. Évitez les photos stock évidemment occidentales.

Implémentation technique

Utilisez les propriétés logiques CSS : margin-inline-start au lieu de margin-left. Ces propriétés s'adaptent automatiquement à la direction du texte. Pour la stratégie linguistique complète, voir sites multilingues au Maroc. Pour un site conçu pour les audiences arabophones, discutons de vos besoins.