چرخ فلک های قابل دسترس بسازید

Robert Flack

Penny McLachlan

Lucas Radaelli

تاریخ انتشار: 29 سپتامبر 2025

آنها را دوست داشته باشید یا از آنها متنفر باشید، چرخ فلک ها یک الگوی پرکاربرد و درخواستی هستند . بنابراین هنگامی که یک چرخ فلک اجرا می شود، باید قوی و در دسترس باشد. این باید در ابتدا رنگ آمیزی تعاملی باشد، برای تعمیر و نگهداری آسان تر، و با ساختار معنایی ساخته شده باشد که با فناوری های کمکی آزمایش شده است.

با این حال، در دسترس قرار دادن چرخ و فلک ها اغلب چالش برانگیز است. مدیریت تمرکز، دریافت درست اعلامیه‌های صفحه‌خوان، و مدیریت عناصر تعاملی خارج از صفحه، پیچیده است، بنابراین چرخ و فلک در بسیاری از سایت‌ها قابل دسترسی نیست. این چالش‌ها تیم Chrome را بر آن داشت تا روی چرخ فلک‌های تعاملی CSS به‌عنوان بخشی از ماژول سرریز CSS سطح 5 که در Chrome 135 ارسال شد، کار کند.

پس از راه‌اندازی اولیه این ویژگی در کروم، بازخوردهای زیادی از جامعه دریافت کردیم که برای رفع آنها تلاش کرده‌ایم. این شامل عملکردهای جدیدی مانند پشتیبانی از حالت‌های نشانگر پیمایش گسسته و ناوبری و رفع اشکالات متعدد است. به عنوان مثال:

• پشتیبانی از شمارنده در متن جایگزین ، که در کروم 140 فرود آمد.
• رفع مشکلی که در آن ::scroll-button state توسط صفحه خوان ها به درستی خوانده نمی شود.
• اطمینان از اینکه ::scroll-marker یک نام برچسب ARIA را از مقدار محتوا دریافت می کند .
• رفع اشکالی که در آن همه عناصر ::scroll-marker به عنوان "انتخاب شده" خوانده می شدند.

ما معتقدیم که ویژگی‌های CSS Overflow 5 می‌توانند چرخ فلک‌های قوی و قابل دسترس ایجاد کنند که در ابتدا تعاملی هستند. این پست شما را با تمرکز بر نحوه استفاده از این ویژگی ها برای حل مشکلات دسترسی طولانی مدت راهنمایی می کند.

برای معرفی کلی تر چرخ فلک، نگاهی به مقاله چرخ فلک با CSS بیندازید. به یاد داشته باشید: هیچ رابط کاربری را نمی توان تضمین کرد که خارج از جعبه قابل دسترسی باشد، شما همیشه باید دسترسی به صفحات خود را آزمایش کنید.

به چه نوع چرخ فلکی نیاز دارید؟

قبل از پرش به کد، مهم است که بدانید چه نوع چرخ فلکی می سازید. استراتژی دسترسی مناسب به نحوه تجربه کاربر از محتوا بستگی دارد. این پست سه نوع رایج را پوشش می دهد:

چرخ فلک های تکی

با چرخ فلک های تک موردی، تنها یک اسلاید به طور کامل قابل مشاهده و تعاملی در یک زمان است (به عنوان مثال، بنرهای قهرمان یا نمایش اسلاید).

چرخ فلک ها به صورت خودکار صفحه بندی می شوند

چرخ فلک‌های صفحه‌بندی شده به‌طور خودکار «صفحات» محتوا را نشان می‌دهند، مانند فهرستی از محصولات یا نمایش‌های تلویزیونی.

چرخ فلک های چند موردی

در چرخ فلک های چند موردی، چندین مورد در چرخ فلک به طور همزمان قابل مشاهده هستند، اما همچنان می توانید بدون صفحه بندی در میان آنها به صورت جداگانه پیمایش کنید.

هر نوع چرخ و فلک ملاحظات دسترسی و بهترین شیوه های متفاوتی دارد.

چرخ فلک های تکی

این یک نمایش اسلاید کلاسیک است. تنها یک عنصر فرزند قرار است در یک زمان خوانده شود، اگرچه در بسیاری از موارد کاربران برای ارائه سرنخ های متنی در مورد محتوای اضافی، یک "نگاهی" از مورد بعدی یا قبلی را مشاهده می کنند. هدف این است که اطمینان حاصل شود که فقط اسلاید متمرکز و کاملاً قابل مشاهده تعاملی است.

در اینجا نحوه دسترسی به آن، گام به گام آورده شده است.

مرحله 1: یک فوکوس را با اسکرول کردن اعمال کنید

برای تضمین اینکه محفظه اسکرول همیشه به یک اسلاید می‌چسبد و هیچ موردی به طرز عجیبی در بین گیر نمی‌کند، از Scroll Snapping CSS استفاده کنید. این تضمین می کند که پس از یک اسکرول، یک آیتم کاملاً به موقعیت صحیح خود "چسبیده" می شود و یک تجربه کاربری تمیز ایجاد می کند.

.carousel {
  scroll-snap-type: inline mandatory;
}
.item {
  scroll-snap-align: center;
}

مرحله 2: تغییرات چرخ فلک و اسلاید را اعلام کنید

کاربر با صفحه‌خوان باید بداند که وارد چرخ و فلک شده است و اینکه اسلاید چه زمانی تغییر می‌کند. این به چند ویژگی ARIA در ظرف چرخ فلک نیاز دارد:

در اینجا ساختار HTML آمده است:

<div class="carousel" role="region" aria-label="Slideshow" aria-live="polite"> ... </div>

مرحله 3: فقط اسلاید قابل مشاهده را تعاملی کنید

این برای دسترسی بسیار مهم است، زیرا از ورود تصادفی دکمه‌ها یا پیوندهای روی اسلایدهای خارج از صفحه توسط کاربران جلوگیری می‌کند. برای رسیدن به این هدف، از ویژگی جدید scroll-state container query و interactivity استفاده کنید.

ابتدا، با استفاده از interactivity: inert هر مورد اسلاید را به طور پیش فرض بی اثر کنید. سپس، از یک جستجوی کانتینر scroll-state برای هدف قرار دادن اسلایدی که در حال حاضر در نمای «snapped» است استفاده کنید و محتوای آن را روی interactivity: auto .

.item {
  container-type: scroll-state;
}
/* Make all content inside slides inert by default */
.item > * {
  interactivity: inert;
  /* When a slide is snapped inline, make its content interactive */
  @container scroll-state(snapped: inline) {
    > .content {
      interactivity: auto;
    }
  }
}

با این CSS، مرورگر به طور خودکار موارد قابل فوکوس را کنترل می کند. برای مدیریت فهرست برگه به ​​جاوا اسکریپت بیشتری نیاز نیست. پرس و جوی scroll-state همه اسلایدها را غیر از اسلاید فعلی بی اثر می کند.

چرخ فلک های صفحه بندی شده

این الگو اغلب برای گالری محصولات یا انتخاب هایی که محتوا در صفحات گروه بندی می شود استفاده می شود. دسترسی را می توان به دو روش انجام داد، بسته به اینکه چگونه می خواهید محتوا را ارائه دهید.

چرخ فلکی با صفحات مجزا

از یک ظرف با role="region" با یک عنصر با role="tabpanel" در داخل آن استفاده کنید. این tabpanel محتوای خود را به‌روزرسانی می‌کند تا برگه یا صفحه فعال را منعکس کند.

<div role="region" class="carousel" aria-label="Featured Products Carousel">
    <div role="tabpanel">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        ...
        <div class="item">Item n</div> </div>
    </div>
</div>

برای مدیریت تعامل، از یک ترفند انیمیشن هوشمندانه مرتبط با جدول زمانی view() استفاده کنید. این تضمین می‌کند که ترتیب برگه‌ها فقط به موارد قابل مشاهده روی صفحه نمایش می‌رسد.

@keyframes interactive-when-visible {
  0% { interactivity: auto; }
}
.item {
  interactivity: inert;
  animation: interactive-when-visible steps(1);
  animation-timeline: view(inline);
}

فهرستی از مطالب

اگر محتوا اساساً یک لیست است، از عنصر <ul> برای معنای صحیح استفاده کنید.

به عنوان مثال:

<div class="carousel" role="region" aria-label="Related Posts">
  <ul>
    <li><!-- Post 1 content --></li>
    <li><!-- Post 2 content --></li>
    <li><!-- Post 3 content --></li>
    <!-- ... -->
  </ul>
</div>

برای این الگو، از ویژگی تعاملی برای بی اثر کردن محتوای خارج از صفحه استفاده نکنید. انجام این کار بر تعداد موارد اعلام شده توسط صفحه‌خوان‌ها تأثیر می‌گذارد، بنابراین همه محتوا باید در درخت دسترس‌پذیری باقی بماند.

چرخ فلک های چند موردی

این الگو برای چرخ فلک هایی است که در آن چندین عنصر کودک ممکن است به طور همزمان قابل مشاهده و خواندن باشد. به عنوان مثال، یک قفسه "محصولات مرتبط" در یک سایت تجارت الکترونیک.

این چرخ فلک ها بسته به پاسخ شما به تصمیم زیر رفتار متفاوتی دارند: آیا تمرکز کاربر را به یک مورد در یک زمان هدایت می کنید یا به آنها اجازه می دهید آزادانه به تمام محتوای قابل مشاهده دسترسی داشته باشند؟

الگوی 1: یک آیتم تعاملی واحد در بین موارد قابل مشاهده

در این مدل، آیتم های متعددی قابل مشاهده هستند، اما فقط آیتم اولیه یا "جاری" تعاملی است. سایر موارد قابل مشاهده بی اثر هستند. این الگو برای راهنمایی کاربر از طریق مجموعه ای از موارد یک به یک مفید است.

برای ایجاد صحیح این مورد، باید از همان الگوی دسترسی مانند چرخ فلک تک موردی که قبلاً بحث شد استفاده کنید. این شامل:

• برای اعمال تعامل: بی اثر برای موارد غیرفعال از یک پرس و جوی ظرف حالت پیمایشی استفاده کنید.
• به اندازه کافی در اطراف موارد خود بالشتک اضافه کنید تا مطمئن شوید که هر آیتم را می توان به موقعیت اصلی (به عنوان مثال، مرکز اسکرولپورت) برد. این باعث می شود مدل ناوبری یک به یک عمدی و روان باشد.

الگوی 2: همه موارد قابل مشاهده تعاملی هستند

اگر هدف شما این است که به کاربران اجازه دهید آزادانه با همه موارد قابل مشاهده تعامل داشته باشند، بهترین کار این است که مطمئن شوید هیچ یک از محتواها بی اثر نیست.

برای این الگو:

• اگر محتوا از نظر معنایی یک لیست است، از عنصر <ul> استفاده کنید، زیرا این زمینه را برای کاربران صفحه‌خوان فراهم می‌کند.
• از مدیریت تعاملی استفاده نکنید ( interactivity: inert ). تمام محتوای قابل مشاهده باید در درخت دسترسی باقی بماند و با استفاده از زبانه صفحه کلید قابل دسترسی باشد.

بسته شدن

CSS Overflow 5 به شما این امکان را می دهد تا الگوهای چرخ و فلک متقابل و متداول را با سردردهای دسترسی کمتر به صورت اعلامی بسازید. با ترکیب HTML معنایی، CSS مدرن مانند حالت اسکرول و تعامل، و نقش‌های مناسب ARIA، می‌توانید تجربیاتی با کارایی بالا و در دسترس ایجاد کنید که در ابتدا تعاملی هستند.

این API های جدید را امتحان کنید! مثل همیشه، اگرچه این الگوها و APIها برای آسان‌تر ساختن اجزای تعاملی، سریع و در دسترس طراحی شده‌اند، هیچ جایگزینی برای تست دسترسی کامل وجود ندارد. شما همیشه باید بررسی کنید که کد شما قابل دسترسی است و برای هدف پایه شما کار می کند.