دسترس‌پذیری در محصول فارسی؛ ۱۰ قاعده که همه باید رعایت کنند

وقتی از دسترس‌پذیری حرف می‌زنیم، بیشتر آدم‌ها کاربر نابینا با صفحه‌خوان را تصور می‌کنند. او مهم است، ولی تنها نیست: کسی که دستش شکسته و فقط با کیبورد کار می‌کند، کسی که زیر آفتاب گوشی را می‌بیند، کاربر مسنی که متن کوچک را نمی‌خواند، و همه‌ی ما وقتی خسته‌ایم.

این ده قاعده بر پایه‌ی استاندارد WCAG 2.2 در سطح AA است، با چند نکته‌ی مخصوص رابط فارسی.

#دیدن

۱. کنتراست متن حداقل ۴٫۵ به ۱. برای متن بزرگ (حدود ۲۴ پیکسل، یا ۱۸٫۵ پیکسل پررنگ) و اجزای رابط مثل حاشیه‌ی فیلد، ۳ به ۱. متن خاکستری کم‌رنگ رایج‌ترین خطاست، به‌خصوص در تم تیره.

۲. رنگ تنها نشانه نباشد. فیلد خطادار فقط قرمز نشود؛ پیام خطا و آیکون هم داشته باشد. حدود ۸ درصد مردان نوعی کم‌بینی رنگ دارند.

۳. متن قابل‌بزرگ‌نمایی. با بزرگ‌نمایی ۲۰۰ درصد مرورگر، چیزی بریده یا روی هم نیفتد. اندازه‌ها را با rem تعریف کنید، نه پیکسل ثابت.

#کار با کیبورد

۴. همه‌چیز با کیبورد کار کند. هر کاری که با ماوس می‌شود، با Tab و Enter و Space و کلیدهای جهت هم بشود. منو، پنجره، تقویم و کشوها از همه بیشتر جا می‌مانند.

۵. فوکوس دیده شود. هیچ‌وقت outline: none بدون جایگزین. یک حلقه‌ی واضح دور عنصر فوکوس‌شده، که زیر سرصفحه‌ی ثابت هم پنهان نشود.

۶. ترتیب منطقی. ترتیب Tab همان ترتیب خواندن باشد؛ در رابط فارسی یعنی از راست به چپ و از بالا به پایین.

#لمس

۷. هدف لمس دست‌کم ۲۴ در ۲۴ پیکسل. این حداقل WCAG 2.2 است؛ برای دکمه‌های اصلی در موبایل ۴۴ پیکسل راحت‌تر است. آیکون‌های کوچک بستن و حذف از همه بیشتر این قاعده را می‌شکنند.

#صفحه‌خوان

۸. هر چیز معنادار، نام دارد. دکمه‌ای که فقط آیکون دارد، aria-label فارسی می‌خواهد: «بستن»، «حذف از سبد». تصویر معنادار alt توصیفی دارد و تصویر تزئینی alt="".

۹. زبان و جهت درست. تا صفحه‌خوان با تلفظ فارسی بخواند. تکه‌های انگلیسی وسط متن lang="en" بگیرند تا با تلفظ انگلیسی خوانده شوند.

۱۰. پیام‌های پویا اعلام شوند. وقتی چیزی بدون بارگذاری صفحه عوض می‌شود («به سبد اضافه شد»، «ذخیره شد»)، با یک ناحیه‌ی aria-live به صفحه‌خوان اعلام شود.

#نکته‌های مخصوص فارسی

• ارقام فارسی در aria-label هم فارسی باشند تا درست خوانده شوند.
• متن جایگزین تصویر را با همان قاعده‌های املا بنویسید: نیم‌فاصله و «ی» فارسی، چون صفحه‌خوان «میخواهید» را غلط می‌خواند.
• فلش‌های جهت‌دار در راست‌به‌چپ قرینه می‌شوند، ولی aria-label آن‌ها معنا را می‌گوید («تصویر بعدی»)، نه جهت را.