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

0 دیدگاه

در این بخش، کلاس 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 ارائه می‌شود:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap - Helper - Visually hidden</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <h4>Visually hidden</h4><br><br>
        <h4 class="visually-hidden">Hidden title for screen readers</h4>
        <a class="visually-hidden-focusable" href="#content">Skip to home page</a>
        <div class="visually-hidden-focusable">A container with an <a href="#">element that is focusable</a>.</div>
    </body>
</html>

<!DOCTYPE html>

<head>

<title>Bootstrap - Helper - Visually hidden</title>

</head>

<body>

<h4>Visually hidden</h4><br><br>

<h4 class="visually-hidden">Hidden title for screen readers</h4>

<div class="visually-hidden-focusable">A container with an <a href="#">element that is focusable</a>.</div>

</body>

</html>

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

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

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

5/5 - (1 امتیاز)

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

نظرات

پکیج آموزش صفر تا صد فتوشاپ به زبان فارسی – حرفه ای شوید

انتشار: ۱۴ تیر ۱۴۰۴

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

دسته بندی موضوعات

آخرین محصولات فروشگاه

نظرات

بازخوردهای خود را برای ما ارسال کنید

لغو پاسخ

مطالب مرتبط