دسترسی

مروری کوتاه بر ویژگی ها و محدودیت های بوت استرپ برای ایجاد محتوای قابل دسترس.

در این صفحه

بوت استرپ یک چارچوب آسان برای استفاده از سبک های آماده، ابزارهای چیدمان و اجزای تعاملی را ارائه می دهد که به توسعه دهندگان این امکان را می دهد تا وب سایت ها و برنامه هایی را ایجاد کنند که از نظر بصری جذاب، از نظر عملکردی غنی و در دسترس هستند.

بررسی اجمالی و محدودیت ها

دسترسی کلی هر پروژه ای که با بوت استرپ ساخته شده است تا حد زیادی به نشانه گذاری نویسنده، استایل اضافی، و اسکریپت هایی که شامل شده است بستگی دارد. با این حال، به شرطی که این موارد به درستی پیاده‌سازی شده باشند، ایجاد وب‌سایت‌ها و برنامه‌هایی با Bootstrap که WCAG 2.1 (A/AA/AAA)، بخش 508 و استانداردها و الزامات دسترسی مشابه را برآورده می‌کنند، باید کاملاً ممکن باشد.

نشانه گذاری ساختاری

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

اجزای تعاملی

اجزای تعاملی بوت استرپ - مانند دیالوگ های مدال، منوهای کشویی و راهنمایی های ابزار سفارشی- طوری طراحی شده اند که برای کاربران لمسی، ماوس و صفحه کلید کار کنند. از طریق استفاده از نقش‌ها و ویژگی‌های WAI - ARIA ، این مؤلفه‌ها باید با استفاده از فناوری‌های کمکی (مانند صفحه‌خوان‌ها) قابل درک و قابل اجرا باشند.

از آنجایی که مؤلفه‌های Bootstrap عمداً به گونه‌ای طراحی شده‌اند که نسبتاً عمومی باشند، نویسندگان ممکن است نیاز داشته باشند که نقش‌ها و ویژگی‌های ARIA و همچنین رفتار جاوا اسکریپت را برای انتقال دقیق‌تر ماهیت و عملکرد دقیق مؤلفه‌شان، اضافه کنند. این معمولاً در اسناد ذکر می شود.

تضاد رنگ

برخی از ترکیب‌های رنگی که در حال حاضر پالت پیش‌فرض Bootstrap را تشکیل می‌دهند - که در سراسر چارچوب برای مواردی مانند تغییرات دکمه‌ها، تغییرات هشدار، شاخص‌های اعتبارسنجی فرم استفاده می‌شود - ممکن است منجر به کنتراست رنگ ناکافی شود (زیر نسبت کنتراست رنگ متن WCAG 2.1 توصیه شده 4.5:1). و نسبت کنتراست رنگ غیر متنی WCAG 2.1 3:1 )، به ویژه هنگامی که در پس زمینه روشن استفاده می شود. نویسندگان تشویق می‌شوند تا کاربردهای خاص خود را از رنگ آزمایش کنند و در صورت لزوم، این رنگ‌های پیش‌فرض را به‌صورت دستی تغییر/توسعه دهند تا از نسبت‌های کنتراست رنگی مناسب اطمینان حاصل کنند.

محتوایی که باید از نظر بصری پنهان باشد، اما برای فناوری‌های کمکی مانند صفحه‌خوان‌ها قابل دسترسی باشد، می‌تواند با استفاده از .visually-hiddenکلاس استایل‌بندی شود. این می تواند در شرایطی مفید باشد که اطلاعات بصری یا نشانه های اضافی (مانند معنایی که از طریق استفاده از رنگ نشان داده می شود) باید به کاربران غیر بصری نیز منتقل شود.

<p class="text-danger">
  <span class="visually-hidden">Danger: </span>
  This action is not reversible
</p>

برای کنترل‌های تعاملی پنهان بصری، مانند پیوندهای سنتی «پرش»، از .visually-hidden-focusableکلاس استفاده کنید. این اطمینان حاصل می کند که کنترل پس از تمرکز (برای کاربران صفحه کلید بینا) قابل مشاهده است. مراقب باشید، در مقایسه با کلاس‌های مشابه .sr-onlyدر .sr-only-focusableنسخه‌های گذشته، Bootstrap 5 .visually-hidden-focusableیک کلاس مستقل است و نباید در ترکیب با .visually-hiddenکلاس استفاده شود.

<a class="visually-hidden-focusable" href="#content">Skip to main content</a>

کاهش حرکت

Bootstrap شامل پشتیبانی از prefers-reduced-motionویژگی رسانه است . در مرورگرها/محیط هایی که به کاربر اجازه می دهد اولویت خود را برای کاهش حرکت مشخص کند، بیشتر جلوه های انتقال CSS در بوت استرپ (به عنوان مثال، زمانی که یک گفتگوی مودال باز یا بسته می شود، یا انیمیشن کشویی در چرخ فلک ها) غیرفعال می شود و انیمیشن های معنی دار ( مانند اسپینرها) کند خواهد شد.

در مرورگرهایی که پشتیبانی می‌کنند prefers-reduced-motion، و در جایی که کاربر به صراحت علامت نداده است که حرکت کاهش‌یافته را ترجیح می‌دهد (یعنی کجا prefers-reduced-motion: no-preference)، Bootstrap پیمایش صاف را با استفاده از scroll-behaviorویژگی امکان‌پذیر می‌کند.