قاعدهٔ طلاییِ select قابلسفارشیسازی
فرانتاندخلاصهٔ کاملتر
نویسندههای WebKit خبر میدن که select قابلسفارشیسازی (customizable select) به Safari 27 میاد. با این فناوری، توسعهدهندهها میتونن ظاهر عناصر رو کاملاً کنترل کنن، از فلش سفارشی و چیدمان option گرفته تا نمونهرنگ و آیکون و استایل کامل بصری، بدون نیاز به کتابخانهٔ جاوااسکریپت یا انبوهی از ها. و چون یه کنترل بومیه، لازم نیست سر navigation کیبورد یا سمانتیک دسترسیپذیری کوتاه بیای.
ولی به گفتهٔ نویسنده، برای اینکه این کنترل بومی برای همه خوب کار کنه، باید یه قاعدهٔ ساده ولی اساسی رو رعایت کنی: همیشه برای عناصر option محتوای متنی یا صفت متنی دسترسپذیر بذار. هر بار این قاعده شکسته بشه، هر بار که یه option فقط با یه تصویر بدون متن و بدون fallback دسترسپذیر استایل بشه، همزمان سه مشکل به وجود میاد: منو برای همه سختتر میشه، با ابزارهای دسترسیپذیری غیرقابلاستفاده میشه، و در مرورگرهایی که هنوز پشتیبانی نمیکنن یه تجربهٔ کاملاً شکسته میشه.
نویسنده سه فایدهٔ رعایت این قاعده رو باز میکنه. UX بهتر: مثلاً یه فیلتر دستهبندی که فقط با آیکون (ساختمون، گل، مرغ مگسخوار) نمایش داده بشه تمیز به نظر میاد، ولی کاربری که آیکون رو نشناسه هیچ راهنمایی نداره؛ اضافه کردن یه برچسب متنی به هر option، تجربه رو فوری قابلاسکن و حالت انتخابشده رو در یه نگاه خوانا میکنه. دسترسیپذیری بهتر: وقتی یه screen reader به option بدون متن برسه، ممکنه برچسب توصیفی نشنوه؛ متن، حتی وقتی بصری با کلاس .visually-hidden پنهون بشه، تو درخت دسترسیپذیری میمونه و چیز واقعی به screen reader و نمایشگر بریل میده. اگه از آیکون بهعنوان استفاده میکنی، باید alt یا aria-label بذاری، یا با alt="" تزئینیش کنی و بذاری برچسب معنا رو حمل کنه.
بهبود تدریجی (progressive enhancement) بهتر: چون این فیچر جدیده، مرورگرهایی که هنوز پشتیبانی نمیکنن به بومی پلتفرم fallback میکنن که رفتار درستیه، بهشرطی که optionهات تو اون حالت هم معنا داشته باشن. اگه متن رو بهنفع آیکون یا swatch حذف کرده باشی، کاربر مرورگر قدیمی یه dropdown پر از option خالی میبینه؛ همین موقعی هم پیش میاد که CSS اصلاً لود نشه. نویسنده توصیه میکنه بهبودهات رو تو @supports (appearance: base-select) بپیچی و متن ساده رو baseline نگه داری. جمعبندیش سادهست: متن رو نگه دار؛ میتونی بصری پنهونش کنی، ریزش کنی یا خارج از صفحه ببریش، ولی باید باشه. آیکون و swatch و تصویر افزوده به یه option ان، نه جایگزینش.
نکات کلیدی:
- select قابلسفارشیسازی به Safari 27 میاد و بدون JS کنترل کامل ظاهر میده
- قاعدهٔ طلایی: همیشه برای optionها متن یا صفت متنی دسترسپذیر بذار
- متن پنهانشدهٔ بصری (visually-hidden) هنوز تو درخت دسترسیپذیری میمونه
- بهبودها رو تو @supports بپیچ و متن ساده رو baseline نگه دار؛ آیکون افزودهست نه جایگزین
