طراحی منوی سایت فارسی و راست‌چین: ملاحظات فنی و دسترس‌پذیری

منوی فارسی فقط «آینه‌کردن» منوی انگلیسی نیست. جهت سند، ترتیب خواندن، ترتیب فوکوس صفحه‌کلید و رفتار متن‌های مخلوط فارسی و لاتین باید هماهنگ باشند. این مقاله چک‌لیست فنی بر پایهٔ راهنماهای W3C است و دربارهٔ ترجیح کاربران ایرانی هیچ آماری نمی‌آورد.

جهت سند: dir روی html و CSS منطقی

راهنمای W3C Internationalization می‌گوید اگر جهت کلی سند راست‌به‌چپ است، dir="rtl" را روی تگ html بگذارید و فقط در موارد نادر که جهت پایه باید عوض شود از dir روی عناصر ساختاری استفاده کنید. همان راهنما صریحاً می‌گوید هرگز با CSS جهت پایه را اعمال نکنید، چون اطلاعات جهت معناشناختی است و باید حتی بدون CSS در دسترس باشد. برای تراز و فاصله‌ها هم توصیه می‌کند از ویژگی‌های منطقی (start و end) به‌جای left و right استفاده کنید تا محلی‌سازی و افزودن متن با جهت متفاوت آسان‌تر شود؛ left/right فقط وقتی مناسب است که عنصر باید مستقل از زبان در جای ثابت بماند.

ساختار منو

راهنمای W3C WAI می‌گوید ساختار منو را با لیست منتقل کنید (فناوری‌های کمکی تعداد آیتم‌ها را اعلام می‌کنند)، منو را با nav مشخص و با heading یا aria-label برچسب بزنید تا بین چند منو در یک صفحه قابل‌تشخیص باشد، و آیتم جاری را با aria-current="page" یا متن نامرئی نشان دهید. برچسب منو را فارسی و کوتاه بنویسید، مثلاً «منوی اصلی».

ترتیب فوکوس

معیار 2.4.3 در WCAG 2.2 (سطح A) می‌گوید اگر ترتیب پیمایش بر معنا یا عملکرد اثر دارد، فوکوس باید به ترتیبی حرکت کند که معنا و قابلیت عملیات را حفظ کند. در منوی RTL، اولین آیتم باید سمت راست باشد و Tab از راست به چپ حرکت کند؛ هر ترفندی که ترتیب بصری را با CSS عوض می‌کند باید با ترتیب DOM هم‌خوان بماند. این استنتاج برای RTL از معیار نویسنده است و باید با آزمون صفحه‌کلید تأیید شود.

زیرمنو

W3C WAI برای زیرمنوهای fly-out، aria-expanded را توصیه می‌کند و یادآور می‌شود برای افرادی که دقت دست کم دارند (مثل لرزش دست) استفاده از چنین منوهایی دشوار یا ناممکن است؛ پس راه دیگری برای رسیدن به آیتم‌های زیرمنو مثل تکرار آنها در صفحهٔ آیتم والد بدهید. روی موبایل هم همین منطق را داشته باشید: ساختار ساده‌تر بهتر از زیرمنوهای تودرتو است (توصیهٔ نویسنده).

متن مخلوط فارسی و لاتین

W3C می‌گوید مرورگرها جهت عنوان را از اولین نویسهٔ قویاً جهت‌دار تشخیص می‌دهند؛ اگر یک عنوان RTL با آکرونیم لاتین شروع شود ممکن است ترتیب نمایش غلط شود، و راه‌حل افزودن ‏ در ابتدای متن است. برای برچسب‌هایی مثل «API» یا «SEO» که وسط جملهٔ فارسی می‌آیند، همین مسئله را آزمایش کنید.

چک‌لیست پیش از انتشار

1. dir="rtl" و lang="fa" روی html.
2. CSS با ویژگی‌های منطقی start/end.
3. منو داخل nav با لیست و برچسب فارسی.
4. آیتم جاری با aria-current.
5. ترتیب Tab از راست به چپ و هم‌خوان با ترتیب بصری.
6. راه جایگزین برای زیرمنوها و آزمون با صفحه‌کلید.
7. آزمون برچسب‌های مخلوط فارسی-لاتین. برای نمای کلی تجربهٔ کاربر UX چیست؟ را ببینید.

اگر می‌خواهید منوی سایت خودتان را بازبینی کنیم، صفحهٔ شروع پروژه را ببینید؛ ارسال فرم تعهدی ایجاد نمی‌کند.

منابع و مراجع

• Structural markup and right-to-left text in HTML — W3C Internationalization (i18n).
• Menu Structure (Web Accessibility Tutorials) — W3C WAI.
• Fly-out Menus (Web Accessibility Tutorials) — W3C WAI.
• Understanding Success Criterion 2.4.3: Focus Order (WCAG 2.2) — W3C WAI، WCAG 2.2.