CSS Accessibility Styling

🎨 رنگ و کنتراست

همیشه بین متن و پس‌زمینه کنتراست کافی داشته باشید.
بر اساس استاندارد WCAG:
- ۴.۵:۱ برای متن معمولی
- ۳:۱ برای متن بزرگ (۱۸px یا بیشتر، یا بولد ۱۴px به بالا)
فقط از رنگ برای انتقال معنا استفاده نکنید (مثلاً قرمز = خطا). از آیکون یا متن کمکی هم استفاده کنید.
مثال:

.button {
background: #0055cc; /* آبی پررنگ */
color: #fff;
}
.button:focus,
.button:hover {
background: #003d99;
}

⌨️ حالت فوکوس

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

a:focus,
button:focus {
outline: 3px solid #ffbf47; /* رنگ زرد پررنگ */
outline-offset: 2px;
}

🖱️ هاور و فوکوس

اگر از :hover برای افکت استفاده می‌کنید، همان حالت را برای :focus هم بگذارید تا کاربران کیبورد هم آن را ببینند.
مثال:

.menu-item:hover,
.menu-item:focus {
background: #eee;
}

🔤 تایپوگرافی

از واحدهای نسبی مثل em, rem, % استفاده کنید تا متن با زوم تغییر کند.
متن را خیلی کوچک نگیرید (بهتر است حداقل ۱۶px).
ارتفاع خط (line-height) حداقل 1.5 باشد تا خوانایی بهتر شود.

body {
font-size: 1rem;
line-height: 1.6;
}

🖼️ کاهش حرکت

به تنظیمات کاربرانی که حرکت‌های زیاد را دوست ندارند (مشکل سرگیجه یا حساسیت بصری) احترام بگذارید.
مثال:

@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
transition: none !important;
scroll-behavior: auto !important;
}
}

📱 طراحی واکنش‌گرا

مطمئن شوید وقتی کاربر متن را تا ۲۰۰٪ زوم می‌کند، چیدمان به‌هم نریزد.
از فلکس (flex) و گرید (grid) استفاده کنید و از ارتفاع ثابت (px) پرهیز کنید.

🎯 مخفی‌سازی دسترس‌پذیر (برای صفحه‌خوان‌ها)

وقتی متنی را می‌خواهید فقط برای صفحه‌خوان نگه دارید و روی صفحه دیده نشود، از تکنیک‌های sr-only استفاده کنید:

.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}