Source

دسترسی

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

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

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

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

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

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

اجزای تعاملی

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

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

تضاد رنگ

اکثر رنگ‌هایی که در حال حاضر پالت پیش‌فرض Bootstrap را تشکیل می‌دهند – که در سرتاسر چارچوب برای مواردی مانند تغییرات دکمه‌ها، تغییرات هشدار، نشانگرهای اعتبارسنجی فرم استفاده می‌شوند – در صورت استفاده در برابر کنتراست رنگ ناکافی (زیر نسبت کنتراست رنگ WCAG 2.0 توصیه‌شده 4.5:1 ) می‌شوند. یک پس زمینه روشن نویسندگان باید این رنگ‌های پیش‌فرض را به‌طور دستی تغییر/توسعه دهند تا نسبت‌های کنتراست رنگ مناسب را تضمین کنند.

محتوای پنهان بصری

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

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

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

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>

کاهش حرکت

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

منابع اضافی