آموزش Visually hidden در بوت استرپ

در این بخش، کلاس Visually hidden در بوت استرپ مورد بررسی قرار می‌گیرد. از جمله این کلاس‌ها می‌توان به .visually-hidden و .visually-hidden-focusable اشاره کرد.

• کلاس .visually-hidden در بوت استرپ ۵ زمانی استفاده می‌شود که بخواهیم یک عنصر را از دید کاربر پنهان کنیم. اما همچنان آن را برای فناوری‌های کمکی مانند صفحه‌خوان‌ها در دسترس نگه داریم. به عبارت دیگر، این کلاس دسترسی پذیری (accessibility) را حفظ می‌کند، در حالی که آن عنصر در ظاهر صفحه نمایش داده نمی‌شود.
• کلاس .visually-hidden-focusable نیز عملکردی مشابه دارد با این تفاوت که عنصر مورد نظر در حالت عادی مخفی است، اما زمانی که با صفحه کلید یا ماوس روی آن فوکوس شود، قابل مشاهده می‌شود. این ویژگی برای بهینه سازی تجربه کاربری افرادی که با صفحه کلید به مرور محتوا می‌پردازند بسیار کاربردی است.
• همچنین می‌توان کلاس .visually-hidden-focusable را در ترکیب با شبه‌کلاس :focus-within روی یک ظرف (container) استفاده کرد. در این حالت، اگر هر یک از فرزندان آن ظرف فوکوس بگیرند، کل ظرف قابل مشاهده خواهد شد.

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

در ادامه، مثالی برای کاربرد کلاس های .visually-hidden و .visually-hidden-focusable ارائه می‌شود:

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

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

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.