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>

منابع اضافی