دسترس پذیری (Accessibility)
دسترس پذیری یعنی همه بتوانند سایت را راحت استفاده کنند. «دسترس پذیری (Accessibility)» با CSS بهتر می شود. بنابراین متن خواناتر می شود و جهت یابی ساده تر می شود.
کنتراست رنگیِ بالا
«کنتراست (Contrast)» اختلاف روشنایی رنگ هاست. کنتراست زیاد، خوانایی را زیاد می کند.
body {
background-color: #ffffff;
color: #000000;
}
body {
background-color: #eeeeee;
color: #cccccc;
}
فونت، اندازه و فاصله خطوط
فونت خوانا بگذار. سپس اندازه «نسبی (Relative)» مثل rem بده. چون کاربر می تواند بزرگ نمایی کند.
body {
font-family: Arial, sans-serif;
font-size: 1rem;
line-height: 1.6;
}
body {
font-family: Georgia, serif;
font-size: 12px;
font-style: italic;
font-variant: small-caps;
line-height: 90%;
}
نمایان بودن فوکوس
«فوکوس (Focus)» یعنی عنصر فعال کیبوردی. سبک فوکوس را واضح کن تا مسیر گم نشود.
a:focus,
button:focus,
input:focus {
outline: 2px solid orange;
}
فوکوس را حذف نکن
حذف outline بدون جایگزین، کاربر را سردرگم می کند. بنابراین همیشه جایگزین واضح بده.
button:focus {
outline: none;
}
button:focus {
outline: 2px solid orange;
}
HTML معنایی + CSS
«معنایی (Semantic)» یعنی تگ درست برای نقش درست. سپس با CSS فقط ظاهر را عوض کن.
nav {
background-color: #333333;
color: white;
}
aside {
background-color: #333333;
color: white;
}
رعایت ترجیح کاربر
بعضی کاربران از حرکت زیاد اذیت می شوند. با prefers-reduced-motion انیمیشن را کم کن.
@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
transition: none !important;
}
}
گام های عملی سریع
- کنتراست را با ابزار تست بررسی کن.
- فونت نسبی و فاصله مناسب بده.
- outline فوکوس را بهتر و واضح کن.
- از تگ های معنایی برای ساختار استفاده کن.
- برای حرکت کم، media query بنویس.
نکته: بهینه سازی هم مهم است. برای سرعت بیشتر به بهینه سازی CSS سر بزن. همچنین قوانین برخورد را در اختصاصی سازی (Specificity) یاد بگیر.
جمع بندی سریع
- کنتراست بالا، خوانایی بهتر.
- فونت نسبی، کنترل کاربر.
- outline واضح، جهت یابی آسان.
- HTML معنایی، ساختار روشن.
- حرکت کمتر برای حساس ها.