بیان برند
دسترسپذیری
دسترسپذیری در پرتو نه یک checklist، که بخشی از فلسفهی برند است. ارزش «وضوح» وقتی معنا دارد که برای همهی مخاطبها واضح باشد، نه فقط برای آنهایی که دیدشان عالی است.
اصل کلی
«هر چه برای پرتو ساخته میشود، باید حداقل WCAG 2.1 سطح AA را رعایت کند.»
این یعنی هر طرحی، چه در محصول، چه در سایت، چه در یک پست سوشال، باید با این معیارها سنجیده شود قبل از انتشار. اگر طرحی این معیار را نمیگذراند، انتشار آن متوقف میشود — نه اینکه «بعداً درست میکنیم».
کنتراست رنگ
بدون کنتراست کافی، رنگ خوانا نیست. این بخش، حداقلهای هر ترکیب رنگ در پرتو را تعریف میکند.
نسبتهای لازم
- متن معمولی (زیر ۱۸pt یا ۱۴pt bold): حداقل نسبت کنتراست ۴.۵:۱
- متن بزرگ (۱۸pt+ یا ۱۴pt+ bold): حداقل ۳:۱
- عناصر تعاملی (دکمه، آیکون، input border): حداقل ۳:۱ در مقابل پسزمینه
- متن غیرفعال (disabled): از این قاعده مستثناست، اما باید با علامت بصری دیگر (مثل کاهش opacity) همراه باشد، نه فقط رنگ.
ترکیبهای امن
نمونهی متن خوانا
یک خط متن کمکی
سبز برند روشن است؛ متن تیره روی آن (نه سفید) با کنتراست بالا خوانا میماند.
نمونهی متن خوانا
یک خط متن کمکی
نمونهی متن خوانا
یک خط متن کمکی
کافی برای متن بزرگ، حد مرز برای متن معمولی.
نمونهی متن خوانا
یک خط متن کمکی
جفت foreground/background بهصورت متضاد طراحی شدند — در هر دو تم خوانا میمانند.
ترکیبهای ممنوع
نمونهی متن خوانا
یک خط متن کمکی
رنگ روی رنگ همخانواده هرگز کنتراست کافی ندارد.
نمونهی متن خوانا
یک خط متن کمکی
ترکیب دو خاکستری نزدیک، خوانا نیست.
اندازه و فضا
- حداقل سایز متن: ۱۴ پیکسل در محصول، ۱۶ پیکسل در ارتباطات marketing. متن کوچکتر فقط در caption و کمتر استفاده میشود.
- حداقل اندازهی target تعاملی: ۴۴×۴۴ پیکسل (طبق WCAG 2.5.5). دکمههای کوچکتر باید padding داشته باشند تا کل ناحیهی کلیک به این حد برسد.
- فاصله بین line: حداقل ۱.۵ برابر اندازهی فونت برای پاراگراف بدنه.
- محدوده کلیک هرگز در فاصلهی کمتر از ۸ پیکسل از یک محدودهی کلیک دیگر نباشد.
رنگ به تنهایی، معیار نیست
«هیچ پیامی فقط با رنگ منتقل نمیشود.»
اگر یک قرمز در رابط میگوید «خطا»، باید کنارش یک آیکون و یک برچسب متنی هم باشد. کسی که قرمز و سبز را تشخیص نمیدهد (~۸٪ مردان) باید از پیام بفهمد، نه از رنگ.
این یعنی:
- وضعیت موفقیت/خطا: رنگ + آیکون + متن
- required fields: ستاره + label + (در صورت لزوم) توضیح
- تب فعال: رنگ متفاوت + خط زیر + (در صورت لزوم) bold
- نمودار: رنگ + شکل (دایره، مربع، خط) + برچسب در legend
متن جایگزین (Alt Text)
هر تصویر معنادار در محصول و ارتباطات پرتو، باید alt داشته باشد. قاعده ساده است:
- تصویر معنادار (مثل لوگو، آواتار، اسکرینشات): alt = توصیف کوتاه (۵ تا ۱۰ کلمه)
- تصویر تزیینی (مثل آیکون کنار متنی که همان معنا را میرساند):
alt=""— تا screen reader آن را skip کند. - نمودار: alt = خلاصهی یافتهی نمودار (مثل «روند صعودی در ۳ ماه گذشته»)، نه «نمودار میلهای».
حرکت و انیمیشن
انیمیشن در پرتو محدود است (به شخصیت آرام برند فکر کنید). با این حال، برای کسانی که حساسیت به حرکت دارند، قاعدهی prefers-reduced-motion رعایت میشود — اگر کاربر در سیستمعامل خود این تنظیم را فعال کرده، همهی انیمیشنهای غیرضروری در محصول حذف میشوند.
قواعد:
- هیچ انیمیشنی بیش از ۵ ثانیه ادامه پیدا نمیکند.
- هیچ انیمیشنی بیش از ۳ بار در ثانیه flash نمیزند (جلوگیری از سکتهی نوری).
- هیچ scroll-jacking. کاربر کنترل حرکت صفحه را دارد.
- هیچ auto-play ویدیو با صدا.
ناوبری با صفحهکلید
همهی عناصر تعاملی در محصول و سایت باید با صفحهکلید قابل دسترس باشند. این یعنی:
- Tab برای حرکت بین عناصر، Shift+Tab برای حرکت معکوس.
- Enter یا Space برای فعال کردن دکمهها.
- Escape برای بستن modal، dropdown، sheet.
- Focus visible — هر عنصر در حالت focus باید یک ring واضح داشته باشد (در پرتو، سبز برند با opacity ۳۰٪).
- هیچ trap (نگه داشتن focus در یک ناحیه بهجز در modal فعال).
ابزار سنجش
برای چک کردن کنتراست و دیگر معیارهای WCAG، از این ابزارها استفاده کنید:
- Lighthouse (در Chrome DevTools) — برای صفحات زنده، score کلی A11y.
- axe DevTools — extension رایگان برای پیدا کردن مشکلات خاص.
- WebAIM Contrast Checker — برای چک کردن نسبت کنتراست دو رنگ.
چرا این مهم است
دسترسپذیری، نه یک «اقدام اخلاقی» در ته لیست، بلکه یک معیار کیفی است. اگر محصول پرتو برای ۱۰٪ از مخاطبان بالقوهاش قابل استفاده نیست — بهخاطر کمبینایی، اختلال در حرکت دست، یا نابینایی رنگ — یعنی محصول ناقص است. این برخلاف ارزش «وضوح» برند است.