دسترس‌پذیری (Accessibility)

طراحی CSS برای دسترس‌پذیری — کنتراست، فوکوس، حرکت و کاربران کم‌توان

دسترس‌پذیری در CSS

دسترس‌پذیری (a11y) یعنی سایت برای همه قابل استفاده باشد — از جمله کاربران نابینا، کم‌بینا، یا دارای معلولیت حرکتی.

۱. کنتراست رنگ

نوعحداقل کنتراست
متن عادی۴.۵:۱
متن بزرگ۳:۱
عناصر تعاملی۳:۱
/* ❌ بد — کنتراست کم */
    .light-gray { color: #ccc; background: #f5f5f5; }
    
    /* ✅ خوب — کنتراست کافی */
    .dark-text { color: #333; background: #fff; }

۲. فوکوس کیبورد

/* هرگز outline را حذف نکنید! */
    /* ❌ بد */
    *:focus { outline: none; }
    
    /* ✅ خوب — استایل سفارشی */
    *:focus-visible {
        outline: 3px solid #3498db;
        outline-offset: 2px;
    }

۳. متن پنهان برای صفحه‌خوان

.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;
    }

۴. احترام به prefers-reduced-motion

@media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            transition-duration: 0.01ms !important;
        }
    }

۵. احترام به prefers-contrast

@media (prefers-contrast: high) {
        body {
            background: black;
            color: white;
        }
    }

۶. اندازه کلیک کافی

.btn {
        min-width: 44px;
        min-height: 44px;
        padding: 12px 24px;
    }

۷. نشانگر ماوس

button { cursor: pointer; }
    [disabled] { cursor: not-allowed; }

بهترین شیوه‌ها

نکات مهم

این مبحث بخشی از دوره آموزش کامل CSS است.

ابزارهای مرتبط