کتابخانه
@accessible360/accessible-slick یه کتابخونه کاروسل (اسلایدر) جاوااسکریپتیه که روی پایه slick ساخته شده و تمرکزش روی دسترسی پذیریه. یعنی کاربرهایی که با کیبورد یا screen reader کار می کنن هم می تونن اسلایدها رو ببینن و جابه جا کنن. اگه یه اسلایدر آشنا و سبک می خوای که این موضوع رو جدی گرفته باشه، گزینه خوبیه.
نسخه رسمی و بدون تغییر، از منبع رسمی با مجوز MIT؛ هش هر فایل با منبع بررسی شده است.
۱۵۷ کیلوبایت· ۱۴ فایل· انتشار
SHA-256: 4c53bd4fb46505b90b10e21b4c6e477a14abb0ed61eab0a7b44ee0c351de5b5a
accessible-slick نسخه اصلاح شده و دسترسی پذیر کتابخونه معروف slick است. تیم Accessible360 نگهش می داره و با مجوز MIT منتشر شده. slick سال ها تو سایت های زیادی استفاده شده، ولی از نظر دسترسی پذیری ضعف هایی داشت. این پروژه همون کار رو انجام می ده، فقط با ساختار و رفتاری که با کیبورد و فناوری های کمکی بهتر کنار می یاد.
مشکلی که حل می کنه ساده است. خیلی از اسلایدرها فقط برای کسی ساخته می شن که با ماوس یا لمس کار می کنه. اگه با کلید Tab بگردی یا از screen reader استفاده کنی، یا اصلاً نمی تونی بین اسلایدها بری یا نمی فهمی الان کجایی. accessible-slick روی همین نقطه ها کار کرده: جابه جایی با کیبورد، اطلاعات مناسب برای ابزارهای کمکی و رفتار درست فوکوس. این موضوع تو سایت هایی که کاربرهای متنوع دارن، مثل فروشگاه ها و سایت های آموزشی، بیشتر به چشم می یاد. جزئیات هر قابلیت رو تو مستندات خود پروژه ببین، چون بین نسخه ها ممکنه فرق کنه.
اگه سایتت از قبل jQuery بارگذاری می کنه، مثل خیلی از قالب های وردپرس و سایت های فروشگاهی ایرانی، این کتابخونه راحت جا می افته. API اش تا حد زیادی مثل slick است، پس اگه قبلاً با slick کار کرده باشی گزینه ها برات آشناست. گزینه راست به چپ هم داره، ولی روی سایت فارسی سمت حرکت اسلایدها و جای فلش ها رو خودت تو مرورگر امتحان کن. اگه پروژه ات jQuery نداره و نمی خوای اضافه اش کنی، سراغ یه کتابخونه بدون وابستگی برو.
یه نکته مهم هم هست: فقط انتخاب این کتابخونه سایتت رو دسترسی پذیر نمی کنه. alt تصویرها، کنتراست متن روی اسلاید و حرکت خودکار اسلایدها هنوز با خودته. اگه autoplay رو روشن می کنی، حواست باشه کسی که دیر می خونه نتونه جلوش رو بگیره. یا کنترل توقف بذار یا autoplay رو خاموش کن.
نسخه های رسمی و بدون تغییر accessible-slick تو مخزن داخلی ما هم هست. وقتی دسترسی به npm یا CDN های خارجی کنده یا قطعه، از همین جا می تونی بگیری و روی هاست خودت بذاری.
برای استفاده لازم نیست کار پیچیده ای بکنی. مراحل کلی این طوره:
بعد از راه انداختن، یه بار فقط با کیبورد صفحه رو بگرد. ببین می شه با Tab به کنترل ها رسید، فوکوس معلومه و اسلایدها جابه جا می شن. این تست دو دقیقه ای جلوی خیلی از مشکل ها رو می گیره.
از نظر استفاده خیلی شبیه به هم هستن، چون این یکی از روی slick ساخته شده. فرق اصلی تو دسترسی پذیریه: رفتار با کیبورد، فوکوس و اطلاعاتی که به screen reader داده می شه. اگه می خوای از slick بری سراغ این، قبل از جایگزینی روی سایت واقعی، گزینه ها و ظاهر رو تو محیط تست بررسی کن.
نه، مثل slick به jQuery نیاز داره. اگه سایتت وردپرسیه، معمولاً jQuery از قبل هست و فقط باید ترتیب بارگذاری رو درست کنی و jQuery رو دو بار لود نکنی. اگه پروژه ات jQuery نداره و نمی خوای اضافه اش کنی، بهتره یه کاروسل بدون وابستگی انتخاب کنی.
فایل های CSS و JS رو تو قالب یا افزونه خودت ثبت کن و jQuery رو وابستگی اسکریپت بذار. بعدش HTML اسلایدر رو تو قالب یا یه شورتکد بذار و کد راه اندازی رو بعد از بارگذاری اسکریپت اجرا کن. قبل از تغییر، از قالبت بکاپ بگیر و ترجیحاً تغییرها رو تو قالب فرزند بنویس.
کتابخونه گزینه ای برای حالت راست به چپ داره و تو سایت فارسی قابل استفاده است. ولی سمت حرکت اسلایدها، جای فلش ها و ترتیب نقطه ها رو خودت تو مرورگر چک کن، چون ظاهر نهایی به CSS قالبت هم بستگی داره. قبل از انتشار، یه بار هم روی موبایل امتحانش کن.
بله، مجوزش MIT است و استفاده تجاری و تغییر کد رو اجازه می ده. فقط متن مجوز و اعلان حق نشر باید همراه کتابخونه بمونه. این شرط برای فایل هایی که روی هاست خودت می ذاری هم صدق می کنه. اگه پروژه ات حساسیت حقوقی داره، متن کامل مجوز رو یه بار بخون.
نام کتابخانه، افزونه یا قالب را بفرستید؛ پس از بررسی، نسخه‌های رسمی آن به مخزن اضافه می‌شود.