برنامه نویسی

نکته ای برای بهبود دسترسی به دکمه ها در وب سایت های شما

ek3nk4r 2025-02-20

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

نکته ای برای بهبود دسترسی به دکمه ها در وب سایت های شما

پیشنهاد ویژه

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

فهرست مطالب

مقدمه

آیا تا به حال یک دکمه در HTML ایجاد کرده اید و آن را با CSS طراحی کرده اید؟ خوب ، اگر شما یک توسعه دهنده جلو هستید ، حدس می زنم که این کار را بسیار انجام داده اید. اما ، در مورد دسترسی به دکمه های شما چیست؟ آیا تا به حال سعی کرده اید فقط از وب سایت خود با صفحه کلید استفاده کنید؟ در این مقاله هدف من این است که یک نکته را برای بهبود دسترسی در دکمه هایی که ایجاد می کنید به شما نشان می دهد که به تعداد زیادی از کاربران امکان تعامل با وب سایت خود را به روشی مناسب می دهد.

مشکل

در مرحله اول ، بیایید با رایج ترین دکمه ای که می بینید شروع کنیم. (من از یک لنگر برای نگه داشتن معنایی HTML در مثال استفاده می کنم ، اما آنچه به شما نشان می دهد در مورد دکمه ها ، پیوندها یا هر چیز قابل کلیک اعمال می شود.)

HTML


 lang="en">
  
     charset="UTF-8" />
     name="viewport" content="width=device-width, initial-scale=1.0" />
     rel="stylesheet" href="style.css" />
    </span>Simple website<span class="nt"/>
  <span class="nt"/>
  <span class="nt"/>
    <span class="nt"><header> <span class="na">class=</span><span class="s">"header"</span><span class="nt">></span>
      <span class="nt"><nav/></span>
        <span class="nt"/>
      <span class="nt"/>
    <span class="nt"/></header></span>
  <span class="nt"/>
<span class="nt"/>
</span></span></span></span></code></pre>
<div class="highlight__panel js-actions-panel">
<div class="highlight__panel-action js-fullscreen-code-action">
    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>حالت تمام صفحه را وارد کنید



  CSS



* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --header-bg: #0a0a0a;
  --header-font: #fff;
}

.header {
  padding: 10px;
  background: var(--header-bg);
}

.header-ul {
  display: flex;
  justify-content: flex-end;
  column-gap: 10px;
  list-style-type: none;
}

.header-link {
  color: var(--header-font);
  text-decoration: none;
  padding: 10px;
  display: block;
  position: relative;
  outline: 0; /**Most CSS resets out there apply this rule in some form.*/
}

.header-link::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 5px;
  background-color: var(--header-font);
  transition: all 0.4s ease;
}

.header-link:hover::before {
  width: 100%;
}



    
    




  عملکرد



در GIF بالا می بینید که یک ظاهر طراحی شده به درستی کار می کند ، اما ، اگر کسی که دارای معلولیت است که فقط می تواند از صفحه کلید برای حرکت در داخل وب سایت استفاده کند ، سعی در استفاده از آن داشته باشد ، نمی توانند سبک را ببینند. بر روی اثر شناور ، زیرا کلاس شبه شناور فقط وقتی مکان نما وارد عنصر می شود فعال می شود.

  فقط با استفاده از صفحه کلید




  استفاده از سبک فوکوس


برای رفع این مشکل ، می توانیم از شبه کلاس استفاده کنیم focusبشر این کلاس شبه برای عنصر فعلی که فوکوس دریافت کرده است ، مانند یک کلیک یا ناوبری برگه در مثال ما فعال می شود.

.header-link:hover::before,
.header-link:focus::before {
  width: 100%;
}



    
    



ما هنوز هم می توانیم از سبک از اثر شناور استفاده مجدد کنیم. ما فقط باید وقتی عنصر با نحو متمرکز شود ، آن را نیز اعمال کنیم (class, element tag or element id):focus

  پس از استفاده از فوکوس شبه کلاس



در GIF فوق نمونه با focusاکنون کاربر می داند که به جای دیدن هیچ چیز ، کدام پیوند را در جریان استفاده از صفحه کلید مشاهده کرده است ، این تغییر کمی در کد ما است اما می تواند به نفع زیادی از کاربران در خارج از کشور باشد که فقط از صفحه کلید برای حرکت در وب سایت استفاده می کنند.