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

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اکنون کاربر می داند که به جای دیدن هیچ چیز ، کدام پیوند را در جریان استفاده از صفحه کلید مشاهده کرده است ، این تغییر کمی در کد ما است اما می تواند به نفع زیادی از کاربران در خارج از کشور باشد که فقط از صفحه کلید برای حرکت در وب سایت استفاده می کنند.