افزودن پیوند پرش به محتوای اصلی به وب سایت شخصی من

ek3nk4r 2023-07-22

0 68 خواندن این مطلب 1 دقیقه زمان میبرد

افزودن پیوند پرش به محتوای اصلی به وب سایت شخصی من

پیشنهاد ویژه

خرید فالوور واقعی خرید لایک اینستاگرام خرید ویو اینستاگرام خرید فالوور اینستاگرام

اخیراً صفحه کلید Logitech K380 را انتخاب کردم تا همراه با Macbook Air از آن استفاده کنم. و من سعی کردم صفحات وب را فقط با صفحه کلید هدایت کنم، و باید بگویم این تجربه برای وب سایت هایی که از پیوند “پرش به محتوای اصلی” پشتیبانی می کنند بسیار بهتر است.

بنابراین، از آنجایی که شروع به بررسی بیشتر در زمینه دسترسی به وب کردم، می خواهم یکی را به سایت شخصی خود اضافه کنم.

فهرست مطالب

HTML

بدیهی است که ما باید این پیوند را در ابتدای صفحه وب خود اضافه کنیم تا یکی از اولین مواردی باشد که کاربران صفحه‌کلید و صفحه‌خوان به آن دسترسی پیدا می‌کنند.

<body>
    <a href="#maincontent">Skip to main content</a>
    <header></header>
    <main id="main-content"></main>
    <footer></footer>
</body>

همراه با رفتار اسکرول صاف برای افزایش تجربه برای افراد بینا.

html {
    scroll-behavior: smooth;
}

گام بعدی این است که این پیوند را به صورت بصری پنهان کنید تا زمانی که کاربر با صفحه کلید به آن پیمایش کند.

با توجه به Skip Navigation Links در WebAIM، برای قابل استفاده برای همه کاربران صفحه کلید، به ویژه کاربران صفحه کلید بینا، پیوند باید:

به صورت پیش فرض مخفی شود
برای ناوبری صفحه کلید قابل دسترسی باشد
هنگامی که فوکوس می شود به وضوح قابل مشاهده می شود
هنگامی که فعال می شود، فوکوس را روی قسمت محتوای اصلی تنظیم کنید

چندین تکنیک CSS برای پنهان کردن بصری محتوا وجود دارد، تکنیک‌های پنهان کردن محتوا مقاله خوبی است که نمی‌خواهید از آن بگذرید 🙂

CSS

هنگامی که این پیوند توسط صفحه کلید متمرکز می شود، با تغییر آن، می توانیم از سبک های پیش فرض مرورگر استفاده کنیم outline-color همراه با الف outline-offset.

.skip-to-content {
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: -1;
    padding-inline: 1.75ch;
    padding-block: .75ch;
    border-radius: .5ch;
    background: var(--accent-color);
    color: white;
    font-weight: bold;
    opacity: 0;
}

.skip-to-content:focus-visible {
    outline-color: var(--accent-color, #7044e8);
    outline-style: solid;
    outline-width: 2px;
    outline-offset: 3px;
    opacity: 1;
    z-index: 999;
}