نحوه ساخت کامپوننت های قابل دسترس برای Vue

به عنوان یک توسعه‌دهنده، معمولاً فکر می‌کنیم که همه کاربران نهایی می‌توانند مانند شما از برنامه وب شما استفاده کنند. با این حال، عبور از وب‌سایتی که به کندی بارگیری می‌شود، سازگار با موبایل نیست یا از متن بسیار کوچک استفاده می‌کند، سخت است. همه این موارد می تواند مانع از داشتن یک تجربه لذت بخش برای کاربران معلول شود.

در این مقاله، ما در مورد دسترسی بحث خواهیم کرد، یاد می گیریم که چگونه و چرا برنامه های کاربردی مبتنی بر دسترسی به همه کاربران نهایی ما سود می برند. سپس، ما تجربه عملی برای یادگیری نحوه دسترسی بیشتر به برنامه های کاربردی وب خود خواهیم داشت.

به طور کلی، دکمه‌های تعویض CSS یک کامپوننت رابط کاربری فوق‌العاده رایج هستند. با این حال، توسعه دهندگان اغلب تصور می کنند که ایجاد دکمه های جابجایی دشوار است و بنابراین به جای آن از چک باکس های استاندارد استفاده می کنند. در این آموزش، ما یک دکمه جابجایی به عنوان یک کامپوننت Vue با ویژگی‌های اضافی که به قابلیت استفاده و قابلیت اطمینان کمک می‌کند، می‌سازیم. بیا شروع کنیم!

دسترسی (accessibility) چیست؟

دسترس‌پذیری، که اغلب به «a11y» خلاصه می‌شود، به زمانی اشاره دارد که یک سایت می‌تواند بدون در نظر گرفتن توانایی فیزیکی، توسط هر کسی به طور یکپارچه اداره شود. دسترس‌پذیری وب، تمرین استفاده از ابزارها و فناوری‌هایی است که پیمایش، تعامل و درک یک وب‌سایت را برای بازدیدکنندگانی که ممکن است دارای معلولیت، نقص یا سایر محدودیت‌ها باشند، آسان‌تر کند.

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

W3C Web Accessibility Initiative (WAI) سازمانی است که مسئول توسعه استانداردها و موارد پشتیبانی است که به درک و پیاده سازی دسترسی کمک می کند.

چک لیست های دسترسی WCAG

ادغام قابلیت دسترسی در وب سایت شما می تواند برای کسی که به تازگی با مفهوم "ساختن برای همه" شروع کرده است بسیار ترسناک باشد، اما نمی توان بر اهمیت آن تاکید کرد. بیایید چند چک لیست را که می توانیم دنبال کنیم، مرور کنیم؛ اینها مفید هستند زیرا ایده دسترسی به خودی خود گسترده است.

دستورالعمل‌های دسترسی به محتوای وب (WCAG) 2.0 مجموعه‌ای از دستورالعمل‌ها و بهترین شیوه‌ها است که توسط متخصصان دسترس‌پذیری برای دسترسی بیشتر به محتوای وب گردآوری شده است. چهار اصل اصلی که WCAG را هدایت می کند به شرح زیر است:

قابل درک: اطلاعات و کامپوننت‌های رابط کاربری به گونه‌ای توسعه و ارائه می‌شوند که همه کاربران می‌توانند به طور ایده‌آل به آن دسترسی داشته باشند و درک کنند
قابل اجرا: کاربران باید بتوانند به طور موثر و کارآمد از اجزای UI استفاده کنند و ناوبری باید یکپارچه باشد.
قابل درک: کاربران باید بتوانند هم محتوا و هم رابط کاربری برنامه را به روشی درک کنند که باعث سردرگمی نشود.
قوی: محتوا باید توسط طیف گسترده ای از عوامل کاربر قابل مصرف باشد، در حالی که با فناوری های کمکی نیز کار می کند.
 

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

ساخت کامپوننت Vue در دسترس

برای نشان دادن نحوه ساخت یک کامپوننت قابل دسترسی با استفاده از Vue، ما از طریق فرآیند ساخت کامپوننت دکمه جابه‌جایی با تمرکز شدید بر دسترسی و سهولت استفاده قدم می‌زنیم.

راه اندازی پروژه

بیایید پروژه را ایجاد کنیم و با استفاده از دستور زیر نام آن را vue-accessible-toggle بگذاریم:

vue create vue-accessible-toggle

دستور بالا یک الگو برای ما ایجاد می کند تا شروع به ساخت پروژه Vue خود کنیم. با رفتن به فهرست جدید خود و اجرای سرور توسعه به صورت زیر می توانید این الگو را مشاهده کنید و yarn را صدا بزنید.

cd vue-accessible-toggle


yarn serve

می‌توانیم در مرورگر localhost:8080 مشاهده کنیم.

ساخت کامپوننت چک باکس

در پوشه کامپوننت ها، یک فایل جدید به نام AccessibleToggle.vue ایجاد کنید. در این فایل، رابط کاربری دکمه جابجایی را ایجاد می کنیم. اکنون می‌توانیم یک input سفارشی ایجاد کرده و به آن استایل دهید تا تگ input دیگر قابل مشاهده نباشد. سپس، می‌توانیم تگ input را به یک سوئیچ تبدیل کنیم:

<template>
  <div class="accessible-toggle">
    <input type="checkbox" id="check_box" class="toggle" />
    <label for="check_box">Switched?</label>
  </div>
</template&gt;

<style scoped>
input[type="checkbox"].toggle {
  opacity: 0;
  position: absolute;
  left: -5000px;
  top: -5000px;
}
input[type="checkbox"].toggle + label {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
}

input[type="checkbox"].toggle + label::before {
  content: "";
  width: 2em;
  height: 1em;
  border-radius: 1em;
  margin-right: 0.5em;
  background-color: #eee;
  transition: background-color 200ms ease-in-out;
}
input[type="checkbox"].toggle + label::after {
  position: absolute;
  content: "";
  left: 0.2em;
  width: 0.8em;
  height: 0.8em;
  border-radius: 1em;
  background-color: rgba(205, 167, 241, 0.28);
  transition: background-color 200ms ease-in-out;
}
</style>

در مرحله بعد، ما یک استایل اضافه می کنیم که باعث می شود وقتی سوئیچ فعال است، سوئیچ در جهت مخالف حرکت کند:

input[type="checkbox"].toggle:checked + label::after {
  transform: translateX(100%);
  background-color: blueviolet;
}

ساختن به صورت دسترسی مجدد

اکنون که ظاهر مورد نظر را برای کامپوننت سوئیچ تعویض داریم، برخی از ویژگی های دسترسی را به آن اضافه می کنیم. قبلاً می‌توانیم ببینیم که کامپوننت سوئیچ جابجایی از تگ چک باکس بومی به صورت داخلی استفاده می‌کند که فقط برای صفحه‌خوان‌ها قابل مشاهده است. مقدار مورد استفاده برای توصیف کامپوننت از طریق یک برچسب ارائه می شود.

اولین قدم برای ایجاد دسترسی این است که آن را طوری بسازیم که بتوانیم از کلید tab روی صفحه کلید برای کنترل تغییر سوئیچ استفاده کنیم. ما همچنین می‌خواهیم آن را به صورت بصری مشخص کنیم، بنابراین با پشتیبانی از صفحه‌کلید، تمرکز را به کادر تأیید منتقل می‌کنیم.

ما این کار را با افزودن کلاس :focus به دکمه جابجایی انجام خواهیم داد.کلاس :focus در CSS روی تگ هایی استفاده می‌شود که فوکوس روی صفحه را دریافت می‌کنند و به طور کلی زمانی مفید است که کاربر روی یک تگ با کلید تب روی صفحه‌کلید کلیک یا انتخاب کند.

ما استایل دکمه جابجایی را به گونه‌ای پیکربندی می‌کنیم که کاربر بداند چه زمانی دکمه جابجایی فوکوس دریافت کرده است، هم برای کنترل سوئیچ و هم برای تغییر وضعیت علامت‌دار با استفاده از نوار فاصله. این گامی برای اطمینان از عملکرد صفحه کلید برای کامپوننت دکمه جابجایی است و برای افرادی که در پیمایش وب سایت با ماوس یا دستگاه اشاره گر مشکل دارند مفید است. اکنون، کاربر می تواند به جای آن از صفحه کلید استفاده کند:

input[type="checkbox"].toggle:focus + label::before {
  outline: 1px solid black;
}

در مرحله بعد، به جای اینکه محتوا را به عنوان رشته های خالی بگذاریم، کدهای موجود HTML را اضافه می کنیم.همانند زیر:

input[type="checkbox"].toggle {
  opacity: 0;
  position: absolute;
  left: -5000px;
  top: -5000px;
}
input[type="checkbox"].toggle + label {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
}
input[type="checkbox"].toggle + label::before {
  content: "";
  width: 2em;
  height: 1em;
  border-radius: 1em;
  margin-right: 0.5em;
  background-color: #eee;
  transition: background-color 200ms ease-in-out;
}
input[type="checkbox"].toggle + label::after {
  position: absolute;
  content: "\2715";
  font-size: 0.5em;
  left: 0.2em;
  width: 1.6em;
  height: 1.6em;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 1em;
  background-color: rgba(205, 167, 241, 0.28);
  transition: background-color 200ms ease-in-out;
}
input[type="checkbox"].toggle:checked + label::after {
  transform: translateX(100%);
  background-color: blueviolet;
  content: "\2713";
}
input[type="checkbox"].toggle:focus + label::before {
  outline: 1px solid black;
}

همچنین مهم است که رابط کاربری غیرفعال را برای دکمه جابجایی بسازید تا نشان دهد وقتی دکمه غیرفعال است چگونه به نظر می رسد. برای این کار، template را به صورت زیر به روز می کنیم:

<template>
  <div class="accessible-toggle">
    <input type="checkbox" id="check_box" class="toggle" />
    <label for="check_box">Switched?</label>
    <br />
    <input disabled type="checkbox" id="disabled_check_box" class="toggle" />
    <label for="disabled_check_box">Switched?</label>
  </div>
</template>

سپس، با به روز رسانی CSS موجود با کد زیر، دکمه جابجایی را استایل می کنیم:

input[type="checkbox"].toggle:disabled + label::before {
  background-color: #ccc;
}
input[type="checkbox"].toggle:disabled + label::after {
  background-color: #777;
}

با این کار، به جای تکیه بر input چک باکس استاندارد HTML، با موفقیت یک دکمه جابجایی زیبا و قابل استفاده تر با Vue ایجاد کردیم. ما می‌توانیم با ایجاد رابط کاربری دیگری که کلاس جابجایی ندارد، این را در مقابل چک باکس معمولی تجسم کنیم، بنابراین template به شکل زیر است:

<template>
  <div class="accessible-toggle">
    <input type="checkbox" id="check_box" class="toggle" />
    <label for="check_box">Improved checkbox</label>
    <br />
    <input type="checkbox" id="standard_check_box" />
    <label for="standard_check_box">Standard checkbox</label>
    <br />
    <input disabled type="checkbox" id="standard_disabled_check_box" />
    <label for="standard_disabled_check_box">Standard disabled checkbox</label>
    <br />
    <br />
    <input disabled type="checkbox" id="disabled_check_box" class="toggle" />
    <label for="disabled_check_box">Improved disabled checkbox</label>
  </div>
</template>

نتیجه

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

ما دیدیم که ساخت یک کامپوننت در دسترس برای خدمت به عنوان دکمه جابجایی چقدر آسان است. این ویژگی سازگاری‌های مختلفی برای حالت غیرفعال و همچنین حالت متمرکز دارد، بنابراین کاربرانی را که در مسیریابی با ماوس یا دستگاه اشاره‌گر مشکل دارند، ارائه می‌کند و به آن‌ها اجازه می‌دهد تا از طریق کامپوننت به منظور استفاده از صفحه‌کلید برای تقلید از دستگاه اشاره‌گر استفاده کنند.