Accessibility কাজের বেশিরভাগ HTML-এর কাজ (HTML কোর্সের accessibility lesson-এ কভার করা), কিন্তু হাতেগোনা কিছু জিনিস specifically CSS-এর দায়িত্ব — আর কিছু common CSS habit চুপচাপ পেজের performance-এর ক্ষতি করে।
কিছু user তাদের OS motion কমাতে সেট করে — vestibular disorder-এর জন্য, বা সাধারণ পছন্দে। এই media query-তে animation wrap করা সেই setting-কে সম্মান করে।
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}একজন কীবোর্ড user পেজে তারা কোথায় আছে তা জানতে visible focus outline-এর উপর নির্ভর করে। কোনো replacement ছাড়া এটা সরালে পেজ কীবোর্ডে ব্যবহারের অযোগ্য হয়ে যায়।
/* খারাপ — focus-এর একমাত্র visible চিহ্ন সরিয়ে দেয় */
:focus {
outline: none;
}
/* ভালো — একটি স্পষ্ট custom style দিয়ে বদলায় */
:focus-visible {
outline: 2px solid blue;
outline-offset: 2px;
}একটি সাদা background-এ হালকা ধূসর টেক্সট পরিষ্কার দেখাতে পারে, কিন্তু অনেক user-এর জন্য সত্যিকারভাবে পড়ার অযোগ্য। সাধারণ টেক্সটের জন্য অন্তত 4.5:1 একটি contrast ratio standard accessibility guideline (WCAG AA)।
| Habit | কেন এটা কিছু খরচ করে |
|---|---|
| গভীরভাবে nested বা অতিরিক্ত specific selector | প্রতিটি এলিমেন্টের বিরুদ্ধে match করতে ব্রাউজারের জন্য ধীর |
| width, height, বা top/left animate করা | প্রতিটি frame-এ layout পুনরায় হিসাব করতে ব্রাউজারকে বাধ্য করে |
| এর বদলে transform আর opacity animate করা | ব্রাউজার layout পুনরায় হিসাব না করে GPU-তে এগুলো composite করতে পারে |
| "just in case" প্রতিটি font weight load করা | প্রতিটি অব্যবহৃত weight অপচয় করা download size |
মনে রাখার যোগ্য একটি habit
একক সবচেয়ে প্রভাবশালী performance swap: একই visual effect যেভাবেই অর্জনযোগ্য হোক না কেন, width/height/top/left-এর বদলে transform/opacity animate করুন।